在谷歌浏览器（Google Chrome）中查看控制台日志（Console）是网页调试和开发的基础操作。以下是详细的步骤和方法

快捷键（最快）

• Windows/Linux：按 F12 或 Ctrl + Shift + I
• Mac：按 Cmd + Option + I 直接打开开发者工具，默认显示 Console 选项卡。

通过浏览器菜单

1. 点击 Chrome 右上角的 （三个点）→ 选择 更多工具 → 开发者工具。
2. 在打开的开发者工具中，点击 Console 选项卡。

右键检查

1. 在网页任意位置 右键点击 → 选择 检查。
2. 在弹出窗口中找到 Console 选项卡。

控制台的核心功能

1. 查看日志：
   • 网页中的 console.log()、错误、警告信息会在此显示。
   • 日志按级别分类（Verbose、Info、Warnings、Errors）。
2. 筛选日志：
   • 点击顶部筛选按钮（如 All levels、Errors、Warnings 等）可过滤信息。
   • 输入关键词可搜索特定日志。
3. 执行代码：
   • 在底部的 > 符号后输入 JavaScript 代码，按 Enter 直接运行。
4. 清除日志：
   • 点击控制台左上角的 按钮，或按 Ctrl + L（Mac：Cmd + K）。

高级技巧

• 保持日志：勾选 Preserve log 可在页面刷新后保留日志。
• 模拟移动端：点击开发者工具左上角的手机/平板图标,可切换设备模拟。
• 查看网络请求：切换到 Network 选项卡，可监控请求/响应日志。

常见问题

• 控制台不显示？ 确保选中了 Console 选项卡，或尝试按 Esc 键切换显示/隐藏。
• 日志太多？ 使用 console.clear() 或点击清除按钮。

总结步骤

1. 打开开发者工具：F12 或右键检查。
2. 切换到 Console 选项卡。
3. 查看/调试日志,使用筛选或执行代码。

掌握控制台的使用能极大提升调试效率，建议多尝试其功能（如 console.table()、console.time() 等高级方法）。

标签： Google Chrome Console