调试期间支持实时编辑，Chrome 开发者工具迎来大波新特性

Chrome DevTools 团队介绍了 Chrome 105 的 DevTools 新功能，包含性能测试/优化、排版优化等多方面改进。

下面对主要新功能进行介绍：

在 Recorder 中逐步复查

新版本可以在 Recorder 面板中设置断点，并逐步重播用户流程，此功能可以轻松地完全可视化和调试用户流。

单击步骤旁边的蓝点重播用户流程，随后可以继续回放、执行步骤或取消回放。

有关该功能的详细信息，请参阅 Recorder features reference 。

Chromium issue: 1257499

支持 Recorder 面板中的鼠标悬停事件

Recorder 支持在记录中手动添加鼠标悬停步骤。

比如该 demo 在悬停时弹出菜单，如果重播该用户流将会失败，因为 Recorder 在记录期间不会自动捕获鼠标的悬停事件。

新版本解决了这个问题，在单击菜单之前手动添加一个步骤：将鼠标悬停在选择器上即可。

扫描二维码关注公众号，回复： 14473870 查看本文章

Chromium issue: 1257499

Performance insights 面板的最大内容绘制 (LCP)

LCP（Largest Contentful Paint）是一个以用户为中心的度量，用于测量用户感知的负载速度。新版本可以找出最大内容绘制 (LCP) 的关键路径和根本原因。

在 Performance insights 面板单击时间轴中的 LCP 按钮，在详细信息窗格中可以查看 LCP 分数，了解如何修复降低 LCP 速度的资源，并查看 LCP 资源的关键路径。

Chromium issue: 1326481

Manifest 窗格中的 PWA 协议处理

可以使用 Chrome DevTools 测试 PWA (渐进式 Web 应用程序) 的 URL 协议处理（Protocol handlers）。

URL 协议处理程序注册允许已安装的 PWA 使用特定协议（例如，magnet、web+example），以获得更集成的体验。

通过 Application > Manifest 窗格导航到 Protocol Handlers 部分，然后查看和测试所有可用的协议。

Chromium issues: 1300613

元素面板中的顶层标记

为了进一步可视化顶层元素（比如对话框），DevTools 将顶层容器标记 ( #top-layer) 添加到 DOM 树中。

要从顶层容器元素跳转到顶层树元素，请单击顶层容器中的元素，或背景旁边的显示按钮。

在顶层树元素（例如对话框元素）旁边，单击顶层标记可以跳转到顶层容器。

Chromium issue: 1313690

在运行时附加 Wasm 调试信息

可以在运行时为 wasm 附加 DWARF 调试信息。以前，Sources面板仅支持将 sourcemap 附加到 JavaScript 和 Wasm 文件。

现在在 Sources 面板中打开一个 Wasm 文件，在编辑器中右键单击并选择“添加 DWARF 调试信息…”，按需附加调试信息。

Chromium issue: 1341255