9个你可能忽视的浏览器 DevTools 功能（以及它们为何重要）
Source: Dev.to
如果你和大多数前端开发者一样，浏览器 DevTools 总是打开着……但它们的大部分强大功能却常常被默默忽视。我们检查元素、调试 CSS、查看控制台，然后发布。隐藏在这些熟悉标签下的功能可以节省数小时的时间，防止用户体验错误，并提升对自己工作的信心。
1. 禁用缓存（Network 面板）
当缓存开启时，你可能会误以为修复已经生效，但用户仍然看到旧的资源。
使用方法
- 打开 Network 面板。
- 勾选 Disable cache。
- 刷新页面。
这会强制浏览器请求最新资源，确保你测试的正是用户实际收到的内容。
2. 网络限速
你在 Wi‑Fi 上的高速 MacBook 并不能代表所有用户。局部“流畅”的 UI 在慢速网络、低配手机或农村宽带上可能会出现卡顿甚至崩溃。
使用方法
- 在 Network 面板，点击 Throttling 下拉菜单。
- 选择如 Slow 3G 的预设。
- 刷新页面并观察布局位移、阻塞脚本或图片加载过慢等情况。
3. Performance 面板 – 记录长任务
Performance 面板帮助你定位：
- 阻塞主线程的长任务
- 高消耗的重新渲染
- 布局抖动
使用方法
- 点击 Record。
- 与页面交互。
- 点击 Stop。
在时间轴中寻找长的紫色或黄色块，它们标示了瓶颈所在。
4. 可视化布局调试（Grid 与 Flex 叠加）
布局错误往往源于思维上的不匹配（“我以为这个网格是 X，实际上是 Y”）。
使用方法
- 检查一个元素。
- 在 Styles 面板中切换 Grid 或 Flex 叠加按钮。
你会看到实际的列线、间隙和对齐行为——就像在黑暗的房间里打开灯一样。
5. 强制元素状态（:hover、:focus、:active）
交互状态对可访问性和用户体验至关重要，但用鼠标调试时常常很麻烦。
使用方法
- 检查该元素。
- 点击 :hov 按钮。
- 勾选 :hover、:focus 或 :active。
现在可以在不移动光标的情况下平静地为这些状态编写样式。
6. Lighthouse 审计
Lighthouse 能揭示：
- 可访问性问题
- 性能瓶颈
- 最佳实践违规
先不要在意整体分数，阅读每条建议。它们会告诉你浏览器和真实用户是如何体验你的 UI 的。
7. Coverage（未使用代码）
臃肿的代码包会增加加载时间、认知负担以及重构难度。
使用方法
- 打开命令面板（
Cmd + Shift + P或Ctrl + Shift + P）。 - 搜索 Coverage 并选择它。
- 刷新页面。
红色表示未使用的代码，绿色表示已使用的代码。这对老项目尤其有冲击力。
8. 本地覆盖（Sources → Overrides）
有时你需要：
- 测试一个快速的 UI 修复
- 原型化一次复制更改
- 安全地调试生产环境
使用方法
- 打开 Sources 面板。
- 启用 Local overrides。
- 直接编辑 CSS 或 JS。
这样可以在不提交任何代码的情况下进行实验。
9. Accessibility 面板
可访问性不是“锦上添花”，而是专业前端工作的重要组成部分。
Accessibility 面板展示：
- ARIA 角色
- 名称/标签问题
- 键盘焦点行为
全部无需外部工具。这里的微小改进可以显著降低用户挫败感和支持工单数量。
入门指南
从列表中挑选一个功能，今天就尝试一下——无论是在副项目、工作任务，还是随便一个网站上。随后思考：
- 哪个功能让你最惊讶？
- 哪个功能会成为你的常用工具？
祝调试愉快——记住：你并没有落后，只是学会了更好地观察。