浏览器开发者工具（DevTools）是每个 JavaScript 开发者最亲密的伙伴。它内置于 Chrome、Edge、Firefox 等主流浏览器中，无需安装任何额外软件。熟练使用这四个核心面板，能让你从“靠猜写代码”进阶到“靠数据写代码”。
控制台（Console）
控制台是最直接与 JavaScript 互动的场所。按下 F12 切换到 Console 标签，你就能：
- 执行任意 JavaScript 代码：直接在输入框中写表达式，回车立即执行，结果即时展示。这对于快速测试 API、验证某个逻辑片段、查看变量值极其方便。
- 查看日志输出：代码中的
console.log()、console.error()、console.warn()、console.table()等输出都会显示在这里，不同级别以不同颜色区分。 - 过滤与搜索：当控制台被大量日志淹没时，可以使用过滤框按级别（Errors、Warnings、Info）或正则表达式筛选，也可以右键“清空控制台”重新开始。
- 实用技巧：
$_可以引用上一次执行的结果；按上下方向键可以翻阅历史命令；console.time('label')和console.timeEnd('label')可以精确测量一段代码的执行耗时。
真实场景：刚写完一段逻辑，不知道某个变量变成了什么值，直接在需要检查的位置加一句 console.log(variable)，刷新页面，控制台告诉你一切。这是最原始也最常用的调试手段。
源码调试（Sources / Debugger）
仅仅是打日志有时不够，你需要让代码在你希望的地方停下来，然后一步步观察执行流程和变量状态。这就是 Sources 面板的价值：
- 设置断点：在左侧文件树中打开任意 JavaScript 文件，点击行号即可添加断点（蓝色标记）。代码执行到该行时会自动暂停，整个页面进入“冻结”状态。
- 逐行执行：暂停后，可以使用调试工具栏——步进（下一步）、跳入函数、跳出函数、继续执行——精细控制代码走向。
- 变量监控：暂停时，右侧面板会显示当前作用域内的所有局部变量和全局变量；你还可以在 Watch 区域手动添加要跟踪的表达式。
- 条件断点：右键点击行号，可以设置只在特定条件满足时才触发的断点，避免在循环中反复暂停。
- Event Listener Breakpoints：可以设置在特定事件（如点击、键盘按下）触发时自动暂停，帮你迅速定位事件处理代码。
真实场景：数据渲染不对，但不确定哪个环节出错。在渲染函数的第一行打断点，刷新页面，代码停住，通过鼠标悬停在变量上就能看到当前值。然后按 F10 一步步走，哪里值变了、哪里逻辑跳错了，一目了然。
网络面板（Network）
Web 应用离不开数据请求，Network 面板让你对每一次请求了如指掌：
- 查看所有请求：刷新页面后，面板会记录所有网络请求（XHR、Fetch、JS、CSS、图片、字体等），显示状态码、类型、大小、耗时。
- 过滤与分类：可以按 XHR/Fetch 只看数据请求，按 JS 只看脚本，或使用搜索框精确查找。
- 请求详情：点击任意请求，可以看到完整的请求头、响应头、请求体、响应体（JSON 会自动格式化）、时间分解（DNS 查询、连接、SSL、等待、下载各阶段耗时）。
- 模拟网络条件：可以切换网络限速（Slow 3G、Fast 3G、Offline），测试弱网环境下的加载体验和超时处理。
- 重发与复制：右键任意请求，可以重发（Replay XHR）以测试接口，也可以复制为 cURL 命令或 Fetch 代码，方便后端联调。
真实场景：页面加载慢，打开 Network 面板，发现某个接口耗时 3 秒，或者某个 JS 文件体积 2MB。又或者接口返回了 500，点开详情看到错误信息，立刻截图发给后端同事。这就是日常联调。
性能面板（Performance）
当应用感觉“卡”，但又不确定瓶颈在哪里，Performance 面板提供了一套完整的性能分析工具：
- 录制性能过程：点击录制按钮，然后操作页面（如滚动、点击），停止录制后会生成一份火焰图和时间线。
- 分析主线程活动：火焰图展示了每个时间段 JavaScript 在执行什么函数、哪些操作触发了重排重绘、哪些任务占用时间长。一眼就能看出是否有长任务阻塞主线程。
- 帧率分析：查看 FPS（每秒帧数）图表，如果帧率频繁掉到 60 以下，说明页面有性能问题。可以定位到具体帧，查看当时触发了哪些渲染动作。
- 内存选项：勾选“Memory”后录制，可以同时观察 JS 堆内存的变化，辅助排查内存泄漏。
真实场景：用户反馈“页面滚动卡顿”，打开 Performance 面板录制一段滚动操作，发现每帧都有一次强制同步布局（Forced Reflow），定位到是某个读取了 offsetTop 又立即修改样式的循环导致。优化掉之后，帧率回归 60fps，问题解决。
这四个面板是前端开发者的“四项基本能力”，它们不从属任何一个框架，也不依赖任何第三方库。能熟练使用它们，你就能自己解答“为什么我的代码不工作”和“为什么它这么慢”这两大终极问题。