必须准确打开并使用 chrome 浏览器的 console 面板来实时观察 javascript 执行过程、错误提示或自定义日志输出，操作包括：一、通过 f12/右键检查/菜单路径打开开发者工具并切换至 console；二、依据颜色与图标区分 log/warn/error/info/debug 日志；三、用类型筛选、关键词搜索和行号跳转定位日志；四、在 console 中执行 js 表达式、多行代码及使用快捷变量；五、android 通过 chrome://inspect 远程调试，ios 可注入 vconsole 查看日志。
如果您在调试网页时需要实时观察 JavaScript 执行过程、错误提示或自定义日志输出，则必须准确打开并使用 Chrome 浏览器的 Console 面板。以下是查看 Console 日志的具体操作路径与交互方式：
一、打开 Chrome 开发者工具并进入 Console 面板
Console 面板是开发者工具中用于显示脚本运行状态、错误堆栈及执行 JS 命令的核心区域，其启动方式多样且兼容不同操作习惯。
1、在任意已加载的网页界面中，直接按下 F12 键（Windows/Linux）或 Command + Option + I（macOS）。
2、右键点击页面任意空白处，从上下文菜单中选择 “检查” 选项。
3、通过浏览器右上角三点菜单 → “更多工具” → “开发者工具”。
4、打开开发者工具后，点击顶部标签栏中的 Console 选项卡，确保当前处于控制台界面。
二、识别并区分不同类型的日志信息
Console 中按输出级别自动着色与图标标记，便于快速判断信息性质，无需人工解析文本语义。
1、console.log() 输出普通调试信息，文字为黑色，无图标。
2、console.warn() 输出警告，左侧带黄色感叹号图标，文字为琥珀色。
3、console.error() 输出运行时错误，左侧带红色叉号图标，文字为红色，并附带可点击的堆栈追踪链接。
4、console.info() 输出提示性信息，左侧带蓝色“i”图标，文字为蓝色。
5、console.debug() 输出调试信息，默认被隐藏，需在 Console 设置中启用 Verbose 级别方可显示。
三、过滤与定位特定日志内容
当页面脚本密集输出时，启用过滤机制可屏蔽干扰项，聚焦目标线索，避免滚动查找遗漏关键条目。
1、在 Console 面板右上角点击日志类型筛选下拉箭头，取消勾选不需要的类别，例如仅保留 Errors 和 Warnings。
2、在 Console 顶部搜索框中输入关键词（如 "undefined"、"404" 或变量名），匹配项将高亮并置顶显示。
3、点击某条日志右侧的文件名与行号（如 script.js:42），可直接跳转至 Sources 面板对应源码位置。
四、在 Console 中执行 JavaScript 表达式
Console 不仅是日志查看器，更是与当前页面上下文实时交互的命令行环境，支持变量读取、DOM 操作与函数调用。
1、在底部输入框中键入合法表达式，例如 document.URL，按 Enter 即刻返回当前页面地址。
2、执行多行代码时，使用 Shift + Enter 换行，全部输入完毕后再按 Enter 执行整段代码。
3、使用内置快捷变量：$_ 获取上一次表达式执行结果；$0 引用 Elements 面板中最后选中的 DOM 元素。
4、输入函数声明（如 function test() { return 'ok'; }）后不会立即执行，需额外输入 test() 调用。
五、在移动设备网页中查看 Console 日志
手机端 Chrome 无法直接呼出完整 Console 面板，需借助桌面 Chrome 的远程调试能力或轻量级前端调试工具实现日志可视化。
1、Android 设备：开启开发者选项与 USB 调试 → 电脑 Chrome 访问 chrome://inspect → 启用 Discover USB devices → 连接手机并授权 → 在设备列表中点击目标页面旁的 “inspect” 链接。
2、iOS 设备：Safari 需启用 Web Inspector（设置 → Safari → 高级 → Web Inspector），但 Chrome for iOS 不支持远程调试；替代方案是在页面 HTML 中注入 vConsole 脚本，通过内嵌面板查看日志。
3、注入 vConsole：在页面 中添加以下两段代码：
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script>。
