开发者工具中的新功能 (Chrome 106)

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

按“已编写”/“已部署”将文件分组现在显示在三点状菜单下。以前,它会直接显示在导航窗格中。

打开此演示。启用按“已授权”/“已部署”分组文件设置,以便先查看原始源代码(已授权),并更快地导航到这些代码。

按“已编写”/“已部署”将文件分组

Chromium bug:1352488

改进了堆栈轨迹

异步操作的链接堆栈轨迹

当某些操作被安排以异步方式执行时,DevTools 中的堆栈轨迹现在会显示操作的“完整故事”。以前,它只能提供片面的数据。

例如,打开此演示,然后点击递增按钮。在 Console 中展开错误消息。在源代码中,该操作包含异步 timeout 操作。

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

以前,堆栈轨迹仅显示超时操作。它未显示操作的“根本原因”。

在最新更改后,DevTools 现在会显示操作源自按钮组件中的 onClick 事件,然后是 increment 函数,最后是超时操作。

异步操作的链接堆栈轨迹

在后台,DevTools 引入了一项新的“异步堆栈标记”功能。您可以使用新的 console.createTask() 方法将异步代码的两个部分关联起来,以便了解操作的整个过程。如需了解详情,请参阅 DevTools 中的新型调试

听起来很复杂吗?当然不是。在大多数情况下,您使用的框架会处理调度和异步执行。在这种情况下,使用 API 取决于框架,您无需担心。(例如,Angular 实现了这些更改

Chromium bug:1334585

自动忽略已知的第三方脚本

现在,开发者工具会自动将已知的第三方脚本添加到忽略列表,因此您可以在调试期间更快地发现代码中的问题。

打开此演示,然后点击递增按钮。在 Console 中展开错误消息。堆栈轨迹仅显示您的代码(例如 app.component.ts button.component.ts)。点击展开显示更多帧可查看完整的堆栈轨迹。

以前,堆栈轨迹包含 zone.jscore.mjs 等第三方脚本。这些文件不是您的源代码,而是由捆绑器(例如 webpack)或框架(例如 Angular)生成的。确定错误的根本原因需要更长的时间。

自动忽略堆栈轨迹中的已知第三方脚本

在后台,DevTools 会根据来源映射中的新 x_google_ignoreList 属性忽略第三方脚本。框架和捆绑程序需要提供此信息。请参阅案例研究:使用 DevTools 更好地调试 Angular

您还可以选择始终查看完整堆栈轨迹,只需依次选择设置 > 忽略列表 > 自动将已知的第三方脚本添加到忽略列表即可停用此设置。

自动将已知的第三方脚本添加到忽略列表的设置

Chromium bug:1323199

改进了调试期间的调用堆栈

启用自动将已知的第三方脚本添加到忽略列表设置后,调用堆栈现在仅显示与您的代码相关的帧。

打开此演示,然后在 app.component.ts 中的 increment() 函数上设置断点。点击页面上的递增按钮以触发断点。调用堆栈仅显示代码中的帧(例如 app.component.tsbutton.component.ts)。

如需查看所有帧,请启用显示已列入忽略列表的帧。以前,DevTools 默认会显示所有帧。

改进了调试期间的调用堆栈

Chromium bug:1352488

在“来源”面板中隐藏已列入忽略列表的来源

启用隐藏已列入忽略列表的来源,即可在导航窗格中隐藏不相关的文件。这样,您就可以专注于代码。

打开此演示。在 Sources 面板中,node_moduleswebpack 是第三方脚本。点击三点状菜单,然后选择隐藏列入忽略列表的来源,即可将其从窗格中隐藏。

在“来源”面板中隐藏已列入忽略列表的来源

Chromium bug:1352488

通过隐藏列入忽略列表的来源设置,您可以使用命令菜单更快地找到文件。以前,在命令菜单中搜索文件时,系统会返回可能与您无关的第三方文件。

例如,启用隐藏列入忽略列表的来源设置,然后点击三点状菜单。选择打开文件。输入“ton”以搜索按钮组件。之前,结果包含 node_modules 中的文件,其中一个 node_modules 文件甚至显示为第一个结果。

在命令菜单中隐藏已列入忽略列表的文件

Chromium bug:1336604

“效果”面板中新增了“互动”轨道

使用效果面板中的新版互动轨道直观呈现互动情况,并跟踪潜在的响应能力问题。

例如,在此演示页面开始性能记录。点击一杯咖啡,然后停止录制。互动轨道中显示了两次互动。这两次互动具有相同的 ID,表明这两次互动是从同一用户互动触发的。

“效果”面板中的“互动”轨迹

Chromium bug:1347390

“性能数据分析”面板中的 LCP 时间细分

性能分析面板现在会显示 Largest Contentful Paint (LCP)时间细分。您可以利用这些时间信息来了解并找出提升 LCP 效果的机会。

“性能数据分析”面板中的 LCP 时间细分

Chromium bug:1351735

在“录音机”面板中为录音自动生成默认名称

录音机面板现在会自动为新录音生成名称。

“录音机”面板中录音的默认名称

Chromium bug:1351383

其他亮点

  • 以前,录制器扩展程序有时不会显示在录制器面板中。(1351416)
  • Styles 窗格现在会显示 SVG <stop> 元素的 stop-color 属性的颜色选择器。(1351096)
  • 效果分析面板中,找出导致布局抖动的脚本,这些脚本可能是导致布局偏移的潜在根本原因。(1343019)
  • 性能数据分析面板中显示 LCP 网页字体的关键路径。(1350390)

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。