开发者工具的新变化 (Chrome 104)

Jecelyn Yeen

在调试期间重启帧

重启帧功能已恢复！当函数在某个位置暂停时，您可以重新运行上述代码。此前，由于稳定性问题，此功能已在 Chrome 92 中被弃用并移除。

在此示例中，调试程序最初会在 toggleColorScheme 函数结尾附近的断点（第 343 行）处暂停。如需从 toggleColorScheme 函数开头重新开始调试，请展开 Debugger 窗格中的 Call stack 部分，右键点击 toggleColorScheme，然后选择 Restart frame。

在调试期间重启帧

Chromium 问题：1303521

“录音机”面板中的慢动作重放选项

现在，您可以以较慢的速度（慢速、极慢和极其缓慢）重放用户体验历程。通过这些选项，您可以更好地观察屏幕上每个步骤的回放。

打开录音机面板，然后开始录制新内容。录制完成后，点击 Replay 下拉按钮。选择速度以开始重放。

“录音机”面板中的慢动作重放选项

Chromium 问题：1306756

为“记录器”面板构建扩展程序

现在，您可以构建或安装 Chrome 扩展程序，以便以您喜欢的格式导出重玩脚本。如需了解如何构建此类扩展程序，请参阅 Recorder 扩展程序 API 文档。

如需安装演示扩展程序，请按照文档中列出的这些步骤操作。

“Recorder”面板的自定义扩展程序

Chromium 问题：1325751

在“Sources”面板中按“已编写”/“已部署”对文件进行分组

启用新的按作者 / 部署时间对文件进行分组选项，以便在“来源”面板中整理文件。使用框架（例如 React、Angular）开发 Web 应用时，由于构建工具（例如 Webpack、Vite）生成的文件经过了缩减，因此很难浏览源文件。

借助此复选框，您可以将文件分为 2 类，以便更快地搜索文件：

  • 已授权。类似于您在 IDE 中查看的源文件。DevTools 会根据源映射（由构建工具提供）生成这些文件。
  • 已部署。浏览器读取的实际文件。通常，这些文件会经过缩减。

您可以通过此 React 演示自行试用！

在“Sources”面板中按“已编写”/“已部署”对文件进行分组

Chromium 问题：960909

“性能数据分析”面板中的“新用户时间”轨迹

在效果分析面板中，使用新的用户时间轨道直观呈现录制内容中的 performance.measure() 标记。

例如，此网页使用 performance.measure() 方法计算文本加载所用的时间。

当您开始衡量网页加载时间时，录制内容中会显示用户时间轨道。点击“时间安排”项目，在侧边窗格中查看其详细信息。

“性能数据分析”面板中的“用户计时”轨迹

Chromium 问题：1322808

显示元素的分配槽

元素面板中的插槽元素带有新的 slot 标记。在调试布局问题时，您可以使用此功能更快地确定影响节点布局的元素。

此示例包含一些包含命名槽卡片。检查卡片的 person-occupation 槽，点击旁边的 slot 标记即可显示其分配的槽。

了解如何使用 <template> 和 <slot> 元素创建灵活的模板，以便用于填充网络组件的 shadow DOM。

显示元素的分配槽

Chromium 问题：1018906

针对性能记录模拟硬件并发

借助性能面板中的新硬件并发设置，开发者可以配置 navigator.hardwareConcurrency 报告的值。

某些应用使用 navigator.hardwareConcurrency 来控制其应用的并行度，例如控制 Emscripten pthread 池大小。借助此功能，开发者可以使用不同的核心数量测试应用性能。

针对性能记录模拟硬件并发

Chromium 问题：1297439

在自动补全 CSS 变量时预览非颜色值

现在，在自动补全 CSS 变量时，DevTools 会使用有意义的值填充非颜色变量，以便您预览该值对节点会产生哪些变化。

在自动补全 CSS 变量时预览非颜色值

Chromium 问题：1285091

在“往返缓存”窗格中识别阻塞帧

应用面板中的前进/返回缓存窗格新增了帧部分，可帮助您找出可能导致网页不符合 bfcache 使用条件的阻塞帧。

在“往返缓存”窗格中识别阻塞帧

Chromium 问题：1288158

改进了 JavaScript 对象的自动补全建议

JavaScript 对象属性的自动补全功能现在会按以下顺序显示：

  1. 自己的可枚举属性
  2. 自己的不可枚举属性
  3. 继承的枚举属性
  4. 继承的不可枚举属性

以前，开发者会发现更难找到相关属性，因为建议仅优先显示自有属性，而不是继承的属性，并且所有继承的属性都具有相同的优先级。

改进了 JavaScript 对象的自动补全建议

Chromium 问题：1299241

改进了源映射

以下是一些源代码映射修复程序，可改善整体调试体验：

  • 断点现在适用于带有 source网址 注解的内嵌 <script>。
  • 现在，调试程序会使用源映射解析 Scope 视图中的块级范围变量。解析块级作用域的变量
  • 现在，调试程序会使用源映射在作用域视图中解析箭头函数中的变量。解析箭头函数中的变量

Chromium 问题：1329113、1322115

其他亮点

以下是此版本中的一些值得注意的修复：

  • 修复了来源面板的自动补全设置。以前，即使该设置处于停用状态，自动补全功能也始终处于开启状态。(1323286)
  • 更新了应用面板中的清单标签页，以解析最新的配色方案格式。(1318305)
  • 改进了性能数据分析面板中针对 <script async> 呈现阻塞问题的建议。以前，即使脚本已标记为异步，DevTools 也会建议使用 add async attribute to the script tag。(1334096)
  • 效果分析面板现在会检测 iframe 是否为布局偏移的潜在原因。您可以在详细信息窗格中查看 iframe 详情。(1328873)
  • 在“命令”菜单中打开文件时，作者编写的文件（由源映射生成的文件）现在的排名更高，因此会显示在同名已部署脚本上方。(1312929)

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

开发者工具新变化系列中涵盖的所有内容的列表。