console.logにstyleを適用する

JavaScriptで使用するconsole.log()にCSSを適用できるらしいので試してみました。
Google ChromeだけでなくFirefoxでも可能なようです。

サンプルコード

console.log()内に表示させたい内容を入れることで、開発ツール内のコンソールで内容を確認できます。

JavaScript

console.log('通常のコンソール');

styleを適用する場合、適用したい文字列の前に「%c」を追加し、第2引数に適用するstyleを記述します。

console.log('%c文字色:赤+文字サイズ:16px', 'color: red; font-size: 16px;');

使いまわす場合、変数に格納して使用することもできます。

var styles = 'color: yellow; background-color: black; line-height: 4;';
console.log('%c文字色:黄+背景色:黒', styles);

複数のstyleを使用する場合、使用する分だけ引数を増やすことができます。

console.log('%c文字色:青+太字:bold %c文字色:緑+斜体 %c文字色:紫+下線', 'color: blue; font-weight: bold;', 'color: green; font-style: italic;', 'color: purple; text-decoration: underline;');

途中で元に戻したい場合は、引数を空にします。

console.log('%c文字色:オレンジ+メイリオ %c途中から元に戻す', 'color: orange; font-family: Meiryo;', '');

console.logにstyleを適用するデモページ
　

【参考サイト】

• JavaScript – Chromeでconsole.logにスタイルを適用する – Qiita
• console.logにCSSを適用させてみよう | 株式会社LIG