Chrome DevTools 团队介绍了 Chrome 105 的 DevTools 新功能，包含性能测试/优化、排版优化等多方面改进。
![]()
下面对主要新功能进行介绍：
在 Recorder 中逐步复查
新版本可以在 Recorder 面板中设置断点，并逐步重播用户流程，此功能可以轻松地完全可视化和调试用户流。
单击步骤旁边的蓝点重播用户流程，随后可以继续回放、执行步骤或取消回放。
有关该功能的详细信息，请参阅 Recorder features reference 。
![]()
Chromium issue: 1257499
支持 Recorder 面板中的鼠标悬停事件
Recorder 支持在记录中手动添加鼠标悬停步骤。
比如该 demo 在悬停时弹出菜单，如果重播该用户流将会失败，因为 Recorder 在记录期间不会自动捕获鼠标的悬停事件。
新版本解决了这个问题，在单击菜单之前手动添加一个步骤：将鼠标悬停在选择器上即可。
![]()
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
调试期间支持实时编辑
现在可以编辑堆栈上最顶层的函数，无需重新启动调试器。
Chrome 104 版本的 DevTools 有重新启动框架功能。但是无法编辑当前暂停的函数。
Chrome 105 的调试器支持实时编辑，但有以下限制：
- 暂停时只能编辑最顶层的函数
- 在堆栈的下方对同一函数没有递归调用
![]()
Chromium issue: 1334484
在样式窗格中的规则中查看和编辑 @scope
可以在样式窗格中查看和编辑 CSS@scope规则，@scope规则是 CSS Cascading and Inheritance Level 6 规范的一部分，允许开发者在 CSS 中定义样式规则。
![]()
Chromium issue: 1337777
Sourcemap 改进
- DevTools 可以正确解析带有标点符号的源映射标识符。一些现代缩小器（例如 esbuild）生成源映射，将标识符与后续标点符号（逗号、括号、分号）合并。
- DevTools 通过 super 调用解析构造函数的源映射名称。
![]()
- 修复了重复规范 URL 的源映射 URL 索引。之前由于重复的规范 URL，某些文件中没有激活断点。
Chromium issue: 1335338, 1333411
其他亮点
- 从应用程序 > 本地存储窗格中的表中正确删除本地存储键值对。(1339280)
- 在“源代码”面板中查看 CSS 文件时，可以正确显示颜色预览。之前可能发生错位问题。(1340062)
- 在“布局”窗格中一致地显示 CSS flex 和 grid 元素，并在“元素”面板中将它们显示为标记。以前 flex 和 grid 元素会在这两个地方随机丢失。(1340441 , 1273992)
总的来说增加了不少实用操作，前端的排版和调试更轻松。
