使用 CSS 為 console.log 加上顏色與樣式，讓前端除錯變得更直觀有效。本文介紹如何利用 %c 格式說明符，在 Google Chrome 開發者工具中實現彩色輸出，並提供多種實用範例與應用技巧。
為什麼需要彩色 console.log
在開發過程中，開發者經常需要輸出各種信息到控制台進行調試。使用彩色輸出有以下優勢：
- 更容易區分不同類型的信息（錯誤、警告、一般日誌等）
- 突出顯示重要數據
- 提升代碼調試和閱讀體驗
- 在複雜應用中更快速定位關鍵信息
默認的黑白控制台輸出在信息量大的情況下很難快速找到需要的內容，而彩色輸出能夠解決這個問題。
基本格式說明符
在 Chrome 的控制台中使用顏色，主要依靠格式說明符（Format Specifiers）。格式說明符以%符號開始，後跟一個字母表示要應用的格式類型。
最常用的格式說明符包括：
| 說明符 | 輸出類型 |
|---|---|
| %s | 格式化為字符串 |
| %i 或 %d | 格式化為整數 |
| %f | 格式化為浮點數 |
| %o | 格式化為可展開的 DOM 元素 |
| %O | 格式化為可展開的 JavaScript 對象 |
| %c | 應用 CSS 樣式規則到輸出字符串 |
其中，%c格式說明符是用於應用 CSS 樣式的關鍵。
使用%c 添加顏色
基本語法
要為 console.log 添加顏色，需要使用%c格式說明符，基本語法如下：
console.log("%c要顯示的文字", "CSS 樣式");第一個參數中的%c表示將應用 CSS 樣式，第二個參數包含要應用的 CSS 樣式規則。
單一顏色示例
以下是一個基本的彩色輸出示例：
console.log("%c這是綠色文字", "color: green;");這段代碼會在控制台中輸出綠色的文字。
更豐富的示例：
console.log(
"%c這是有樣式的文本",
"color: #007acc; font-size: 16px; font-weight: bold;"
);這將輸出藍色、加粗、字體大小為 16px 的文本。
多種顏色和樣式組合
多個樣式區域
您可以在同一個 console.log 中使用多個%c格式說明符來創建不同的樣式區域：
console.log("%c前半部分 %c後半部分", "color: yellow;", "color: pink;");這將使 前半部分 顯示為黃色，後半部分 顯示為粉色。
前半部分 後半部分
創建標題和強調文本
console.log(
"%c重要通知",
"color: white; background-color: #D33F49; padding: 2px 6px; border-radius: 2px; font-weight: bold;"
);這將創建一個紅色背景的白色文字，看起來像一個醒目的標題。
重要通知
實用範例
1. 錯誤、警告和普通日誌區分
console.log("%c成功 ", "color: green; font-weight: bold;");
console.log("%c警告 ", "color: orange; font-weight: bold;");
console.log("%c錯誤 ", "color: red; font-weight: bold;");這種方式可以明確區分不同類型的日誌信息。
2. 調試對象時使用彩色標籤
const user = { name: "張三", age: 28, email: "zhangsan@example.com" };
console.log(
"%c用戶數據 ",
"background: #26bfa5; color: white; padding: 2px 4px;",
user
);這將在對象前顯示一個綠色背景的標籤，使日誌中的對象更易識別。
用戶數據 { name: “張三”, age: 28, email: “zhangsan@example.com” }
3. 創建彩虹文字效果
console.log(
"%c彩虹文字效果",
"font-weight: bold; font-size: 20px; color: red; text-shadow: 3px 3px 0 rgb(217,31,38), 6px 6px 0 rgb(226,91,14), 9px 9px 0 rgb(245,221,8), 12px 12px 0 rgb(5,148,68), 15px 15px 0 rgb(2,135,206);"
);這段代碼將創建一個帶有彩虹陰影效果的文字。
4. 創建分組標題
console.log(
"%c===== 用戶活動日誌 =====",
"background: #007acc; color: white; padding: 5px 10px; width: 100%; font-size: 16px;"
);這將創建一個突出的藍色標題，用於分隔不同的日誌組。
===== 用戶活動日誌 =====
使用其他格式說明符
除了%c之外，其他格式說明符也很有用：
const name = "張三";
const age = 29;
console.log("%s今年%d歲。", name, age);這將輸出：張三今年 29 歲。，%s被替換為字符串，%d被替換為數字。
結論
使用彩色的 console.log 可以顯著提升開發體驗和除錯效率。透過%c格式說明符和 CSS 樣式，開發者可以創建各種視覺效果，從簡單的顏色變化到複雜的排版設計。這不僅使控制台輸出更易於閱讀，還能幫助開發者更快速地識別和分類不同類型的信息。
在實際開發中，您可以根據項目需求和個人偏好，建立一套統一的日誌樣式系統，使調試過程更加高效和愉快。無論是單一的顏色標記，還是複雜的樣式組合，彩色 console.log 都是提升開發體驗的實用工具。
