在谷歌浏览器（Google Chrome）中查看控制台日志是前端开发和调试的常用操作。以下是几种打开控制台并查看日志的方法

快捷键（最快捷）

• Windows/Linux：按 F12 或 Ctrl + Shift + J。
• Mac：按 Cmd + Option + J。

通过浏览器菜单

1. 点击浏览器右上角的 ⋮（自定义及控制） 按钮。
2. 选择 更多工具 → 开发者工具。
3. 在打开的开发者工具窗口中,点击 Console 标签页。

右键菜单

1. 在网页任意位置右键点击。
2. 选择 检查。
3. 在开发者工具中切换到 Console 标签页。

控制台日志的类型

在 Console 标签页中，你会看到以下信息：

• 普通日志：console.log()
• 警告：黄色图标，console.warn()
• 错误：红色图标，console.error()
• 信息：蓝色图标，console.info()

常用操作

1. 清空日志：点击控制台左上角的 按钮，或输入 clear() 命令。
2. 过滤日志：点击顶部 All levels 下拉菜单，可按类型筛选。
3. 搜索日志：使用控制台上方的搜索框。
4. 保持日志：勾选 Preserve log 可在页面刷新后保留日志。

小技巧

• 在代码中输出日志：

  console.log("调试信息", variable);
  console.table(data); // 以表格形式显示数组/对象

• 查看网络请求：切换到 Network 标签页监控网络活动。
• 移动端模拟：点击开发者工具左上角 设备图标，可模拟手机视图。

注意事项

• 控制台中的错误可能影响页面功能,需及时处理。
• 生产环境中应移除不必要的 console 语句。

掌握控制台使用能极大提升调试效率！如果遇到复杂问题，还可以结合 Sources 标签页进行断点调试。