在控制台中設定訊息的格式和樣式

Jecelyn Yeen

本指南將說明如何在 Chrome 開發人員工具控制台中設定訊息的格式和樣式。如要瞭解如何在主控台中記錄訊息，請參閱「開始使用 Logging 訊息」一文。

本指南假設您瞭解網頁開發的基礎知識，例如如何使用 JavaScript 在網頁中加入互動元素。

設定控制台訊息格式

您可以使用格式指定碼來設定控制台訊息的格式。

格式指定碼的開頭是百分比字元 (%)，結尾則是「類型字元」。，表示資料類型 (整數、浮點數等)。

例如：

  1. 開啟控制台

  2. 輸入下列主控台指令。

    const tools = 'Chrome DevTools';
console.warn('%s is awesome.', tools);

  3. 上述指令會產生 Chrome DevTools is awesome. 訊息。 格式的字串值

如需 Chrome 開發人員工具目前支援的格式指定碼清單，請參閱這份清單。

指定碼 輸出
%s 將值的格式設定為字串
%i 或 %d 將值的格式設定為整數
%f 將值的格式設定為浮點值
%o 將值格式化為可展開的 DOM 元素
%O 將值的格式設定為可展開的 JavaScript 物件
%c 將 CSS 樣式規則套用至第二個參數指定的輸出字串

套用多個格式指定碼

您可以在訊息中使用多個格式指定碼。

  1. 輸入下列主控台指令。

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);

  2. 上述指令會產生 The total weight of 3 apples and 2 oranges is 432.4 grams. 訊息。 多重格式指定碼

瞭解類型轉換

系統會根據格式指定碼轉換輸出訊息。

  1. 輸入下列主控台指令。

    console.log('I have %i apples and %d oranges.', 2, 3.5);

  2. 上述指令會產生 I have 2 apples and 3 oranges. 訊息。 整數值的格式

  3. 輸出結果是 3 oranges，而不是 3.5 oranges。%d 表示應/會轉換為整數。

以下舉例說明如果類型轉換類型無效，會發生什麼情況。

  1. 輸入下列主控台指令。

    console.log('Jane has %i kiwis.', 'two');

  2. 上述指令會產生 Jane has NaN kiwis. 訊息。 控制台訊息中的 NaN

  3. %i 表示值應/會轉換為整數，但引數是字串。因此會傳回 NaN (Not-A-Number)。

設定控制台訊息的樣式

開發人員工具中有兩種方式可以設定控制台訊息的樣式。

使用格式指定碼的樣式

您可以使用 %c 格式指定碼，使用 CSS 設定主控台訊息的樣式。

  1. 輸入下列主控台指令。

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
console.log("%cHooray", style);

  2. 上述指令會產生套用 CSS 樣式的 Hooray。 使用 CSS 輸出樣式

，瞭解如何調查及移除這項存取權。

採用 ANSI 逸出序列的樣式

您可以使用 ANSI 逸出序列為控制台訊息設定樣式。

Node.js 開發人員常會透過 ANSI 逸出序列為記錄訊息著色，通常需要藉助 chalk、colors、ansi-colors、kleur 等樣式程式庫的協助。

不過，您可以使用 ANSI 逸出序列設定訊息樣式，而不使用任何程式庫。語法如下：

\x1B[𝘗1;…;𝘗nm

其中

  • 𝘗1 至 𝘗n 是 SGR (選取圖形顯示) 參數的有效子序列。
  • 您可以省略 𝘗1 到 𝘗n 的任何參數，在此情況下，系統會假設參數值為零。
  • \x1B[m 是 \x1B[0m 的簡寫，顯示屬性將會重設。

例如：

  1. 輸入下列主控台指令。

    console.log('\x1B[41;93;4mHello\x1B[m');

  2. 上述指令會產生含有紅色背景、黃色文字及底線的 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 將 underline 新增至 text-decoration 資源
9 將 line-through 新增至 text-decoration 資源
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 將 overline 新增至 text-decoration 資源
55 從 text-decoration 資源中移除 overline

以下是另一個更複雜的範例，其中包含多種樣式。

  1. 輸入下列主控台指令。

    const hello = '\x1B[41;93;4mHello';
const space = '\x1B[m ';
const world = '\x1B[34;102;9mWorld';

console.log(hello + space + world);

  2. 上述指令會產生含有 3 種不同樣式的 Hello World 訊息。 Hello World