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

来源: OSCHINA
编辑: 罗奇奇
2022-08-13 07:43:38

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)

总的来说增加了不少实用操作,前端的排版和调试更轻松。

展开阅读全文
12 收藏
分享
0 评论
12 收藏
分享
返回顶部
顶部