1、浏览器开发者工具（DevTools）精讲
说实话，我见过太多开发者，写代码三年了，还在用 console.log 打天下。每次看到这种场景，我都想拉着他坐下来，好好聊聊 DevTools 到底有多强大。
浏览器开发者工具，说白了就是你调试前端应用的瑞士军刀。Chrome DevTools 是我个人最常用的，Firefox 的也不错，但咱们今天以 Chrome 为主。嗯，开始吧。
Elements 面板：不只是看 HTML
很多人觉得 Elements 面板就是看看 DOM 结构。其实远不止这些。
实时编辑样式：你可以在右侧 Styles 区域直接改 CSS 属性。我在项目中经常用它来快速验证某个颜色或间距是否合适。改完觉得不错，再复制回编辑器。
强制状态：有时候你想看一个按钮的 :hover 或 :focus 状态，但鼠标移开就没了。怎么办？在 Elements 面板中，右键点击元素 → Force State → 选择你要的状态。我经常用这个来调试表单验证的样式。
DOM 断点：这个功能很多人不知道。右键点击某个 DOM 节点 → Break on → 可以选择子树修改、属性修改、节点移除。我曾经用它来排查一个诡异的「某个 div 突然消失」的问题，最后发现是第三方脚本在作祟。
Console 面板：你的第二大脑
Console 不只是看报错的地方。它是个完整的 JavaScript 交互环境。
变量监控：在代码里打断点后，你可以在 Console 里直接输入变量名查看值。我习惯在 Console 里写一些临时表达式，比如 document.querySelectorAll('.item').length，快速确认元素数量。
保留日志：默认情况下，页面刷新后 Console 就清空了。勾选「Preserve log」，日志会保留。这个在调试页面跳转问题时特别有用。
console.log。我曾经见过一个线上页面，因为大量日志导致内存泄漏。可以用 Webpack 的 TerserPlugin 自动移除。
$0 魔法：在 Elements 面板选中一个元素，然后在 Console 里输入 $0，就能直接拿到这个 DOM 对象。 $1 是上一次选中的，依此类推。这个我几乎每天用。
Sources 面板：断点调试的艺术
这个面板是我花时间最多的。它让你像 IDE 一样调试前端代码。
断点类型：
- 行断点：点击行号，最基础的方式
- 条件断点：右键点击行号，输入条件表达式。比如
count > 5，只有满足条件才会停下 - XHR/Fetch 断点：在右侧 Breakpoints 区域，可以监听特定 URL 的请求
我个人最喜欢条件断点。有一次排查一个循环里的 bug，循环 1000 次，只有第 500 次才出问题。普通断点要按到手抽筋，条件断点一次搞定。
Watch 表达式：在右侧 Watch 区域，你可以添加表达式，每次断点停下时自动计算。比如 this.state.data.length，省得你每次手动输入。
Call Stack 与 Scope：断点停下后，Call Stack 告诉你函数调用链，Scope 显示当前作用域的所有变量。这两个配合使用，几乎没有定位不了的问题。
Network 面板：请求的显微镜
前端性能优化，Network 面板是核心工具。
瀑布图：每个请求的耗时一目了然。蓝色是 DNS 查询，绿色是 TCP 连接，橙色是 SSL 握手，灰色是等待时间。我一般先看「等待时间」，如果太长，大概率是后端接口慢。
过滤与搜索：你可以按类型过滤（XHR、JS、CSS、Img 等）。也可以按状态码过滤，比如只看 404 的请求。搜索功能可以搜请求 URL 或响应内容。
| 指标 | 含义 | 正常范围 |
|---|---|---|
| DNS Lookup | 域名解析时间 | < 50ms |
| TCP Connect | TCP 连接时间 | < 100ms |
| SSL/TLS | 安全握手时间 | < 200ms |
| TTFB | 首字节到达时间 | < 500ms |
| Content Download | 内容下载时间 | 视文件大小而定 |
模拟限速：在 Network 面板顶部，有个下拉菜单可以切换网络速度。我习惯用「Slow 3G」来模拟弱网环境，测试页面加载体验。
Performance 面板：性能瓶颈的照妖镜
这个面板稍微有点复杂，但一旦学会，收益巨大。
录制流程：点击录制按钮，操作页面，然后停止。你会得到一份详细的性能报告。
FPS 帧率：绿色条越高越好，红色条表示掉帧。如果出现大量红色，说明你的动画或滚动卡顿了。
火焰图：这是核心。每个长条代表一个函数调用，宽度代表耗时。你找最宽的那个长条，点进去看是什么函数。我遇到过很多次，一个看似简单的 forEach 循环，因为里面做了 DOM 操作，成了性能杀手。
Layout Shift：布局偏移。如果页面加载过程中元素突然跳一下，这里会记录。我修复过一个「图片加载后把按钮挤下去」的问题，就是靠这个面板定位的。
Application 面板：存储与缓存的总控室
这个面板管理浏览器存储，包括 LocalStorage、SessionStorage、Cookies、IndexedDB、Cache Storage 等。
LocalStorage 与 SessionStorage：你可以直接在这里增删改查键值对。我经常用它来清理测试数据，或者手动添加一些 token 来模拟登录状态。
Cookies：查看所有 cookie，包括 HttpOnly 的（虽然不能编辑）。可以手动删除某个 cookie，这在调试登录过期问题时很管用。
IndexedDB：很多 PWA 应用用这个存储离线数据。你可以查看数据库结构、删除记录。我曾经用它来排查一个「离线数据不同步」的问题，发现是某个字段类型存错了。
Cache Storage：Service Worker 的缓存。如果你在做 PWA，这里可以查看哪些资源被缓存了，也可以手动清除缓存。
好了，六个面板讲完了。你想想看，这些工具你平时用到了几个？如果只用 Console 打日志，那真的亏大了。DevTools 是浏览器白送给你的调试利器，不用白不用。
下一章，咱们聊聊移动端调试。那个坑更多，但工具也更精彩。