很多人第一次打开浏览器开发者工具，是因为页面崩了、想看看报错，或者——偷偷改一下网页上的成绩。但 F12 打开的那个面板，远不止「看控制台报错」这么简单。它其实是浏览器免费送你的一个完整实验室：网络抓包、性能分析、元素审查、存储查看，全都在里面。

这篇文章不追求把每个按钮都讲一遍（那得写一本书），而是挑普通人、或者刚入门的前端最容易用上的几个面板，带你建立「用工具看世界」的习惯。

一、Elements：看清页面的真实结构

右键页面任意元素，点「检查」，浏览器会直接把你带到对应的 HTML 代码上。这一步看起来理所当然，但它解决的是「我以为的页面」和「真实的页面」之间的落差。

你以为按钮点不动是因为 JS 没绑上，但其实 Elements 面板里一看，那个按钮被一层透明遮罩盖住了——z-index 的问题，根本不是逻辑问题。这类「视觉 bug」在 Elements 里几乎是秒定位：选中元素，右边 Styles 面板会列出它生效的所有 CSS，被划掉的、被覆盖的、来源是哪个文件，一目了然。

小技巧：Styles 面板里可以直接改数值实时预览。比如把 padding 从 8px 改到 16px，页面立刻变，你确认效果后再写回代码。这比改代码、刷新、再看，快得多。

二、Console：不只是报错

Console 最常见的用途是看红色报错，但它其实是一个完整的 JavaScript 运行环境。你可以在里面直接敲 document.title 看当前标题，敲 1+1 做计算，甚至把一段测试逻辑粘进去跑。

更实用的是 console.log 的进阶玩法。很多人写 console.log(user)，但对象一展开就被浏览器「优化」成当时的快照，看不出后续变化。用 console.log(JSON.parse(JSON.stringify(user))) 或者 console.table(arr) 能让数据结构更清晰。调试接口返回的数据时，先把乱糟糟的 JSON 丢进 JSON 格式化工具 规整一遍，再贴到 Console 里下断点，效率会高很多。

另外，Console 支持用 $ 快捷选中元素：$('selector') 相当于 document.querySelector，$$('selector') 返回所有匹配项。日常定位 DOM 非常顺手。

三、Network：看清楚每一次请求

这是我认为最有「侦探感」的面板。打开 Network，刷新页面，你会看到一长串请求：HTML、CSS、JS、图片、接口数据……每一条都标了状态码、大小、耗时。

接口联调时它几乎是刚需：后端说「我返回了数据啊」，你点开那条 XHR/Fetch 请求，看 Response 里到底是空数组、500 报错、还是字段名拼错了。常见陷阱是后端返回的是字符串 "123"，前端却期待数字 123，这种类型错位在 Network 里一眼就能看出来。

过滤功能也很好用：点 XHR 只看接口，点 Img 只看图片，能快速缩小范围。慢请求（左上角可按时间排序）往往就是页面卡顿的元凶。

四、Application：本地存了什么

网站是怎么「记住你」的？Cookie、localStorage、sessionStorage、IndexedDB 都在这个面板里。你可以直接查看、编辑、甚至删除某个键值，用来复现「退出登录后还能访问」之类的权限 bug。

排查缓存问题也在这里：Service Worker 注册了没？Cache Storage 里是不是塞了一堆旧资源？很多时候「我代码改了怎么没生效」不是代码问题，是浏览器在用缓存里的老版本。

五、Sources 与断点调试

Sources 面板能看页面加载的所有源文件，还支持打断点。在你怀疑的那一行点一下，刷新页面，代码会在那里暂停，你可以鼠标悬停看每个变量的值，一步步往下走。比起满屏 console.log，断点调试更接近「真正理解程序在干什么」。

正则相关的逻辑，比如表单校验、字符串提取，光靠脑子想边界情况很容易漏。把你的规则先在 正则测试器 里试一堆用例，再写进代码，能少踩很多坑。

六、取色与测量

很多面板间藏着设计师会喜欢的小功能：用取色器（Elements 里点任意颜色值前的小方块）能直接吸取页面上任意像素的颜色；Device Toolbar（Ctrl/Cmd+Shift+M）能切换不同手机尺寸预览；截图功能可以只截某个元素或整页长图。

需要精确拿某个按钮的色值时，颜色选择器 配合开发者工具一起用，从屏幕取色到转成代码几乎是流水线。

七、一点心态上的建议

开发者工具最大的价值，不是某个具体功能，而是它把「黑盒」变成了「透明盒」。出了问题，第一反应不是猜，而是打开工具看证据：Network 看请求、Console 看报错、Elements 看结构、Application 看存储。

养成这个习惯后，你会发现大部分「玄学 bug」其实都有迹可循。而且这套工具完全免费、无需安装、任何现代浏览器都有，是性价比最高的「装备」之一。

小结：Elements 看结构、Console 跑代码、Network 抓请求、Application 查存储、Sources 打断点。五个面板覆盖日常 90% 的调试场景，剩下的留给官方文档慢慢挖。