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

Jecelyn Yeen

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

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

打开此演示。启用按已创作 / 已部署对文件进行分组设置，以便先查看原始源代码（已创作），并更快地找到它们。

Chromium bug：1352488

改进了堆栈轨迹

异步操作的关联堆栈轨迹

当某些操作被安排为异步执行时，开发者工具中的堆栈轨迹现在可以完整呈现操作的“来龙去脉”。以前，它只能提供部分信息。

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

// application.component.ts

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

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

根据最新更改，开发者工具现在会显示操作源自按钮组件中的 onClick 事件，然后是 increment 函数，最后是超时操作。

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

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

Chromium bug：1334585

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

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

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

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

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

或者，如果您希望始终查看完整的堆栈轨迹，可以通过依次选择设置 > 忽略列表 > 自动将已知的第三方脚本添加到忽略列表来停用此设置。

Chromium bug：1323199

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

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

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

如需查看所有帧，请启用显示已列入忽略列表的帧。以前，开发者工具默认显示所有帧。

Chromium bug：1352488

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

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

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

Chromium bug：1352488

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

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

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

Chromium bug：1336604

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

使用效果面板中的新互动轨迹，直观呈现互动情况并找出潜在的响应问题。

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

Chromium bug：1347390

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

性能分析面板现在会显示最大内容渲染时间 (LCP) 的时间分解。您可以利用这些时间信息来了解并发现提升 LCP 性能的机会。

Chromium bug：1351735

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

“录制器”面板现在会自动为新录制的内容生成名称。

Chromium bug：1351383

其他亮点

• 之前，记录器扩展程序有时不会显示在记录器面板中。(1351416)
• 样式窗格现在会显示 SVG <stop> 元素的 stop-color 属性的颜色选择器。(1351096)
• 在性能分析面板中，将导致布局抖动的脚本确定为布局偏移的潜在根本原因。(1343019)
• 在性能数据分析面板中显示 LCP Web 字体的关键路径。(1350390)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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