F12控制台日志查看与JS执行【入门】- Chrome开发者工具Console怎么用

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... 可将全部可见日志导出为文本文件，文件名含时间戳。