本文面向 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<1e6;i++); console.timeEnd('循环耗时');
测性能，单位毫秒
表格展示
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: '北京' },
{ 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(); // 清空控制台
五、控制台实战调试技巧（收藏级）
场景
代码片段
条件断点
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 < 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 里立即运行，刷新即清空，大胆试！
关注编程狮学习更多前端开发技巧！