本文面向 0~3 年經(jīng)驗的前端同學(xué)，用最直白的語言 + 可復(fù)制的代碼，一次性講清所有常用 console 方法。讀完即可在調(diào)試、性能、日志管理上“開掛”。

一、JavaScript 控制臺（Console） 是什么？

JavaScript 控制臺（Console） 是瀏覽器內(nèi)置的調(diào)試工具，用于在開發(fā)者工具控制臺輸出信息，輔助開發(fā)者調(diào)試代碼、監(jiān)控性能等。

??一句話記住

控制臺（Console） 就是瀏覽器給你開的一間“小黑屋”，你可以在里面敲任何 JavaScript 代碼，立即看到結(jié)果，還能調(diào)試錯誤。

二、為什么要認識控制臺（Console）？

• 零門檻試驗場：初學(xué)變量、循環(huán)、函數(shù)？在 Console 里敲一行回車一行，立刻看到結(jié)果，不怕把頁面弄崩。
• 調(diào)試神器：代碼報錯卻找不到原因？Console 會告訴你哪一行、什么錯。
• 面試必問：幾乎所有前端面試都會問：“你怎么調(diào)試？”答案里一定有 Console。

三、如何打開控制臺

四、控制臺常用代碼

（把下面代碼直接復(fù)制到控制臺回車，就能看到效果）

新手日常開發(fā)必會的 Console 代碼

表格神器：console.table

把數(shù)組/對象直接轉(zhuǎn)成表格，秒殺手寫日志！

const users = [
  { name: '小明', age: 18, city: '北京' },
  { name: '小紅', age: 22, city: '上海' }
];
console.table(users);

瀏覽器效果：

性能計時：console.time / timeEnd

測一段代碼耗時，比手動 Date.now() 更精準。

console.time('渲染耗時');
// 這里放你的代碼
for (let i = 0; i < 1e6; i++) { /* ... */ }
console.timeEnd('渲染耗時');  // 渲染耗時: 42.3ms

計數(shù)器：console.count

統(tǒng)計函數(shù)被調(diào)用次數(shù)，定位重復(fù)觸發(fā)。

function clickBtn() {
  console.count('按鈕點擊');
}

分組折疊：console.group / groupCollapsed

讓日志有“文件夾”，一眼看出層級。

console.group('登錄流程');
console.log('1. 驗證郵箱');
console.log('2. 查詢用戶');
console.groupEnd();  // 自動閉合

堆棧追蹤：console.trace

追蹤“誰調(diào)用了我”，快速定位調(diào)用鏈。

function foo() {
  bar();
}
function bar() {
  console.trace('追蹤來源');
}
foo();

占位符格式化：%s %d %o

• %s 字符串
• %d 數(shù)字
• %o 對象

const user = { name: '張三', age: 25 };
console.log('用戶 %s 年齡 %d 詳情 %o', user.name, user.age, user);

性能面板：console.profile / profileEnd

生成火焰圖，比 console.time 更細粒度。

console.profile('頁面加載');
window.addEventListener('load', () => {
  console.profileEnd('頁面加載');
});

需在 開發(fā)者工具（DevTools） → 性能（Performance） 面板查看。

一鍵清空：console.clear

調(diào)試時日志太多？一鍵清空，清爽繼續(xù)。

console.clear(); // 清空控制臺

五、控制臺實戰(zhàn)調(diào)試技巧（收藏級）

六、完整速查表（復(fù)制即用）

// 1. 基礎(chǔ)打印
console.log('普通日志');
console.info('提示信息');
console.warn('警告信息');
console.error('錯誤信息');


// 2. 表格
console.table([{a:1},{a:2}]);


// 3. 計時
console.time('計時器');
// 代碼塊
console.timeEnd('計時器');


// 4. 計數(shù)
console.count('點擊');


// 5. 分組
console.group('組名');
console.log('子項');
console.groupEnd();


// 6. 追蹤
console.trace('調(diào)用鏈');


// 7. 格式化
console.log('用戶 %s 年齡 %d', '小明', 18);


// 8. 清空
console.clear();

七、彩蛋：瀏覽器彩蛋指令

在控制臺輸入以下指令，解鎖隱藏彩蛋：

彩色輸出

// 彩色輸出
console.log('%c編程獅歡迎你', 'color:#fff;background:#ff6b00;padding:4px 8px;border-radius:4px');

動態(tài)彩虹字

// 帶動畫效果的彩虹字控制臺輸出函數(shù)
function rainbowLog(text, speed = 100) {
    // 彩虹色的HSL顏色值數(shù)組
    const colors = [
        'hsl(0, 100%, 50%)',    // 紅色
        'hsl(30, 100%, 50%)',   // 橙色
        'hsl(60, 100%, 50%)',   // 黃色
        'hsl(120, 100%, 50%)',  // 綠色
        'hsl(240, 100%, 50%)',  // 藍色
        'hsl(270, 100%, 50%)',  // 靛藍色
        'hsl(300, 100%, 50%)'   // 紫色
    ];

    
    let phase = 0;
    const colorCount = colors.length;

    
    // 動畫渲染函數(shù)
    function render() {
        let output = '';
        const styles = [];

        
        for (let i = 0; i < text.length; i++) {
            // 計算當前字符的顏色索引，加入相位偏移產(chǎn)生動畫效果
            const colorIndex = (i + phase) % colorCount;
            output += `%c${text[i]}`;
            styles.push(`color: ${colors[colorIndex]}; font-weight: bold; font-size: 16px;`);
        }

        
        // 清空控制臺并輸出當前幀
        console.clear();
        console.log(output, ...styles);

        
        // 更新相位，循環(huán)動畫
        phase = (phase + 1) % colorCount;
    }

    
    // 初始渲染
    render();

    
    // 設(shè)置定時器，創(chuàng)建動畫效果
    const interval = setInterval(render, speed);

    
    // 返回清除動畫的函數(shù)，方便手動停止
    return () => clearInterval(interval);
}


// 使用示例：
// const stop = rainbowLog("編程獅動態(tài)彩虹文字效果！");
// 想要停止動畫時調(diào)用：stop();

八、常見問題

Q1：console 里寫的代碼會保存嗎？

不會！刷新頁面或關(guān)閉瀏覽器就清空。想長久保存請寫進 .js 文件或用編程獅在線項目保存。

Q2：console 能操作當前網(wǎng)頁嗎？

可以！試試在 console 輸入：

document.body.style.backgroundColor = 'lightblue';

整頁背景立即變天藍色，再輸入 document.body.style.backgroundColor = '' 即可恢復(fù)。

Q3：如何清空滿屏信息？

• 點擊左上角 ??? 圖標
• 快捷鍵 Ctrl+L（Mac Cmd+K）

課程推薦

• 《JavaScript 基礎(chǔ)實戰(zhàn)》
• 《初級腳本算法》
• 《JavaScript零基礎(chǔ)入門到進階》

小結(jié)

控制臺（Console） 是瀏覽器自帶的“小黑屋”，零配置、零安裝。 牢記 6 句咒語：log / warn / error / time / table / assert。 任何 JS 代碼都能在 console 里立即運行，刷新即清空，大膽試！

關(guān)注編程獅學(xué)習(xí)更多前端開發(fā)技巧！