2021.02.24
138
こんにちは、最近LINEスタンプになったづやです。
さて、JavaScriptのコンソールログってありますよね。
console.log("hello world!")
こんなことやると、デバッグツールのコンソールに文字を表示させることができるあれです。
※IE8以下はエラーになるので要注意です。
こいつには、Chromeだと一部のstyleを効かせることができるようです。
参考:Using the Console – Google Chrome
https://developer.chrome.com/devtools/docs/console
やり方はけっこう簡単で「%c」を文字の中にいれて第2引数で対象のstyleを呼ぶだけでいけるようです。
var style="color:red;"
console.log("%chello world!" , style);
※IEはこの記事を執筆している時点での最新バージョン11.0.9600.17041でもダメでした。
途中で違うstyleを当てたい場合は、下記のような書き方でもいけるようです。
var redStyle="color:red;" ,
blueStyle = "color:blue;";
console.log('%chello%c %cworld!%c' , redStyle , '' , blueStyle , '' );
しかし当然といえば当然なんですが、使用可能なstyleとないstyleがあるようです。
ドキュメント見てもそれっぽいのがないので、調べてみました。
※あったら教えてください、悲しすぎる。
テキストを装飾するようなstyleはだいたい効くようです。
この記事を参考に素敵なconsole.logライフが送れるといいですね。