前端除錯新境界:用 CSS 為 console.log 加上顏色與樣式

作者: Calpa Liu
字數:1165
出版:2025 年 4 月 9 日
使用 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被替換為數字。

張三今年 29 歲。

結論

使用彩色的 console.log 可以顯著提升開發體驗和除錯效率。透過%c格式說明符和 CSS 樣式,開發者可以創建各種視覺效果,從簡單的顏色變化到複雜的排版設計。這不僅使控制台輸出更易於閱讀,還能幫助開發者更快速地識別和分類不同類型的信息。

在實際開發中,您可以根據項目需求和個人偏好,建立一套統一的日誌樣式系統,使調試過程更加高效和愉快。無論是單一的顏色標記,還是複雜的樣式組合,彩色 console.log 都是提升開發體驗的實用工具。

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。