web-dev-qa-db-ja.com

フォーマットされたjavascriptコンソールログメッセージを作成するにはどうすればよいですか

今日のFacebookでChrome.
驚いたことに、このメッセージがコンソールに表示されました。

今、私の質問は:
これはどのように可能ですか?
コンソールには「エクスプロイト」メソッドがいくつかあることは知っていますが、コンソールでそのようなフォントの書式を設定するにはどうすればよいですか? (それはconsole.logですか?)

76
Anders Kjeldsen

はい、次のような形式でconsole.log()をフォーマットできます。

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

最初の引数のテキストの前の%cと、2番目の引数のスタイル指定に注意してください。テキストは例のようになります。

Googleの「CSSを使用したコンソール出力のスタイリング」 または FireBugのコンソールドキュメント を参照してください。

ドキュメントリンクには、コンソールリンクにオブジェクトリンクを含めるなど、その他の巧妙なトリックも含まれています。

105
Dallas

これを試して:

console.log("%cThis will be formatted with blue text", "color: blue");

ドキュメントを引用して、

%c形式指定子を使用して、console.log()または関連メソッドでコンソールに書き込む文字列にカスタムCSSルールを適用します。

ソース: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

25
ochi

部分文字列をフォーマットすることもできます。

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

enter image description here

18

GoogleのWebサイトから: site

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
7
Jonathan