Chrome DevTools 入门：我最常用的八个面板功能

大三自学前端，调 bug 全靠满屏 console.log。实习第一天，看师傅调试：断点、条件断点、调用栈、网络面板一顿操作，五分钟定位了问题——我那一刻感觉自己像个原始人。

这篇把 DevTools 最高频的功能整理出来，希望新手同学少走我当年的弯路。按 F12 或 Ctrl+Shift+I 打开，我们开始。

1. Elements：实时改样式

左半边是 DOM 树，右半边是选中元素的样式。最实用的操作：

• 直接在 Styles 面板改 CSS，页面实时生效，调好了再抄回代码里
• 右键元素 → Force state，强制 :hover / :focus 状态，调悬浮样式不用反复挪鼠标
• 点样式前面的复选框可以临时禁用某条规则，排查"这条样式到底有没有生效"特别快

2. Console：不只是 log

console.table(users)      // 数组对象以表格展示，比 log 清晰十倍
console.time('load')      // 开始计时
// ...一些操作
console.timeEnd('load')   // 输出: load: 234.5ms

// 快捷变量：
$0                        // 当前在 Elements 选中的元素
$_                        // 上一次表达式的结果

console.table 和 $0 是我每天必用的两个，知道的人反而不多。

3. Sources：断点调试才是正道

在代码行号上点一下打断点，代码执行到这里会暂停，可以查看当前所有变量的值、单步执行。

比 log 强在哪？log 是"拍完照再看"，断点是"现场直播还能倒回去"。

条件断点（右键行号 → Add conditional breakpoint）：

// 只有 i === 499 时才停，循环调试神器
i === 499

XHR 断点：Sources 面板右侧，可以设置"当请求 URL 包含 /api/user 时暂停"——接口参数不对时，直接断在发请求的地方，顺着调用栈找到是谁发的。

4. Network：接口问题第一站

接口报错先来这里：

• 看 Status：404 是地址错，500 是服务器错，CORS 错误会有特殊标记
• 看 Preview/Response：返回的数据长什么样
• 看 Timing：慢在哪一段（排队、DNS、传输、服务端处理 TTFB）

右键请求 → Copy → Copy as cURL，发给后端同学，他在终端一跑就能复现，扯皮时间立省 90%。

Disable cache 复选框：调试静态资源时勾上，省得被缓存坑。

5. Application：前端存储全在这

Local Storage、Session Storage、Cookie、IndexedDB 都能在这里查看和直接编辑。

调试登录态时，在这里删掉 Cookie 比退出登录快多了。

6. 设备模拟：手机长什么样

左上角的手机图标（Ctrl+Shift+M），可以模拟各种手机尺寸、改 User-Agent、模拟慢速网络（Slow 3G）。

响应式布局的初步检查用它足够。但注意：模拟器 ≠ 真机，iOS Safari 的诡异问题还得真机验。

7. 性能初探：Performance 面板

点录制，操作页面，停止——得到一帧一帧的执行分析。哪个函数耗时、什么时候 layout 抖动，一目了然。

这块水很深，入门阶段先记住：页面卡顿了知道来这里录一段，找到红色的长条（Long Task），点进去看是什么函数。

8. Lighthouse：一键体检

Audits 面板（新版叫 Lighthouse），选 Performance/SEO/Accessibility，点分析，得到一份带打分的体检报告和具体优化建议。

面试被问"怎么优化性能"没思路时，先对目标网站跑一次 Lighthouse，照着建议说就完事了。

快捷键备忘

小结

• Elements 实时改样式，Console 用 table 和 $0
• Sources 断点 > console.log，条件断点调试循环
• Network 看接口，Copy as cURL 是前后端沟通神器
• 页面卡了录 Performance，体检跑 Lighthouse

DevTools 是前端开发者的主武器，每天花十分钟探索一个功能，一个月后调试效率会有质变。下一篇准备研究下浏览器的渲染原理，看看页面到底是怎么被画出来的。