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

调试期间重启帧

重启帧功能恢复正常!当您在函数中的某个位置暂停时,可以重新运行前面的代码。之前,由于稳定性问题,此功能已在 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 问题:13291131322115

其他亮点

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

  • 修复了 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 视频发表评论。

开发者工具的新变化

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