console.log追加のスタイルと写真

テキストと画像のコンソールにconsole.logプレイCSSスタイルで

Googleのブラウザのコンソールにconsole.logに上記のGoogleデベロッパーセンター（）のドキュメント

フォーマット	指定子
％sの	文字列として値をフォーマットします。
％dまたは％I	整数値をフォーマットします。
％F	浮動小数点値として値をフォーマットします。
％	（エレメントパネルのように）、拡張可能なDOM要素として値をフォーマットします。
％	拡張可能なJavaScriptオブジェクトとして値をフォーマットします。
％のC	あなたが提供するCSSスタイルに応じた出力文字列をフォーマットします。

これは、プレースホルダで見ることができ%c、CSSは、コンソールポートへの出力テキストに制御することができます。

形式は次のとおりです。

console.log("%c需要输出的信息 ", "css 代码");

出力3Dテキスト

1

コンソール の.log（ "％C3Dテキスト" 、 「テキストの影：0 1pxの0＃CCC、0 2ピクセル0＃c9c9c9,0 3px 0＃BBB、0 4PX 0＃b9b9b9,0 5pxの0＃AAA、0計6Px 1ピクセルのRGBA（ 0,0,0、0.1）、0 5pxのRGBA（0,0,0、0.1）、0 1ピクセル3px RGBA（0,0,0、0.3）、0 3px 5pxのRGBA（0,0,0 、0.2）、0 5pxの10pxのRGBA（0,0,0、0.25）、0 10pxの10pxのRGBA（0,0,0、0.2）、0 20ピクセル20ピクセルRGBA（0,0,0、0.15）。フォントサイズ：5em」 ）

彩色背景文字

1

コンソール の.log（ "％C彩色文字" 、 「背景：RGBA（252,234,187,1）は、背景：-moz-線形勾配（左、RGBA（252,234,187,1）0％、RGBA（175,250,77,1）12 ％、RGBA（0,247,49,1）28％、RGBA（0,210,247,1）39％、RGBA（0,189,247,1）51％、RGBA（133,108,217,1）64％、RGBA（177,0,247,1）78％ 、RGBA（247,0,189,1）87％、RGBA（245,22,52,1）100％）;背景：-webkit-勾配（左上、右上、色ストップ（0％、RGBA（252234187、 1））、色ストップ（12％、RGBA（175,250,77,1））、色ストップ（28％、RGBA（0,247,49,1））、色ストップ（39％、RGBA（0,210,247,1 ））、色ストップ（51％、RGBA（0,189,247,1））、色ストップ（64％、RGBA（133,108,217,1））、色ストップ（78％、RGBA（177,0,247,1））、カラーストップ（87％、RGBA（247,0,189,1））、色ストップ（100％、RGBA（245,22,52,1）））;背景：-webkit-線形勾配（左、RGBA（ 252,234,187,1）0％、RGBA（175,250,77,1）12大きな箱  にconsole.log追加のスタイルと写真％、RGBA（0,247,49,1）28％、RGBA（0,210,247,1）39％、RGBA（0,189,247,1）51％、RGBA（133,108,217,1）64％、RGBA（177,0,247,1）78％ 、RGBA（247,0,189,1）87％、RGBA（245,22,52,1）100％）;背景：-O-線形勾配（左、RGBA（252,234,187,1）0％、RGBA（175250、 77,1）12％、RGBA（0,247,49,1）28％、RGBA（0,210,247,1）39％、RGBA（0,189,247,1）51％、RGBA（133,108,217,1）64％、RGBA（177,0,247 、1）78％、RGBA（247,0,189,1）87％、RGBA（245,22,52,1）100％）;背景：-ms-線形勾配（左、RGBA（252,234,187,1）0％ 、RGBA（175,250,77,1）12％、RGBA（0,247,49,1）28％、RGBA（0,210,247,1）39％、RGBA（0,189,247,1）51％、RGBA（133,108,217,1）64％、 RGBA（177,0,247,1）78％、RGBA（247,0,189,1）87％、RGBA（245,22,52,1）100％）;背景：線形勾配（右に、RGBA（252,234,187,1 ）0％、RGBA（175,250,77,1）12％、RGBA（0,247,49,1）28％、RGBA（0,210,247,1）39％、RGBA（0,189,247,1）51％、RGBA（133,108,217,1） 64％、RGBA（177,0,247、1）78％、RGBA（247,0,189,1）87％、RGBA（245,22,52,1）100％）;フィルター：プログラムID：DXImageTransform.Microsoft.gradient（startColorstr = '＃1 fceabb'、endColorstr =」 ＃f51634' 、するGradientType = 1）;フォントサイズ：5em」 ）

テキストの色

1	コンソール の.log（ '青のI％のC' 、 '色：青;フォントサイズ：24ピクセル' ）;

セットの異なるCSS

1	コンソール の.log（ "％C第一％C第二％C第三" 、 "色：赤" 、 "色：緑" 、 "色：緑" ）

クロームコンソール出力画像で

1	コンソール の.log（ "％のC" 、 "パディング：は50px 300ピクセル、行の高さ：120ピクセル、背景：URL（ 'http://www.iconpng.com/png/tailwaggers_free/pug.png'）なしリピート;" ）;

参考資料

https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html