Chrome と Firefox での JavaScript コンソールのスタイル設定

今日の Web 開発の領域では、JavaScript コンソールはエラーのデバッグに不可欠なツールとなっています。そして情報を表示します。ただし、標準のモノクロ出力では、さまざまな種類のメッセージを区別しようとする場合に制限が生じる可能性があります。この質問は、「JavaScript コンソールに色を表示して、開発者がエラー、警告、および通常のログ メッセージの外観をカスタマイズできるようにすることはできますか?」という一般的な質問に答えています。

Chrome と Firefox については、答えははっきりと「はい」です。結局のところ、これらのブラウザは、開発者が console.log メッセージにスタイルを追加できる便利な CSS メカニズムを提供しています。ログ出力に CSS スタイルを挿入すると、さまざまな種類のメッセージを色分けして、視覚的に魅力的で区別しやすくすることができます。

たとえば、エラーを赤色で表示し、警告をオレンジ色で表示したい場合は、 、および console.log メッセージが緑色で表示されている場合は、コンソールで次のコードを実行するだけです:

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

これにより、コンソールに赤い背景とオレンジ色のテキストでメッセージが出力され、エラーが効果的に強調表示されます。この手法を使用すると、あらゆる種類のログ メッセージの外観をカスタマイズできるため、問題の特定や特定の情報の取得が容易になります。