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

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

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

💡一句话记住

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

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

零门槛试验场：初学变量、循环、函数？在 Console 里敲一行回车一行，立刻看到结果，不怕把页面弄崩。

调试神器：代码报错却找不到原因？Console 会告诉你哪一行、什么错。

面试必问：几乎所有前端面试都会问：“你怎么调试？”答案里一定有 Console。

三、如何打开控制台

方式操作快捷键F12 或 Ctrl+Shift+I（Mac 用 Cmd+Opt+I）右键菜单在网页空白处 → 检查 → 切换到控制台（Console） 面板多面板切换打开后顶部有 元素（Elements）、网络（Network）、控制台（Console） 等，点 控制台（Console） 即可

四、控制台常用代码

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

目的写法中文解释打印普通信息console.log('你好，编程狮！');最常用的“打招呼”警告黄条console.warn('电量低，请充电');不会阻断程序，只是提醒错误红条console.error('出错了，快看代码');方便一眼定位问题计时console.time('循环耗时'); for(let i=0;i测性能，单位毫秒表格展示console.table([{name:'张三',age:18},{name:'李四',age:20}]);把数组/对象变表格，超直观断言检查console.assert(1===2,'1 不等于 2');条件为假才报错，写测试很方便

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

方法作用中文示例log普通打印console.log('你好，编程狮');info蓝色提示console.info('版本 v1.2.3');warn黄色警告console.warn('⚠️ 不支持的浏览器');error红色错误console.error('🛑 网络请求失败');clear清空面板console.clear;

表格神器：console.table

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

const users = [

{ name: '小明', age: 18, city: '北京' },

];console.table(users);

浏览器效果：

性能计时：console.time / timeEnd

测一段代码耗时，比手动 Date.now 更精准。

console.time('渲染耗时');// 这里放你的代码for (let i = 0; i

计数器：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; // 清空控制台

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

场景代码片段条件断点console.assert(score > 0, '分数必须大于0');异步顺序console.timeLog('任务A');内存泄漏console.memory（显示堆使用情况）CSS 计数console.log('%c 红色文字', 'color:red');

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

// 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

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 里立即运行，刷新即清空，大胆试！

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