本文面向 0~3 年经验的前端同学，用最直白的语言 + 可复制的代码，一次性讲清所有常用 console 方法。读完即可在调试、性能、日志管理上“开挂”。

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

JavaScript 控制台（Console） 是浏览器内置的调试工具，用于在开发者工具控制台输出信息，辅助开发者调试代码、监控性能等。

一句话记住

控制台（Console） 就是浏览器给你开的一间“小黑屋”，你可以在里面敲任何 JavaScript 代码，立即看到结果，还能调试错误。

二、为什么要认识控制台（Console）？

• 零门槛试验场：初学变量、循环、函数？在 Console 里敲一行回车一行，立刻看到结果，不怕把页面弄崩。
• 调试神器：代码报错却找不到原因？Console 会告诉你哪一行、什么错。
• 面试必问：几乎所有前端面试都会问：“你怎么调试？”答案里一定有 Console。

三、如何打开控制台

四、控制台常用代码

（把下面代码直接复制到控制台回车，就能看到效果）

新手日常开发必会的 Console 代码

表格神器：console.table

把数组/对象直接转成表格，秒杀手写日志！

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

计数器：console.count

统计函数被调用次数，定位重复触发。

function clickBtn() {
  console.count('按钮点击');
}

分组折叠：console.group / groupCollapsed

让日志有“文件夹”，一眼看出层级。

console.group('登录流程');
console.log('1. 验证邮箱');
console.log('2. 查询用户');
console.groupEnd();  // 自动闭合

堆栈追踪：console.trace

追踪“谁调用了我”，快速定位调用链。

function foo() {
  bar();
}
function bar() {
  console.trace('追踪来源');
}
foo();

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

• %s 字符串
• %d 数字
• %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('页面加载');
});

需在 开发者工具（DevTools） → 性能（Performance） 面板查看。

一键清空：console.clear

调试时日志太多？一键清空，清爽继续。

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

五、控制台实战调试技巧（收藏级）

六、完整速查表（复制即用）

// 1. 基础打印
console.log('普通日志');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');


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


// 3. 计时
console.time('计时器');
// 代码块
console.timeEnd('计时器');


// 4. 计数
console.count('点击');


// 5. 分组
console.group('组名');
console.log('子项');
console.groupEnd();


// 6. 追踪
console.trace('调用链');


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


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

七、彩蛋：浏览器彩蛋指令

在控制台输入以下指令，解锁隐藏彩蛋：

彩色输出

// 彩色输出
console.log('%c编程狮欢迎你', 'color:#fff;background:#ff6b00;padding:4px 8px;border-radius:4px');

动态彩虹字

// 带动画效果的彩虹字控制台输出函数
function rainbowLog(text, speed = 100) {
    // 彩虹色的HSL颜色值数组
    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;

    
    // 动画渲染函数
    function render() {
        let output = '';
        const styles = [];

        
        for (let i = 0; i < text.length; i++) {
            // 计算当前字符的颜色索引，加入相位偏移产生动画效果
            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);

        
        // 更新相位，循环动画
        phase = (phase + 1) % colorCount;
    }

    
    // 初始渲染
    render();

    
    // 设置定时器，创建动画效果
    const interval = setInterval(render, speed);

    
    // 返回清除动画的函数，方便手动停止
    return () => clearInterval(interval);
}


// 使用示例：
// const stop = rainbowLog("编程狮动态彩虹文字效果！");
// 想要停止动画时调用：stop();

八、常见问题

Q1：console 里写的代码会保存吗？

不会！刷新页面或关闭浏览器就清空。想长久保存请写进 .js 文件或用编程狮在线项目保存。

Q2：console 能操作当前网页吗？

可以！试试在 console 输入：

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

整页背景立即变天蓝色，再输入 document.body.style.backgroundColor = '' 即可恢复。

Q3：如何清空满屏信息？

• 点击左上角 图标
• 快捷键 Ctrl+L（Mac Cmd+K）

课程推荐

• 《JavaScript 基础实战》
• 《初级脚本算法》
• 《JavaScript零基础入门到进阶》

小结

控制台（Console） 是浏览器自带的“小黑屋”，零配置、零安装。 牢记 6 句咒语：log / warn / error / time / table / assert。 任何 JS 代码都能在 console 里立即运行，刷新即清空，大胆试！

关注编程狮学习更多前端开发技巧！