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

一、JavaScript 控制臺(tái)（Console） 是什么？

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

??一句話記住

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

二、為什么要認(rèn)識(shí)控制臺(tái)（Console）？

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

三、如何打開控制臺(tái)

四、控制臺(tái)常用代碼

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

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

表格神器：console.table

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

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

瀏覽器效果：

性能計(jì)時(shí)：console.time / timeEnd

測(cè)一段代碼耗時(shí)，比手動(dòng) Date.now() 更精準(zhǔn)。

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

計(jì)數(shù)器：console.count

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

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

分組折疊：console.group / groupCollapsed

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

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

堆棧追蹤：console.trace

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

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

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

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

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

性能面板：console.profile / profileEnd

生成火焰圖，比 console.time 更細(xì)粒度。

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

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

一鍵清空：console.clear

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

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

五、控制臺(tái)實(shí)戰(zhàn)調(diào)試技巧（收藏級(jí)）

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

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


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


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


// 4. 計(jì)數(shù)
console.count('點(diǎn)擊');


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


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


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


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

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

在控制臺(tái)輸入以下指令，解鎖隱藏彩蛋：

彩色輸出

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

動(dòng)態(tài)彩虹字

// 帶動(dòng)畫效果的彩虹字控制臺(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%)',  // 藍(lán)色
        'hsl(270, 100%, 50%)',  // 靛藍(lán)色
        'hsl(300, 100%, 50%)'   // 紫色
    ];

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

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

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

        
        // 清空控制臺(tái)并輸出當(dāng)前幀
        console.clear();
        console.log(output, ...styles);

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

    
    // 初始渲染
    render();

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

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


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

八、常見問題

Q1：console 里寫的代碼會(huì)保存嗎？

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

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

可以！試試在 console 輸入：

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

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

Q3：如何清空滿屏信息？

• 點(diǎn)擊左上角 ??? 圖標(biāo)
• 快捷鍵 Ctrl+L（Mac Cmd+K）

課程推薦

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

小結(jié)

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

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