本指南將說明如何在 Chrome 開發人員工具控制台中設定訊息的格式和樣式。請參閱「開始使用 Logging 訊息」一文,瞭解如何將訊息記錄到主控台。
本指南假設您已瞭解網頁開發的基礎知識,例如如何使用 JavaScript 增加網頁的互動功能。
設定控制台訊息格式
您可以使用格式指定碼設定主控台訊息的格式。
格式指定碼是以百分比字元 (%) 開頭,並以「類型字元」結尾,指出資料類型 (整數、浮點等)。
舉例來說:
- 開啟控制台
- 輸入下列主控台指令。
js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
- 上述指令會產生
Chrome DevTools is awesome.
訊息。
以下是目前 Chrome 開發人員工具支援的格式規範清單。
指定碼 | 輸出內容 |
---|---|
%s |
將值設為字串格式 |
%i 或 %d |
將值的格式設為整數 |
%f |
將值的格式設為浮點值 |
%o |
將值的格式設為可展開的 DOM 元素 |
%O |
將值的格式設為可展開的 JavaScript 物件 |
%c |
將 CSS 樣式規則套用至第二個參數指定的輸出字串 |
套用多個格式指定碼
您可以在訊息中使用多個格式指定碼。
- 輸入下列主控台指令。
js 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.
訊息。
瞭解類型轉換
輸出訊息會根據格式指定碼轉換。
- 輸入下列主控台指令。
js console.log('I have %i apples and %d oranges.', 2, 3.5);
- 上述指令會產生
I have 2 apples and 3 oranges.
訊息。 - 輸出結果為
3 oranges
,而非記錄3.5 oranges
。%d
表示該值應/將會轉換為整數。
以下舉例說明類型轉換類型無效時會發生什麼情況。
- 輸入下列主控台指令。
js console.log('Jane has %i kiwis.', 'two');
- 上述指令會產生
Jane has NaN kiwis.
訊息。 %i
表示應/將會轉換為整數,但引數是字串。因此,它會傳回 NaN (Not-A-Number)。
設定控制台訊息樣式
在開發人員工具中設定控制台訊息樣式的方法有兩種。
使用格式指定碼的樣式
您可以使用 %c
格式指定碼,透過 CSS 設定主控台訊息的樣式。
- 輸入下列主控台指令。
js 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 (選取圖形顯示) 參數的有效子序列。𝘗1
到𝘗n
的任何一個參數都可以省略,在此情況下,系統會假設其值是零。\x1B[m
是\x1B[0m
的簡寫,會在此內重設顯示屬性。
比如
- 輸入下列主控台指令。
js console.log('\x1B[41;93;4mHello\x1B[m');
- 上述指令會產生具有紅色背景、黃色文字和底線的
Hello
訊息。
以下是開發人員工具支援的顏色代碼清單。
前景 | 背景 | 淺色主題 | 深色主題 |
---|---|---|---|
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 |
以下是開發人員工具支援的樣式程式碼清單。
參數 | 意義 |
---|---|
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;R;G;B | color: rgb(𝑅,𝐺,𝐵) |
39 | 重設「color property 」 |
48;2;R;G;B | background: rgb(𝑅,𝐺,𝐵) |
49 | 重設「background property 」 |
53 | 為 text-decoration 資源新增 overline |
55 | 從 text-decoration 資源中移除「overline 」 |
以下是另一個較複雜的範例,其中包含多種樣式。
輸入下列指令,```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';
console.log(hello + 空格 + 世界); ```
上述指令會產生具有 3 種不同樣式的
Hello World
訊息。