Chrome Console面板是调试JavaScript和查看日志的高效工具，支持打开、分级日志输出、交互式执行代码、过滤搜索及保存清空日志等核心功能。
如果您在调试网页 JavaScript 代码或查看页面运行时输出的日志信息，Chrome 开发者工具的 Console 面板是直接且高效的入口。以下是掌握其基础用法的操作步骤：
一、打开Console面板
Console 是 Chrome 开发者工具的核心组件之一，用于实时显示 JavaScript 错误、警告、日志及执行脚本。它支持交互式输入与执行 JS 表达式，是前端调试的第一触点。
1、在任意网页中按下 F12 键（Windows/Linux）或 Command + Option + I（macOS）。
2、点击顶部标签栏中的 Console 选项卡。
3、若开发者工具以底部或右侧弹出形式显示，可点击右上角三个点图标 → 选择 Dock side 调整布局以便查看。
二、查看不同类型的控制台日志
网页脚本可通过 console 对象输出多种级别信息，每类信息在 Console 中以不同图标和颜色区分，便于快速识别问题性质。
1、console.log() 输出普通信息，显示为黑色文字。
2、console.warn() 输出警告信息，左侧带黄色感叹号图标。
3、console.error() 输出错误信息，左侧带红色叉号图标，并附带堆栈追踪链接。
4、console.info() 输出提示性信息，左侧带蓝色“i”图标。
5、console.debug() 输出调试信息，默认可能被过滤，需在 Console 设置中启用 Verbose 级别。
三、在Console中执行JavaScript代码
Console 提供即时 JS 执行环境，作用域与当前页面全局上下文一致，可读写变量、调用函数、操作 DOM，是验证逻辑与快速测试的高效方式。
1、在 Console 输入框中键入任意合法 JavaScript 表达式，例如 document.title，按 Enter 即刻返回当前页面标题。
2、输入函数声明或箭头函数后回车，不会立即执行；需额外输入函数名加括号调用，如 (() => 'hello')()。
3、使用 $_ 获取上一次表达式的执行结果，$0 引用 Elements 面板中最后选中的 DOM 元素。
4、输入多行代码时，按 Shift + Enter 换行，完成全部输入后再按 Enter 执行。
四、过滤与搜索控制台输出
当页面日志量较大时，合理利用过滤功能可快速定位目标信息，避免人工滚动排查。
1、在 Console 顶部输入框左侧点击下拉箭头，勾选或取消 Errors / Warnings / Logs / Info / Debug 类别以显示或隐藏对应级别日志。
2、在过滤输入框中直接键入关键词（如 "user" 或 404），Console 仅保留匹配内容。
3、点击某条日志右侧的文件名和行号，可跳转至 Sources 面板对应源码位置。
4、右键某条日志 → 选择 Hide messages from this source 可临时屏蔽该脚本产生的全部输出。
五、保存与清空Console日志
Console 默认在页面刷新后清空日志，但可通过设置保留历史记录，便于跨会话分析；也可手动清除避免干扰。
1、右键 Console 区域 → 勾选 Preserve log，即可在导航、刷新或页面跳转后保留之前所有日志。
2、点击 Console 左上角的 Clear console 图标（垃圾桶形状），或按 Ctrl + L（Windows/Linux）/Command + K（macOS）清空当前输出。
3、右键 Console 区域 → 选择 Save as... 可将全部可见日志导出为文本文件，文件名含时间戳。
