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