小狮博客本文面向 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（MacCmd+K）
课程推荐
小结
控制台（Console） 是浏览器自带的“小黑屋”，零配置、零安装。 牢记 6 句咒语：log / warn / error / time / table / assert。 任何 JS 代码都能在 console 里立即运行，刷新即清空，大胆试！
关注编程狮学习更多前端开发技巧！
