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

本指南將說明如何在 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 逸出序列為記錄訊息著色,通常需要藉助 chalkcolorsansi-colorskleur 等樣式程式庫的協助。

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

\x1B[𝘗1;…;𝘗nm

其中

  • 𝘗1𝘗nSGR (選取圖形顯示) 參數的有效子序列。
  • 您可以省略 𝘗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