為什麼需要彩色 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 都是提升開發體驗的實用工具。
相關文章
輕鬆整合 Web3：用 Privy 快速實作錢包登入與交易功能
Privy 提供一套簡單強大的 SDK，協助開發者在幾分鐘內實作錢包登入、訊息簽名與交易功能，支援多鏈、多裝置與自託管安全架構。無論你在打造 DeFi Dashboard、NFT 平台還是 Web3 遊戲入口，Privy 都能讓你快速整合區塊鏈功能，專注產品體驗。
書同文、API 同規格！Vercel AI SDK 帶你統一多模型開發流程
Vercel AI SDK 是專為開發者打造的 TypeScript 工具包，支援 React、Next.js、Vue、Svelte、Node.js 等主流框架，協助快速構建 AI 驅動應用。本文將深入剖析其統一 API、靈活架構、效能優化及多平台支援等核心亮點。
AI 寫的程式總是出錯？我用 TypeScript + 函數式設計讓它聽得懂！
你有遇過 AI 產生的程式碼完全跑不起來嗎？我曾經寫了一段計數器邏輯，結果它怎麼都看不懂。直到我用 TypeScript + 函數式設計重構，才發現——問題不在 AI，而是我們寫得不夠清楚。
用 Cloudflare KV 與 Hono 強化 ShareThis：建構彈性分享統計系統
想讓 ShareThis 分享按鈕擁有更多彈性與控制權？本教學將教你如何用 Cloudflare Workers 的 KV 資料庫與 Hono 框架，打造一個可擴充的後端 API。不只能保留原有分享數據，更支援快取、資料追蹤與訪問統計，幫助你打造真正可維護的分享統計系統。
測試速度飆升 10 倍！Vitest 帶來現代前端最強測試體驗
測試不該拖慢開發流程，而 Vitest 正是讓你「寫測試像開發一樣快」的關鍵武器。還在用 Jest 等太久？Vitest 結合 Vite 高速構建與即時測試回饋，支援 TypeScript、Vue、React 等框架，全面升級你的測試流程！
用 Firecrawl 自動爬取網站，打造最乾淨的 GPT 訓練資料
還在手動整理網頁內容給 ChatGPT？Firecrawl 幫你自動爬取網站、轉成乾淨的 Markdown 或 JSON，讓你快速建立知識庫、訓練 LLM，省時又高效。
