此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

调试期间重启帧

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

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

调试期间重启帧

Chromium 问题：1303521

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

现在，您可以更慢（慢、很慢和极慢）重放用户流。通过这些选项，您可以更好地观察屏幕上发生的每个步骤的重放。

打开 Recorder 面板并开始新的录音。录制完成后，点击重放下拉按钮。选择一个速度以开始重放。

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

Chromium 问题：1306756

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

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

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

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

Chromium 问题：1325751

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

在“来源”面板中启用新的按作者 / 已部署方式对文件分组选项来整理文件。使用框架（例如 React、Angular）开发 Web 应用时，可能难以浏览源文件，因为构建工具（例如 Webpack、Vite）生成的文件会缩减。

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

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

欢迎观看此 React 演示，亲自体验！

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

Chromium 问题：960909

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

使用 Performance Insights 面板中新增的 User Timings 轨道直观呈现记录中的 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 变量时，开发者工具现在会使用有意义的值填充非颜色变量，以便您可以预览该值将在节点上发生的更改类型。

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

Chromium 问题：1285091

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

应用面板中的往返缓存窗格新增了帧部分，可帮助您找出哪些阻塞帧可能会使网页不符合 bfcache 资格条件。

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

Chromium 问题：1288158

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

JavaScript 对象属性的自动填充现在按以下顺序显示：

拥有可枚举的属性
拥有非枚举属性
继承的可枚举属性
继承的非枚举属性

以前，开发者发现查找相关属性比较困难，因为建议只优先考虑自身属性而非继承属性，并且所有继承属性的优先级相同。

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

Chromium 问题：1299241

源代码映射改进

为提升整体调试体验，我们对源代码映射进行了以下修复：

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

Chromium 问题：1329113、1322115

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。