Chrome DevTools 中的隐藏功能
你可能每天都会打开 Chrome DevTools 几十次。Console、Elements、Network——常规的循环操作。但 DevTools 已经悄然成长为一个更加强大的环境,而它的大多数最佳功能都藏在比大多数开发者停止探索的地方更深一层的菜单中。
以下是值得加入你日常工作流程的鲜为人知的 Chrome DevTools 功能。
核心要点
- CSS Overview 提供了颜色、字体和优先级问题的完整审计——非常适合在重构前发现样式表不一致问题。
- Logpoints 和条件断点让你无需修改源代码即可调试,能够在热重载中保留且无需重新部署。
- Coverage 标签页可以量化每个文件中未使用的 JavaScript 和 CSS,为你提供代码拆分和懒加载的具体目标。
- Performance 面板的布局偏移区域和主线程分解帮助你精确定位 CLS 罪魁祸首和高成本的样式重计算。
- Network Conditions 面板、请求阻止工具和 Initiator 标签页提供对请求模拟的精细控制和精确的调用栈追踪。
CSS Overview:样式表的健康检查
打开方式: 点击三点菜单(⋮)→ More Tools → CSS Overview。
运行捕获后,你会得到页面上每个颜色、字体系列、字体大小、媒体查询和优先级问题的完整分解。在大型代码库中,这对于捕获近似重复的颜色(如 #fff 和 #ffffff)或优先级高到无法干净覆盖的选择器非常有价值。
Font Info 部分特别有用——它显示了正在渲染的字体大小和字重的实际分布,这通常会揭示设计令牌本应防止的不一致性。
提示: 在设计系统重构之前使用 CSS Overview。它能让你在开始清理之前清楚地了解混乱的情况。更多详情请参阅官方 CSS Overview 文档。
Chrome DevTools 高级调试:用 Logpoints 替代 console.log
停止在源代码中到处添加 console.log。在 Sources 面板中,右键点击任意行号并选择 Add Logpoint。输入任何表达式——它会记录到控制台而无需修改你的代码。
这是最少被使用的 Chrome DevTools 调试技巧之一。Logpoints 在热重载中保留,不需要重新部署,并且在你完成后会干净地消失。将它们与条件断点(右键点击 → Add Conditional Breakpoint)配对使用,仅在特定表达式为真时暂停执行——这对于调试只在循环第 50 次迭代后才出现的间歇性 bug 很有用。
Coverage 标签页:查找并消除未使用的代码
打开方式: 三点菜单 → More Tools → Coverage。
点击录制,与页面交互,然后停止。DevTools 会准确显示每个 JS 和 CSS 文件中从未执行的代码百分比。一个未使用率达到 60-70% 的文件是代码拆分或懒加载的候选对象。
工作流程很简单:Coverage → 识别死代码 → 拆分或延迟加载 → 测量 LCP 和 TTI 改进。这直接影响你的 Core Web Vitals 分数。
提示: Coverage 不考虑交互触发的代码。在点击关键用户流程时录制,而不仅仅是在页面加载时。
Discover how at OpenReplay.com.
Performance 面板洞察:调试布局偏移和样式重计算
Performance 面板已经显著成熟。录制一个会话并查看主线程分解——特别是 Style Recalc 和 Layout 事件。父元素上的单个 CSS 属性更改可能会触发数百个 DOM 节点的完整布局重计算。
对于 CLS 调试,在录制前通过 Rendering 抽屉(三点菜单 → More Tools → Rendering)启用 Layout Shift Regions。偏移的元素会逐帧用蓝色覆盖层高亮显示,立即清楚地显示哪个元素移动了以及何时移动。
避免在循环内查询布局属性,如 offsetHeight 或 getBoundingClientRect()——每次调用都会强制同步布局,这会迅速累积。
Network Conditions 面板:精细的请求模拟和追踪
大多数开发者知道 Network 标签页中的全局网络限速。较少人知道 Request Blocking 和 Network Conditions 面板,可通过三点菜单 → More Tools 访问。
Network Conditions 面板允许你覆盖用户代理并全局禁用缓存。网络限速本身通常从 Network 标签页的限速下拉菜单控制,该菜单模拟较慢的连接以进行测试。较新版本的 DevTools 还通过请求条件工具支持更精细的请求级限速。
Request Blocking(More Tools → Network Request Blocking)允许你完全阻止特定的 URL 模式——这对于测试当特定第三方脚本加载失败时应用的行为很有用。
要追踪请求在代码中的来源,在 Network 标签页中点击任何请求并打开 Initiator 标签页。它显示触发请求的确切调用栈——这是逆向工程不熟悉的 API 调用或追踪意外触发的 fetch 的快速方法。
结论
上述功能并非为了晦涩而晦涩——它们比替代方案更快地解决实际问题。CSS Overview 取代了手动样式表审计。Logpoints 取代了一次性的 console 语句。Coverage 使打包优化变得具体而非推测。
最佳的 Chrome DevTools 调试技巧有一个共同特点:它们缩小了”感觉有问题”和”我确切知道问题所在”之间的差距。从这个列表中选择一个功能开始,将其融入你的工作流程,其余的自然会跟上。
常见问题
Logpoints 与你的 DevTools 会话和特定的源文件映射绑定。只要页面源保持不变且 DevTools 保留其工作区状态,它们就会保留。但是,除非你在 Sources 面板中配置了带有本地文件覆盖的 Workspace,否则它们不会在浏览器重启后永久保存。
Tree-shaking 基于静态分析在构建时删除从未导入或引用的代码。Coverage 标签页测量运行时执行,显示已发送到浏览器但在会话期间从未实际运行的代码。它们相互补充:tree-shaking 捕获死导出,而 Coverage 捕获可达但实际未使用的代码。
CSS Overview 不提供内置的导出功能。但是,你可以手动复制每个部分的数据或截图。对于更自动化的方法,可以考虑使用 cssstats.com 或 Wallace CLI 等工具,它们解析样式表并生成具有类似颜色、字体和优先级分解的可导出报告。
通过 Rendering 抽屉启用 Layout Shift Regions 会添加视觉覆盖层,但不会明显扭曲你的 Performance 面板指标。覆盖层渲染成本可以忽略不计。为获得最准确的分析结果,请关闭其他标签页,禁用浏览器扩展,并使用隐身窗口以最小化后台进程的干扰。
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
