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

Jecelyn Yeen

调试期间重启帧

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

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

调试期间重启帧

Chromium 问题：1303521

“Recorder”面板中的慢速重放选项

现在，您可以放慢（慢、非常慢和极慢）重放用户流。借助这些选项，您可以更好地观察屏幕上每个步数的重放。

打开 Recorder 面板，然后开始创建新的录音。录制完成后，点击重放下拉按钮。选择播放速度即可开始重放。

“Recorder”面板中的慢速重放选项

Chromium 问题：1306756

为“Recorder”面板构建扩展程序

现在，您可以构建或安装 Chrome 扩展程序，以自己喜欢的格式导出重放脚本。如需了解如何构建录音机扩展程序 API，请参阅 Recorder 扩展程序 API 文档。

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

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

Chromium 问题：1325751

在“Sources”面板中按“Authored / Deployed”将文件分组

启用新的 Group files by Authored / Deployed 选项，以在“Sources”面板中整理您的文件。使用框架（例如 React、Angular）开发 Web 应用时，由于构建工具（例如 Webpack、Vite）生成的文件缩小，因此很难浏览源文件。

通过该复选框，您可以将文件分为 2 类，以便更快地搜索文件：

  • 已编写。与您在 IDE 中查看的源文件类似。DevTools 会根据源代码映射（由构建工具提供）生成这些文件。
  • 已部署。浏览器读取的实际文件。这些文件通常会缩减大小。

通过此 React 演示亲自尝试一下！

在“Sources”面板中按“Authored / Deployed”将文件分组

Chromium 问题：960909

“效果数据分析”面板中新增的“用户计时”跟踪记录

使用效果数据分析面板中新增的用户计时轨道，直观呈现记录中的 performance.measure() 标记。

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

当您开始衡量网页加载时，记录中会显示用户计时轨道。点击计时项可在侧窗格中查看其详细信息。

“效果数据分析”面板中的“用户计时”跟踪

Chromium 问题：1322808

显示分配给元素的槽位

Elements 面板中的槽位元素具有新的 slot 标记。调试布局问题时，可以使用该功能找出会更快影响节点布局的元素。

此示例包含具有几个已命名插槽的卡片。检查卡的 person-occupation 插槽，点击其旁边的 slot 标志以显示其分配的插槽。

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

显示分配给元素的槽位

Chromium 问题：1018906

为性能记录模拟硬件并发

Performance 面板中新的 Hardware concurrency 设置允许开发者配置 navigator.hardwareConcurrency 报告的值。

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

为性能记录模拟硬件并发

Chromium 问题：1297439

在自动填充 CSS 变量时预览非颜色值

现在，在自动填充 CSS 变量时，开发者工具会用有意义的值填充非颜色变量，以便您预览节点上该值将会发生的变化。

在自动填充 CSS 变量时预览非颜色值

Chromium 问题：1285091

在“往返缓存”窗格中找出阻塞帧

Application 面板中的 Back/forward cache 窗格中新增了 frames 部分，可帮助您识别可能阻止网页符合 bfcache 条件的阻塞帧。

在“往返缓存”窗格中找出阻塞帧

Chromium 问题：1288158

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

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

  1. 拥有可枚举属性
  2. 拥有不可枚举的属性
  3. 继承的可枚举属性
  4. 继承的非枚举属性

之前，开发者发现很难找到相关属性，因为建议仅优先考虑自己的属性而不是继承的属性，并且所有继承的属性都被赋予相同的优先级。

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

Chromium 问题：1299241

源代码映射改进

以下是针对源代码映射的一些修复，以改善整体调试体验：

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

Chromium 问题：1329113、1322115

其他亮点

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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