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

Jecelyn Yeen

在“Sources”面板中按“Authored / Deployed”将文件分组

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

打开此演示。启用按已编写 / 已部署的文件分组设置，以便首先查看原始源代码（已编写），并更快地导航到它们。

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

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）。

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

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

Chromium bug：1352488

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

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

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

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

Chromium bug：1352488

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

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

在命令菜单中隐藏被忽略的文件

Chromium bug：1336604

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

您可以使用效果面板中新的互动次数跟踪来直观呈现互动并跟踪潜在的响应问题。

例如，在此演示页面中开始录制效果。点击一杯咖啡，停止记录。Interactions 轨道中会显示两次互动。两次互动具有相同的 ID，表示互动是由同一次用户互动触发。

“效果”面板中的互动跟踪

Chromium bug：1347390

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

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

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

Chromium bug：1351735

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

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

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

Chromium bug：1351383

其他亮点

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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