在谷歌浏览器（Google Chrome）中查看控制台日志有以下几种常用方法

快捷键（最快捷）

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

右键菜单

1. 在网页任意位置右键点击
2. 选择 检查 或 检查元素
3. 在打开的开发者工具中点击 Console 选项卡

菜单栏

1. 点击浏览器右上角 三个点（菜单按钮）
2. 选择 更多工具 → 开发者工具
3. 点击 Console 选项卡

控制台主要功能区域：

日志显示区

• 显示 console.log()、console.error() 等输出
• 显示 JavaScript 错误和警告
• 显示网络请求错误

过滤器

• All：显示所有日志
• Errors：仅显示错误
• Warnings：仅显示警告
• Info：仅显示信息
• Logs：仅显示普通日志

命令输入区

• 底部输入行可直接执行 JavaScript 代码
• 按 Enter 执行，Shift + Enter 换行

实用功能：

清除控制台

• 点击 🚫 按钮或按 Ctrl + L（Mac：Cmd + K）

保留日志

• 勾选 Preserve log 可在页面刷新后保留日志

日志分组

// 在代码中使用
console.group('分组名称');
console.log('内容1');
console.log('内容2');
console.groupEnd();

常用 console 方法

console.log('普通信息')     // 黑色
console.info('提示信息')    // 蓝色
console.warn('警告信息')    // 黄色
console.error('错误信息')   // 红色
console.table(数组/对象)    // 表格形式显示

查看网络请求日志

• 切换到 Network 选项卡
• 刷新页面查看所有请求
• 点击请求可查看详细信息和响应

小技巧：

• 在控制台直接输入 document 或 window 可查看 DOM 和全局对象
• 使用 $0 引用当前选中的元素
• 点击日志中的文件名可跳转到 Sources 面板的对应代码位置

这些方法可以帮助你在开发过程中有效调试和查看网页的运行状态。