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

Jecelyn Yeen

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

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

打开此演示。启用 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 错误：1334585

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

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

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

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

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

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

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

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

Chromium 错误：1323199

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

通过 Automatically add known third-party scripts to ignore list 设置，调用堆栈现在仅显示与您的代码相关的帧。

打开此演示，然后在 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

“Performance”面板中的新互动跟踪

使用效果面板中新的互动跟踪，直观了解互动情况并跟踪潜在的响应速度问题。

例如，您可以在此演示页面上开始录制性能视频。点击咖啡并停止录制。互动次数轨道中会显示两次互动。这两种互动具有相同的 ID，表示这些互动是由同一用户互动触发的。

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

Chromium 错误：1347390

“Performance Insights”面板中的 LCP 时间明细

Performance Insights 面板现在显示 Largest Contentful Paint (LCP) 的时间细分数据。您可以利用这些时间信息了解和发掘提升 LCP 性能的机会。

“Performance Insights”面板中的 LCP 时间明细

Chromium bug：1351735

在“Recorder”面板中为录制内容自动生成默认名称

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

“Recorder”面板中的录制内容的默认名称

Chromium 错误：1351383

其他亮点

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59