Chrome DevTools 里藏着的6个调试技巧

每天都在用 Chrome 开发者工具，但这些技巧不一定都知道。

1. 条件断点不打断

循环 1000 次，在第 500 次的时候出问题。普通断点要按 500 次继续，其实右键断点选 Edit breakpoint，可以设条件表达式。i === 500 才停下，省了 499 次点击。

2. console.table 比 console.log 好看十倍

console.log 打印数组对象挤成一堆看不清。用 console.table(data) 直接输出表格，字段名是列头，一眼看出数据差异。打印 API 返回的列表时特别实用。

3. copy() 省去右键操作

调试时拿到一个对象想复制出去用，不用展开再手动选中。在 Console 输入 copy(someVariable)，结果直接进剪贴板。

4. \$0 引用当前选中元素

Elements 面板里选中一个元素，在 Console 里用 $0 就能引用它。\$1 是上一个选中的，\$2 是再上一个。配合 console.dir($0) 看 DOM 对象的属性，排查事件监听特别方便。

5. Network 面板右键复制 fetch

Network 面板找到某个请求，右键 → Copy → Copy as fetch，直接拿到完整的 fetch 代码，包括 headers 和 body，回头写测试脚本省了手工构造请求的时间。

6. Coverage 面板看无用代码

Ctrl+Shift+P 搜 Coverage，打开后点 Record 刷新页面。面板会显示每行代码是否被执行过，红色部分是未被执行的。这是排查无用 JS/CSS 代码、优化首屏加载最快的方法。