浏览器 DevTools 中最被低估的功能

Source: Dev.to

浏览器 DevTools 已经变得非常强大，但许多开发者只使用了其中很小的一部分。虽然 Elements 面板、Console（控制台）和 Network（网络）标签已经很熟悉，仍有许多实用功能被忽视。这些功能可以显著提升调试效率、性能检查以及整体代码质量。

Local Overrides

Local Overrides 允许你修改任意网站的资源，并在页面重新加载后仍保留这些更改。

示例： 你在一个线上站点上发现布局问题。与其在 Elements 面板中修改 CSS 并在刷新后丢失编辑，不如启用 Local Overrides，更新 CSS 文件，然后重新加载页面，以确保修复能够始终生效。

CSS Overview

CSS Overview 面板提供站点样式的主要概览。

示例： 在一个大型应用上运行 CSS Overview，发现你使用了十二种不同的蓝色阴影。这帮助你缩小配色范围，保持设计的一致性。

Request Blocking

Request Blocking 让你模拟网络资源缺失或请求失败的情况。

示例： 你阻止某个特定的 API 调用，以确保在服务器宕机时错误处理能够显示正确的回退 UI。

Performance Insights

Performance Insights 会自动检查性能问题并提供改进建议。

示例： 你录制一次会话，工具提示一个大图片拖慢了 Largest Contentful Paint（最大内容绘制）。它指出导致延迟的文件，并建议压缩或调整尺寸。

Animations Panel

Animations 面板让你精确控制 CSS 动画和 Web Animations API 效果。

示例： 你将动画速度降至 10 % 以检查过渡期间出现的轻微抖动。面板显示 transform 属性被不必要地重新计算。

Accessibility Tree

Accessibility Tree 展示屏幕阅读器和其他辅助工具如何解释你的界面。

示例： 你检查一个模态框，发现 Accessibility Tree 并未将其识别为对话框。这促使你调整 ARIA role，使屏幕阅读器能够正确交互。

Network Conditions

Network Conditions 让你在不同的网络速度和用户代理下测试站点。

示例： 你将网络限速到慢速 3G，发现首页加载时间超过十秒。这促使你减小图片尺寸并限制启动时运行的 JavaScript 量。

Coverage Tab

Coverage 选项卡可以识别未使用的 CSS 和 JavaScript。

示例： 在一个旧代码库上运行 Coverage，发现约 40 % 的大型 CSS 文件从未被使用。这帮助你删除未使用的选择器，减小打包体积。

Snippets

Snippets 充当内置的可重用脚本库。

示例： 你创建一个 Snippet，用于高亮页面上所有可聚焦元素。每当进行可访问性工作时，运行此 Snippet 即可快速检查键盘导航的流向。

Console Utility Functions

DevTools 包含多个内置的 Console 辅助函数，可提升调试效率。

示例： 你在 Elements 面板中选中一个元素后，输入 $0 即可立即引用它。随后运行 getComputedStyle($0) 检查其最终计算样式，而无需自行查询 DOM。

Conclusion

浏览器 DevTools 提供了许多实用功能，却常被开发者忽视。善用这些工具可以加快调试速度、提升性能检查，并促成更优质的代码。