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

Jecelyn Yeen

在调试期间重启帧

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

在此示例中，调试器最初在 toggleColorScheme 函数末尾附近的断点（第 343 行）处暂停。如需从 toggleColorScheme 函数的开头重新开始调试，请展开调试器窗格中的调用堆栈部分，右键点击 toggleColorScheme，然后选择重新启动帧。

Chromium 问题：1303521

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

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

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

Chromium 问题：1306756

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

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

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

Chromium 问题：1325751

在“来源”面板中按“已编写”/“已部署”将文件分组

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

选中此复选框后，您可以将文件分为 2 个类别，以便更快地搜索文件：

• 已创作。与您在 IDE 中查看的源文件类似。DevTools 会根据源代码映射（由构建工具提供）生成这些文件。
• 已部署。浏览器读取的实际文件。这些文件通常经过了精简。

不妨通过此 React 演示自行尝试一下！

Chromium 问题：960909

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

通过效果洞见面板中的新用户时间轨道，直观呈现录制内容中的 performance.measure() 标记。

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

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

Chromium 问题：1322808

显示元素的分配槽

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

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

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

Chromium 问题：1018906

模拟性能记录的硬件并发

性能面板中的新硬件并发设置允许开发者配置 navigator.hardwareConcurrency 报告的值。

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

Chromium 问题：1297439

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

在自动补全 CSS 变量时，开发者工具现在会使用有意义的值填充非颜色变量，以便您可以预览该值会对节点产生何种变化。

Chromium 问题：1285091

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

应用面板中的后退/前进缓存窗格新增了框架部分，可帮助您识别可能导致网页不符合 bfcache 条件的阻塞框架。

Chromium 问题：1288158

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

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

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

以前，开发者很难找到相关属性，因为建议仅优先考虑自有属性而非继承属性，并且所有继承属性的优先级都相同。

Chromium 问题：1299241

改进了源映射

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

• 断点现在可在内嵌 <script> 中使用，并带有 source网址 注释。
• 调试器现在可在 Scope 视图中使用源映射来解析块作用域变量。
• 调试器现在可以在 Scope 视图中使用源映射来解析箭头函数中的变量。

Chromium 问题：1329113、1322115

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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