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

耶塞林 (Jecelyn Yeen)
Jecelyn Yeen
Twitter GitHub 首頁

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

本指南假設您已瞭解網頁開發的基礎知識，例如如何使用 JavaScript 增加網頁的互動功能。

設定控制台訊息格式

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

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

舉例來說：

  1. 開啟控制台
  2. 輸入下列主控台指令。 js 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. 輸入下列主控台指令。 js 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. 輸入下列主控台指令。 js 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. 輸入下列主控台指令。 js console.log('Jane has %i kiwis.', 'two');
  2. 上述指令會產生 Jane has NaN kiwis. 訊息。 主控台訊息中的 NaN
  3. %i 表示應/將會轉換為整數，但引數是字串。因此，它會傳回 NaN (Not-A-Number)。

設定控制台訊息樣式

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

使用格式指定碼的樣式

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

  1. 輸入下列主控台指令。 js 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. 輸入下列主控台指令。 js 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 為 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」

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

  1. 輸入下列指令，```js const hello = '\x1B[41;93;4mHello'; const space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(hello + 空格 + 世界); ```

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