开发者工具五大核心面板功能：Elements实时编辑DOM/CSS；Console执行JS与调试；Network监控网络请求；Sources断点调试JS；Application管理本地存储与Service Worker。
一、Elements面板：实时查看与编辑HTML/CSS
Elements面板是前端调试最常使用的入口，用于直观呈现页面DOM结构与关联样式，支持即时修改并预览效果，所有变更仅在当前会话生效，不影响源文件。
1、按F12打开开发者工具后，点击Elements标签页。
2、点击左上角箭头图标（或按Ctrl+Shift+C），在页面中悬停并单击目标元素，自动定位至DOM树中对应节点。
3、双击任意HTML文本或属性值，直接编辑内容；右键元素可选择Edit as HTML进行块级修改。
立即学习“前端免费学习笔记（深入）”；
4、在右侧Styles面板中，勾选/取消CSS属性前的复选框可临时禁用该规则；点击数值后使用方向键微调像素、颜色等值。
5、点击Styles面板右上角的:hov按钮，强制激活:hover、:active、:focus等伪类状态，无需真实交互即可调试样式响应。
二、Console面板：执行JS与捕获运行时信息
Console面板提供JavaScript执行环境与日志输出界面，是验证逻辑、排查错误、快速操作DOM的核心区域，支持实时输入并立即反馈结果。
1、切换到Console标签页，确保页面已加载完成。
2、输入console.log(document.title)并回车，查看当前页面标题输出。
3、使用$0引用Elements中最新选中的元素，例如输入$0.style.color = 'red'可即时改变其文字颜色。
4、执行document.querySelector('button').click()模拟按钮点击行为，验证事件绑定是否生效。
5、当页面报错时，错误堆栈会以红色高亮显示在Console中，点击右侧文件链接可跳转至Sources面板对应行号。
三、Network面板：监控网络请求与接口调试
Network面板完整记录页面加载及后续交互产生的全部网络请求，包括XHR/Fetch、脚本、图片、字体等资源，是分析加载性能与接口问题的关键工具。
1、切换至Network标签页，勾选Preserve log防止页面跳转后日志清空。
2、刷新页面，所有请求将按时间顺序列出；点击某条XHR请求，查看Headers（含请求参数与响应头）、Preview（格式化响应体）和Response（原始响应内容）。
3、在请求列表上方筛选栏中，输入XHR或fetch仅显示接口请求；也可输入关键词如“login”快速定位目标请求。
4、右键某条请求，选择Copy as cURL，粘贴至终端或API调试工具复现请求；或选择Replay XHR重新发送该请求。
5、点击右上角Throttling下拉菜单，选择“Slow 3G”等预设档位，模拟弱网环境观察页面表现。
四、Sources面板：JavaScript断点调试与代码管理
Sources面板用于查看、设置断点、单步执行及修改前端JavaScript源码，配合作用域变量与调用栈，可精准定位逻辑缺陷与执行路径异常。
1、切换到Sources标签页，左侧文件树中展开网页加载的JS文件，或使用Ctrl+P（Windows/Linux）或Cmd+P（Mac）快速搜索文件名。
2、在目标JS代码行号左侧空白处单击，设置红色断点；刷新页面，执行流将在该行暂停。
3、暂停后，右侧Scope区域显示当前作用域内所有变量值；Call Stack显示函数调用链路，便于回溯触发路径。
4、使用F8继续执行、F10单步跳过、F11单步进入函数内部；鼠标悬停变量可临时查看其当前值。
5、右键任意JS文件 → Add folder to workspace，将远程资源映射至本地目录，修改后按Ctrl+S可直接保存至磁盘。
五、Application面板：管理客户端存储与应用状态
Application面板集中展示并允许手动操作网页在浏览器中持久化或临时存储的数据，适用于测试登录态、缓存策略、离线能力等场景。
1、切换至Application标签页，左侧导航栏展开Storage类别。
2、点击Cookies，查看当前域名下所有Cookie键值对；双击Value列可编辑，右键可删除指定项，用于模拟登出或身份切换。
3、展开Local Storage或Session Storage，查看键值数据；点击Clear all按钮一键清空对应存储空间。
4、在Cache Storage中检查Service Worker缓存的资源列表，右键可删除单个缓存条目或整个缓存仓库。
5、展开Service Workers，勾选Update on reload确保刷新时加载最新版本，点击Unregister可彻底卸载当前注册的Worker。
