このガイドでは、Chrome DevTools Console でメッセージをフォーマットしてスタイルを設定する方法について説明します。コンソールにメッセージをロギングする方法については、メッセージのロギングのスタートガイドをご覧ください。
このガイドは、JavaScript を使用してページにインタラクティビティを追加する方法など、ウェブ開発の基礎を理解していることを前提としています。
コンソール メッセージの書式設定
形式指定子を使用して、コンソール メッセージをフォーマットできます。
形式指定子はパーセント文字(%)で始まり、データの型(整数、浮動小数点数など)を示す「型文字」で終わります。
次に例を示します。
- コンソールを開きます。
次のコンソールコマンドを入力します。
const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
上記のコマンドを実行すると、
Chrome DevTools is awesome.
メッセージが生成されます。
Chrome DevTools で現在サポートされている形式指定子のリストは次のとおりです。
指定子 | 出力 |
---|---|
%s |
値を文字列としてフォーマットする |
%i または %d |
値を整数として書式設定します。 |
%f |
値を浮動小数点値として書式設定します。 |
%o |
値を展開可能な DOM 要素としてフォーマットします。 |
%O |
値を展開可能な JavaScript オブジェクトとしてフォーマットします。 |
%c |
2 番目のパラメータで指定されたように出力文字列に CSS スタイルルールを適用します。 |
複数の形式指定子を適用する
メッセージで複数の形式指定子を使用できます。
次のコンソールコマンドを入力します。
console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
上記のコマンドを実行すると、
The total weight of 3 apples and 2 oranges is 432.4 grams.
メッセージが生成されます。
型変換について
出力メッセージは、形式指定子に従って変換されます。
次のコンソールコマンドを入力します。
console.log('I have %i apples and %d oranges.', 2, 3.5);
上記のコマンドを実行すると、
I have 2 apples and 3 oranges.
メッセージが生成されます。3.5 oranges
ではなく3 oranges
が出力されます。%d
は、値が整数に変換されることを示します。
型変換が無効な場合の例を次に示します。
次のコンソールコマンドを入力します。
console.log('Jane has %i kiwis.', 'two');
上記のコマンドを実行すると、
Jane has NaN kiwis.
メッセージが生成されます。%i
は、値が整数に変換される必要があることを示していますが、引数は文字列です。したがって、NaN(Not-A-Number)が返されます。
コンソール メッセージをスタイル設定する
DevTools でコンソール メッセージのスタイルを設定する方法は 2 つあります。
形式指定子を使用したスタイル
%c
形式指定子を使用すると、CSS でコンソール メッセージのスタイルを設定できます。
次のコンソールコマンドを入力します。
const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;' console.log("%cHooray", style);
上記のコマンドを実行すると、CSS スタイルが適用された
Hooray
が生成されます。
ANSI エスケープ シーケンスを使用してスタイルを設定する
ANSI エスケープ シーケンスを使用して、コンソール メッセージのスタイルを設定できます。
Node.js デベロッパーは、ANSI エスケープ シーケンスを使用してログ メッセージを色分けするのが一般的です。多くの場合、chalk、colors、ansi-colors、kleur などのスタイル設定ライブラリを使用します。
ライブラリを使用せずに、ANSI エスケープ シーケンスでメッセージのスタイルを設定することもできます。構文は次のとおりです。
\x1B[𝘗1;…;𝘗nm
ここで
𝘗1
~𝘗n
は、SGR(Select Graphic Rendition)パラメータの有効なサブシーケンスです。𝘗1
~𝘗n
のいずれかのパラメータは省略できます。省略した場合、その値はゼロと見なされます。\x1B[m
は\x1B[0m
の省略形で、表示属性がリセットされます。
次に例を示します。
次のコンソールコマンドを入力します。
console.log('\x1B[41;93;4mHello\x1B[m');
上記のコマンドを実行すると、背景が赤、テキストが黄色、アンダーラインが引かれた
Hello
メッセージが生成されます。
DevTools でサポートされているカラーコードの一覧は次のとおりです。
前景 | 背景 | ライトモード | ダークモード |
---|---|---|---|
30 | 40 | #00000 |
#00000 |
31 | 41 | #AA0000 |
#ed4e4c |
32 | 42 | #00AA00 |
#01c800 |
33 | 43 | #AA5500 |
#d2c057 |
34 | 44 | #0000AA |
#2774f0 |
35 | 45 | #AA00AA |
#a142f4 |
36 | 46 | #00AAAA |
#12b5cb |
37 | 47 | #AAAAAA |
#cfd0d0 |
90 | 100 | #555555 |
#898989 |
91 | 101 | #FF5555 |
#f28b82 |
92 | 102 | #55FF55 |
#01c801 |
93 | 103 | #FFFF55 |
#ddfb55 |
94 | 104 | #5555FF |
#669df6 |
95 | 105 | #FF55FF |
#d670d6 |
96 | 106 | #55FFFF |
#84f0ff |
97 | 107 | #FFFFFF |
#FFFFFF |
DevTools でサポートされているスタイル設定コードのリストは次のとおりです。
パラメータ | 意味 |
---|---|
0 | すべての表示属性をリセットする |
1 | font-weight: bold |
2 | font-weight: lighter |
3 | font-style: italic |
4 | text-decoration プロパティに underline を追加 |
9 | text-decoration プロパティに line-through を追加 |
22 | font-weight プロパティをリセットする |
23 | font-style プロパティをリセットする |
24 | text-decoration プロパティから underline を削除 |
29 | text-decoration プロパティから line-through を削除 |
38;2;𝑅?;𝐺?;𝐵? | color: rgb(𝑅,𝐺,𝐵) |
39 | color property をリセット |
48;2;𝑅?;𝐺?;𝐵? | background: rgb(𝑅,𝐺,𝐵) |
49 | background property をリセット |
53 | text-decoration プロパティに overline を追加 |
55 | text-decoration プロパティから overline を削除 |
複数のスタイル設定を使用した、より複雑な例を次に示します。
次のコンソールコマンドを入力します。
const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld'; console.log(hello + space + world);
上記のコマンドを実行すると、3 つの異なるスタイルの
Hello World
メッセージが生成されます。