浏览器开发者工具（Chrome DevTools）入门：六大面板概览
说实话，我刚入行那会儿，调试基本靠 console.log 打天下。后来带我的老大哥跟我说：「你连 DevTools 都不会用，怎么好意思说自己是前端？」嗯，这话虽然扎心，但确实点醒了我。
Chrome DevTools 说白了就是你调试页面的「手术台」。六个核心面板——Elements、Console、Sources、Network、Performance、Application，每个都有它的独门绝技。今天我就带你挨个过一遍。
Elements 面板：DOM 和 CSS 的实时编辑器
这个面板我用的最频繁。你想想看，页面渲染出来，某个元素位置不对、样式没生效，怎么办？
在 Elements 面板里，你可以直接选中页面上的任意元素。左侧是 DOM 树结构，右侧是样式面板。我习惯的做法是：先在右侧修改 CSS 属性，看看效果，确认没问题了再改源码。
$0 引用它。比如 $0.style.color = 'red'，瞬间就能看到效果。
我曾经遇到过一个诡异的问题：某个按钮的 hover 样式死活不生效。后来在 Elements 面板的「:hov」按钮里强制激活 :hover 状态，才发现是选择器优先级被覆盖了。嗯，这种问题光靠肉眼盯代码，盯到天亮也找不出来。
Console 面板：你的调试控制台
Console 面板，大家应该都不陌生。但你真的会用吗？
除了 console.log，我常用的还有：
console.table()—— 打印数组或对象，表格形式展示，一目了然console.time() / console.timeEnd()—— 测量代码执行时间console.warn() / console.error()—— 区分不同级别的输出
举个例子，你有个数组想看看结构：
const users = [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
];
console.table(users);输出就是一个漂亮的表格，比 console.log 那种乱糟糟的对象展开舒服多了。
console.log。我曾经因为线上环境忘了删日志，导致用户控制台里全是调试信息……嗯，被运维大哥骂了一顿。
Sources 面板：断点调试的核心战场
这个面板，说白了就是你的「代码暂停器」。你可以在 JavaScript 文件里打上断点，然后一步步看代码是怎么跑的。
我个人最常用的功能：
- 行号断点：点击行号，代码执行到这一行就会暂停
- 条件断点：右键行号，设置条件，比如
count > 5时才暂停 - Watch 面板：监控某个变量的值变化
我记得有一次，一个循环里的数据总是算不对。我打了条件断点，只让它在第 100 次迭代时暂停，然后看变量值——果然，是索引越界了。这种问题，靠 console.log 得打到猴年马月去。
Network 面板：网络请求的「监控摄像头」
页面加载慢？接口报错？Network 面板就是你的第一站。
打开面板，刷新页面，你会看到所有网络请求的列表。每一行代表一个请求，包括：
| 列名 | 含义 |
|---|---|
| Name | 请求的资源名称 |
| Status | HTTP 状态码（200、404、500 等） |
| Type | 资源类型（document、script、stylesheet 等） |
| Size | 资源大小 |
| Time | 请求耗时 |
我习惯先看 Waterfall（瀑布图），它能直观展示每个请求的耗时分布。如果某个请求特别慢，点进去看 Timing 标签，就能知道是 DNS 查询慢、TCP 连接慢，还是服务器响应慢。
cf-ray 字段指向了一个异常的节点。嗯，从那以后我养成了看响应头的习惯。
Performance 面板：页面性能的「体检报告」
页面卡顿？滚动掉帧？Performance 面板能帮你找到罪魁祸首。
点击录制按钮，然后操作页面（比如滚动、点击），再停止录制。你会看到一条时间轴，上面密密麻麻记录了每一帧发生了什么。
我重点关注几个指标：
- FPS（帧率）：低于 30 就说明卡顿了
- CPU 占用：某个函数占用过高，可能就是性能瓶颈
- Layout 和 Paint：频繁的布局重排和重绘，会拖慢页面
我记得有一次，一个列表页滚动特别卡。用 Performance 面板一录，发现每次滚动都触发了大量的 Forced Reflow。排查代码，发现是某个动画里反复读取了 offsetTop 属性。改成用 transform 实现后，帧率直接从 15 飙到了 60。
Application 面板：存储和资源的「大本营」
这个面板管的是浏览器存储相关的东西：
- Local Storage 和 Session Storage：查看和编辑键值对
- Cookies：查看当前页面的所有 cookie
- IndexedDB：浏览器端的数据库
- Cache Storage：Service Worker 的缓存
我经常用它来调试登录状态。比如用户说「我明明登录了，但页面还是显示未登录」。打开 Application 面板，看看 token 这个 cookie 是否存在、过期时间对不对。很多时候，问题就出在 cookie 的 Expires 字段上。
好了，六个面板的基本功能就这些。你可能会觉得内容有点多，但别急——后面每个章节我都会深入讲解。记住一句话：工具是死的，用法是活的。多动手、多尝试，这些面板会成为你调试路上的得力助手。