Chrome DevTools你可能不知道的8个调试技巧，第5个90%的人没用过

DevTools每天都打开，但你只用到了它20%的功能。下面这8个技巧是我从同事那儿学来的——不知道的话不会觉得缺，知道之后再也回不去了。

1. $0直接拿到当前选中的元素

在Elements面板选中一个元素后，切到Console输入$0，就是刚才选中的那个DOM节点。$1是上一个，$2是上上个，一直回溯到$4。调试的时候不用document.querySelector翻来覆去找了。

2. 条件断点

在Sources面板右键断点，选“Edit breakpoint”，输入一个条件表达式比如i > 100。循环跑了几千次、你只关心第101次以后的状态？加个条件断点，到条件命中的时候才停。

3. Network面板的“Copy as cURL”

Network面板里右键任何请求→Copy→Copy as cURL。直接拿到完整的curl命令，包含所有请求头和cookie。后端同事说“你那个接口我复现不了”的时候，一条curl甩过去，问题秒定位。

4. Console里的Live Expression

Console面板点眼睛图标，输入一个JS表达式比如document.activeElement，它会在你操作页面时实时更新值。适合监控某个变量的状态变化而不用手动打断点。

5. Performance面板录屏+截图对比

Performance面板录制的时候勾上Screenshots，回放时能看到每一帧页面的实际截图。做动画性能优化时，你能精确看到哪一帧掉帧了，对应去看那段时间JS在干什么。配合FPS面板，定位动画卡顿的根因效率翻倍。

6. Overrides功能——不用改代码就能调试线上样式

Sources→Overrides面板，选择一个本地文件夹。之后你在Elements面板改的CSS，刷新页面也不会丢。适合调线上样式但还没权限改代码的时候。

7. Command Palette (Cmd+Shift+P)

按Cmd+Shift+P打开命令面板，可以直接搜索所有DevTools功能。比如输入“full”就能找到Capture full size screenshot——不需要装插件就能截整个页面长图。

8. Rendering面板看重绘区域

Cmd+Shift+P→搜索Show Rendering→勾上Paint flashing。之后页面上任何发生重绘的区域都会闪绿色。做性能优化时一眼就能看出哪些元素在不断重绘，对症下药。

标签： 实用技巧 Chrome DevTools 调试技巧 前端开发 效率提升