1. 打开控制台
- 快捷键:
- Windows/Linux:
F12
或Ctrl + Shift + J
(Chrome/Edge) - Mac:
Command + Option + J
(Chrome/Safari) - Firefox:
Ctrl + Shift + K
(Windows) /Command + Option + K
(Mac)
- 右键菜单:页面右键点击 → "检查" → 切换到 "Console" 标签页
2. 基础日志输出
方法 | 说明 | 示例 |
| 普通日志 |
|
| 信息提示 (显示蓝色图标) |
|
| 警告信息 (黄色警告图标) |
|
| 错误信息 (红色错误图标) |
|
| 调试信息 (需开启Verbose级别显示) |
|
3. 高级输出技巧
格式化输出
console.log('用户: %s, 年龄: %d', '张三', 25);
// 支持的占位符: %s (字符串), %d/%i (数字), %f (浮点数), %o/%O (对象), %c (CSS样式)
带样式的输出
console.log(
'%c重要消息!',
'color: red; font-size: 20px; background: yellow;'
);
表格输出
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
console.table(users);
4. 调试与分析
分组日志
console.group('用户模块');
console.log('获取用户列表');
console.log('验证权限');
console.groupEnd();
性能计时
console.time('API请求耗时');
fetch('/api/data').then(() => {
console.timeEnd('API请求耗时'); // 输出执行时间
});
堆栈追踪
function foo() { console.trace('调用堆栈'); }
function bar() { foo(); }
bar();
5. 高级调试功能
断言测试
console.assert(age > 18, '用户年龄未满18岁');
计数器
console.count('按钮点击'); // 每次调用计数+1
清空控制台
console.clear();
// 或快捷键: Ctrl + L (Windows/Mac)
6. 对象和DOM操作
查看DOM元素
const el = document.getElementById('app');
console.dir(el); // 以对象形式查看DOM属性
监控对象变化
const user = { name: 'Alice' };
console.log({ user }); // 推荐方式:显示可展开对象
7. 特殊技巧
保存日志
console.save = function(data, filename) {
const blob = new Blob([JSON.stringify(data)], {type: 'text/json'});
const a = document.createElement('a');
a.download = filename || 'console.json';
a.href = URL.createObjectURL(blob);
a.click();
};
console.save({key: 'value'}, 'mydata.json');
执行多行代码
在控制台输入 Shift + Enter
换行,输入完整代码后按 Enter
执行
8. 浏览器差异
功能 | Chrome | Firefox | Safari |
日志颜色 | 支持 | 支持 | 支持 |
| 完整支持 | 完整支持 | 基本支持 |
实时表达式 | 支持 | 不支持 | 不支持 |
| 专用API | 不支持 | 不支持 |
9. 最佳实践
- 生产环境移除日志:
if (process.env.NODE_ENV !== 'production') {
console.log('调试信息');
}
- 使用有意义的日志描述:
// 不好:
console.log(data);
// 好:
console.log('用户API响应:', data);
- 结构化输出复杂对象:
console.log('用户数据:', JSON.stringify(user, null, 2));
10. 现代浏览器新增功能
- 实时表达式 (Chrome):点击控制台"眼睛"图标,添加监控表达式
- 日志筛选:支持按日志类型、文本内容过滤
- 保存日志:右键日志 → "Save as" 可保存日志记录
通过掌握这些控制台技巧,你的调试效率将显著提升!