読者です 読者をやめる 読者になる 読者になる

山pの楽しいお勉強生活

勉強の成果を垂れ流していきます

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