console.logの出力にスタイルを指定する方法
概要
cookpadを見ていてふと開発者ツールを開いたら、警告が表示された。
細かいところまで行き届いてるのか、はたまた、実際にコンソールで操作させて何か行わせた事例でもあったのか。
それとも、小粋な遊び心？（「cookpad.joinUs();」と実行するとcookpad内の採用情報ページに飛ばされる。）
それはそれとして、表示されたメッセージに色がついていたことに驚愕。 ライブラリでも使っているのかなと思って調べたら、引数でスタイルを渡し、出力文字列に「%c」で指定することでスタイルをあてる事ができるらしい。
具体的には以下の通り。
console.log("%cこれは赤字です。", "color: red");
複数指定する場合には、引数にスタイルを再度追加して、出力文字列には「%c」を再度指定する事で可能。（文字列は「"」で区切られる。）
console.log("%c赤色%c1.5倍", "color: red", "font-size:150%");
指定したスタイルを消すには空文字を指定というのを見ましたが、2015/07/28現在ではこれはChromeのみ。 firefoxだとその前の指定を引き継ぎ、IEだとそもそもスタイルの指定が効きません。
うまく使えば色々便利そうですが、consoleオブジェクトって仕様決まってるんですかね？
参考URL
- cookpad
- Chromeでconsole.logにスタイルを適用する
- console.logにCSSを適用させてみよう
- 2014年時点での効果のあるスタイルの一覧がありました。
