浏览器开发者工具是现代浏览器内置的强大调试平台，通常通过 F12 或右键选择“检查”打开。以下是最常用面板及其调试方法：

1. Elements（元素）面板

• 检查和修改 HTML/CSS：
  点击左上角箭头图标（或 Ctrl+Shift+C），再点击页面元素，可以定位该元素的 HTML 结构。右侧 Styles 区显示所有 CSS 规则，可直接编辑数值（如颜色、宽高）并实时预览效果。
• 盒模型查看：底部盒模型图显示 margin、border、padding、content 的精确尺寸。

2. Console（控制台）面板

• 输出日志与错误：代码中的 console.log()、console.error() 会显示在此处，红色错误信息包含堆栈跟踪。
• 实时执行 JavaScript：直接输入表达式并按回车运行，可用于测试函数或修改变量。例如输入 document.title = "新标题" 立即改变页面标题。
• 过滤与搜索：使用 filter 框按关键字过滤日志，或按类型（Info、Warn、Error）筛选。

3. Sources（源代码）面板

• 设置断点：在左侧文件列表中打开 JS 文件，点击行号添加蓝色断点。当代码执行到该行时会暂停，右侧可查看作用域变量、调用栈。
• 单步调试：暂停后使用 Step Over（跳过当前行）、Step Into（进入函数内部）、Step Out（跳出当前函数）等按钮逐行执行。
• 条件断点：右键行号选择“Add conditional breakpoint”，输入条件表达式（如 i === 5），仅在满足条件时暂停。
• Watch 表达式：添加监视变量，实时查看其值变化。

4. Network（网络）面板

• 查看请求/响应：刷新页面后，所有网络请求（HTML、CSS、JS、图片、API 调用）按时间顺序列出。点击可查看请求头、响应体、Cookie、耗时等。
• 过滤与搜索：按类型（XHR、Img、Doc）过滤，或使用搜索框查找特定 URL。
• 模拟慢网速：在网速下拉菜单（如 Online）选择“Slow 3G”或“Offline”，测试页面在弱网下的表现。

5. Performance（性能）面板

• 性能分析：点击录制按钮，操作页面后停止，得到火焰图（Flame Chart）。可分析 JS 执行时间、渲染重排、函数调用耗时，定位卡顿原因。

6. Application（应用）面板

• 管理存储：查看 Local Storage、Session Storage、Cookies、IndexedDB，可手动增删改数据，适合调试登录状态或缓存问题。
• Service Worker 调试：离线缓存、推送通知等 PWA 相关调试。

常用调试技巧

• 断点调试法：在 Sources 面板对可疑代码行打断点，逐行观察变量变化。
• console.table()：以表格形式打印数组或对象，更清晰。
• DOM 断点：在 Elements 面板右键元素 → Break on → Subtree modifications（子节点变化）、Attribute modifications（属性变化）、Node removal（移除），当 DOM 变化时自动暂停。

通过组合使用这些面板，你可以高效地定位 HTML/CSS 布局问题、JS 逻辑错误、网络请求异常和性能瓶颈。如果需要更针对性的调试方法（如 API 调试、事件监听排查），可以进一步说明。