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

# Chrome DevTools你可能不知道的10个技巧 用了5年Chrome DevTools，最近才发现一些隐藏功能，分享几个最实用的。 ## 1. 条件断点 右键行号 -> Add conditional breakpoint，输入条件表达式： ```javascript // 只在userId为特定值时断住 userId === 'test-user-001' ``` ## 2. Console中的$0 在Elements面板选中一个元素后，Console里输入`$0`就能直接操作这个DOM节点。`$1`是上一个选中的。 ## 3. Performance Monitor实时面板 `Cmd+Shift+P` 输入 "Show Performance Monitor"，实时显示CPU、JS堆内存、DOM节点数、布局次数。 ## 4. Coverage面板 `Cmd+Shift+P` 输入 "Show Coverage"，录制后能看到每个JS/CSS文件有多少代码没被用到。我们项目发现60%的CSS是无用的。 ## 5. 模拟弱网 Network面板 -> Throttling -> 自定义网络条件，可以精确设置上传/下载速度和延迟。 ``` // 自定义配置示例 Download: 100kb/s Upload: 50kb/s Latency: 500ms ``` ## 6. Memory Snapshot对比 在Memory面板分别拍两个快照，选择Comparison视图，能直接看出两次快照之间新增了哪些对象——排查内存泄漏神器。 ## 7. copy()函数 Console里可以用`copy(someObject)`把任意对象复制到剪贴板，调试API返回值时特别好用。 这些小技巧能帮你省下大量调试时间，建议收藏慢慢看。