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

Jecelyn Yeen

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

Group files by Authored / Deployed 现在显示在三点状菜单下。以前，它直接显示在导航窗格中。

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

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

Chromium bug：1352488

改进了堆栈轨迹

异步操作的关联堆栈轨迹

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

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

// application.component.ts

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

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

通过最新更改，开发者工具现在会显示从按钮组件中的 onClick 事件、increment 函数和超时操作开始的操作。

异步操作的关联堆栈轨迹

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

听起来很复杂吗？当然不是。在大多数情况下，您使用的框架会处理调度和异步执行。在这种情况下，由框架使用 API，您无需为此担心。（例如，Angular 实现了这些更改）

Chromium bug：1334585

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

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

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

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

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

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

您可以选择停用此设置，方法是依次选择设置 > 忽略列表 > 自动将已知的第三方脚本添加到忽略列表。

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

Chromium bug：1323199

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

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

打开此演示，并在 app.component.ts 中的 increment() 函数处设置一个断点。点击页面上的递增按钮以触发断点。调用堆栈仅显示代码中的帧（例如 app.component.ts 和 button.component.ts）。

如需查看所有帧，请启用显示已列入忽略列表的帧。以前，DevTools 在默认情况下显示所有帧。

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

Chromium bug：1352488

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

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

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

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

Chromium bug：1352488

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

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

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

Chromium bug：1336604

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

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

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

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

Chromium bug：1347390

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

Performance Insights 面板现在会显示 Largest Contentful Paint (LCP) 的时间细分。请参考这些耗时信息，了解并找出提升 LCP 性能的机会。

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

Chromium bug：1351735

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

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

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

Chromium bug：1351383

其他亮点

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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