Chrome开发者工具是前端调试必备工具，含Elements（编辑HTML/CSS）、Console（执行JS/查错）、Sources（断点调试）、Network（监控请求）四大核心面板，支持多方式开启及实时调试。
如果您在开发网页时需要检查页面结构、调试JavaScript代码或分析网络请求，则Chrome浏览器内置的F12开发者工具是必不可少的调试环境。以下是使用Chrome开发者工具进行前端调试的基础操作步骤：
一、打开开发者工具
开发者工具提供多种快捷方式启动，适用于不同操作习惯和调试场景。最常用的方式是通过键盘快捷键直接唤出界面。
1、在Chrome浏览器中打开任意网页。
2、按下 F12 键（Windows/Linux）或 Command + Option + I（macOS）。
立即学习“前端免费学习笔记（深入）”；
3、也可右键页面任意空白处，选择 “检查” 选项。
4、或点击Chrome右上角三个点菜单 → 更多工具 → 开发者工具。
二、Elements面板查看与编辑HTML/CSS
该面板用于实时查看、修改页面DOM结构和样式规则，所有更改仅作用于当前会话，刷新后恢复原始状态。
1、确保开发者工具已打开，并处于 Elements 标签页。
2、将鼠标悬停在左侧HTML树状结构上，页面对应区域会高亮显示。
3、点击左上角 “选择元素”图标（箭头图标），再在页面上点击任意元素，可快速定位其HTML节点。
4、双击右侧Styles面板中的CSS属性值，可直接编辑颜色、尺寸、边距等样式。
5、在HTML节点上右键，可执行 “Edit as HTML” 或 “Delete element” 等操作。
三、Console面板执行JavaScript与查看错误
Console用于运行临时JS代码、查看运行时错误、警告及日志输出，是调试逻辑和验证API响应的核心区域。
1、切换至 Console 标签页。
2、输入 document.body 并回车，可打印body节点对象。
3、调用 console.log("测试") 输出自定义信息。
4、页面加载过程中若存在JS语法错误或运行异常，错误堆栈将红色显示在Console中，点击可跳转至源码位置。
5、在Console中输入变量名或函数名并回车，可查看其当前值或定义。
四、Sources面板设置断点调试JavaScript
Sources面板支持在源码中设置行断点、条件断点和事件监听器断点，便于逐行追踪脚本执行流程。
1、切换至 Sources 标签页。
2、在左侧文件树中展开 "Page" 或 "Content scripts"，找到目标JS文件。
3、点击代码行号左侧空白区域，设置断点（出现蓝色标记）。
4、触发对应JS执行（如点击按钮），执行将在断点处暂停。
5、使用顶部控制按钮：继续（F8）、单步跳过（F10）、单步进入（F11）、单步跳出（Shift+F11）。
6、在右侧 Scope 面板中可查看当前作用域内所有变量值。
五、Network面板监控网络请求
Network面板记录页面加载及后续所有HTTP/HTTPS请求，可用于分析资源加载耗时、响应内容、请求头与响应头等信息。
1、切换至 Network 标签页。
2、刷新页面，所有请求将自动捕获并列表显示。
3、点击某条请求，在右侧查看 Headers、Preview、Response、Timing 等子标签内容。
4、勾选 “Disable cache” 可禁用浏览器缓存，确保每次请求均为真实网络行为。
5、点击 “Filter” 输入框，输入 js、img 或 xhr 可筛选特定类型资源。
