Chrome DevTools 你可能不知道的 10 个调试技巧

Chrome DevTools 我每天都在用，但最近看了一些资料才发现好多功能从来没用过。 ## 1. 条件断点 右键行号 → Add conditional breakpoint，输入 `userId === 'admin'`。循环里调试特定数据太好用了。 ## 2. Logpoint 右键行号 → Add logpoint，相当于加 console.log 但不改代码。 ## 3. Blackbox Script 右键源码文件 → Blackbox script，step into 自动跳过 React/Vue 源码。 ## 4. Copy as cURL Network → 右键请求 → Copy as cURL，直接粘贴到终端复现。 ## 5. Local Overrides Sources → Overrides，可以直接修改 API 返回值模拟各种场景。 ## 6. Performance Monitor Ctrl+Shift+P → Show Performance Monitor，实时看 CPU、堆大小、DOM 节点数。 ## 7. Coverage 看每个 JS/CSS 文件有多少死代码，优化打包体积时很有用。 ## 8. Network Throttling 模拟 Slow 3G 或离线，测试加载状态必备。 ## 9. $0 引用选中元素 Elements 选中元素后，Console 里 `$0` 就是它的引用。 ## 10. 截图 Ctrl+Shift+P → screenshot，支持整页长截图、节点截图、区域截图。不需要装插件。