0
点赞
收藏
分享

微信扫一扫

浏览器控制台(Console)

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. 基础日志输出

方法

说明

示例

console.log()

普通日志

console.log('Hello')

console.info()

信息提示 (显示蓝色图标)

console.info('加载完成')

console.warn()

警告信息 (黄色警告图标)

console.warn('内存不足')

console.error()

错误信息 (红色错误图标)

console.error('请求失败')

console.debug()

调试信息 (需开启Verbose级别显示)

console.debug('变量值:', x)

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

日志颜色

支持

支持

支持

console.table

完整支持

完整支持

基本支持

实时表达式

支持

不支持

不支持

console.memory

专用API

不支持

不支持

9. 最佳实践

  1. 生产环境移除日志

if (process.env.NODE_ENV !== 'production') {
  console.log('调试信息');
}

  1. 使用有意义的日志描述

// 不好:
console.log(data);
// 好:
console.log('用户API响应:', data);

  1. 结构化输出复杂对象

console.log('用户数据:', JSON.stringify(user, null, 2));

10. 现代浏览器新增功能

  • 实时表达式 (Chrome):点击控制台"眼睛"图标,添加监控表达式
  • 日志筛选:支持按日志类型、文本内容过滤
  • 保存日志:右键日志 → "Save as" 可保存日志记录

通过掌握这些控制台技巧,你的调试效率将显著提升!

举报

相关推荐

0 条评论