DevTools 新功能(Chrome 106)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢 Yoong Sin Yi (Louis) 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

在 Sources 面板中按照 Authored / Deployed 对文件进行分组

现在 已创作/ 已部署 (Authored / Deployed) 选项将显示在三点式菜单下。 以前,它是显示在导航边栏上。

打开这个 [演示] (https://ng-devtools.netlify.app/)。 启用已创作/已部署分组的设置,以便首先查看你的原始源代码(已创作)并更快地浏览它们。

已创作 / 已部署

Chromium 议题: 1352488

改进堆栈痕迹

异步操作的链接堆栈痕迹

当进行某些操作被安排为异步发生时,DevTools 中的堆栈跟踪现在可以讲述操作的“完整故事”。相对起以前,它只讲述了故事的一部分。

例如,打开这个演示,点击增量按钮。展开控制台中的错误信息。在我们的源代码中,该操作包括一个异步超时操作。

// application.component.ts

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

}

相对以前,堆栈跟踪只显示超时操作。它没有显示该操作的“根本原因”。

随着最新的变化,DevTools 现在显示操作源于按钮组件中的 onClick 事件,然后是 increment 函数,接着是超时操作。

异步操作的链接堆栈跟踪

在幕后,DevTools 引入了一个新的 "异步堆栈标签" 功能。您可以通过新的console.createTask()方法将异步代码的两部分联系在一起,来讲述操作的整个故事。参阅 DevTools 中的现代调试以了解更多。

这听起来很复杂吗?一点也不。大多数情况下,您所使用的框架会处理调度和异步执行。在这种情况下,要由框架来实现 API,您不需要担心这个问题。(例如 Angular 实现了这些变化)

Chromium 议题: 1334585

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

在调试过程中更快地识别代码中的问题,因为 DevTools 现在会自动将已知的第三方脚本添加到忽略列表中。

打开这个演示,点击增量按钮。在 Console 中展开错误信息。堆栈跟踪只显示您的代码(例如:app.component.ts button.component.ts)。点击显示更多的框架来查看完整的堆栈跟踪。

自动忽略堆栈跟踪中的已知第三方脚本

相对以前,堆栈跟踪包括第三方脚本,如zone.jscore.mjs。这些不是您的源代码,它们是由捆绑器(如 webpack)或框架(如 Angular)生成的。需要花费较长的时间来确定错误的根本原因。

自动忽略堆栈跟踪中的已知第三方脚本

在幕后,DevTools 根据 sourcemaps 中新的x_google_ignoreList属性来忽略第三方脚本。框架和捆绑器需要提供这一信息。参见[案例研究:用 DevTools 进行更好的 Angular 调试](/blog/devtools-better-angular-debugging/#x_google_ignorelist-in-angular)。

另外,如果您喜欢总是查看完整的堆栈跟踪,您可以通过设置 > 忽略列表 > 自动添加已知的第三方脚本到忽略列表来禁用该设置。

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

Chromium 议题: 1323199

在调试过程中改进调用堆栈

通过自动添加已知的第三方脚本到忽略列表设置,现在调用栈只显示与你的代码相关的堆栈帧。

打开这个 [demo] (https://ng-devtools.netlify.app/),在app.component.ts中的increment()函数处设置一个断点。点击页面上的increment按钮来触发断点。调用堆栈只显示您的代码中的框架(例如,app.component.tsbutton.component.ts)。

要查看所有的框架,请启用显示被忽略的堆栈帧。对比以前,DevTools 默认显示所有堆栈帧。

调试期间改进的调用堆栈

Chromium 议题: 1352488

在来源面板中隐藏被忽略的来源

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

打开这个演示。在资源面板上。node_moduleswebpack是第三方脚本。点击3点菜单,选择 hide ignore-listed sources,将它们从窗格中隐藏。

面板中隐藏忽略列出的资源

Chromium 议题: 1352488

通过 hide ignore-listed sources 设置,您可以使用 Command Menu 更快地找到您的文件。 在以前,Command Menu 中搜索文件会返回可能与您无关的第三方文件。

例如,启用 hide ignore-listed sources 设置,并点击三点式菜单。选择打开文件。输入 “ton” 来搜索按钮组件。以前的情况,结果包括了来自node_modules的文件,其中一个node_modules的文件甚至显示为第一个结果。

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

Chromium 议题: 1336604

性能面板中的新互动轨道

使用性能面板中新的互动轨道来可视化互动并追踪潜在的响应性问题。

例如,在这个演示页开始表演录制。点击咖啡,停止录制。两个交互显示在交互轨道中。两个互动都有相同的 ID,表明这些互动是由同一个用户互动触发的。

性能面板中的交互跟踪

Chromium 议题: 1347390

性能洞察面板中的LCP时序分解

性能洞察面板现在显示了时间表分类中的Largest Containful Paint (LCP)。 并使用这些时间信息来了解和提高 LCP 性能的机会。

Performance Insights 面板中的 LCP 计时细分

Chromium 议题: 1351735

在 Recorder 面板中自动生成录音的默认名称

Recorder 面板将会自动为新录音生成一个名称。

Recorder 面板中录音的默认名称

Chromium 议题: 1351383

其他的更新

  • 之前,[Recorder 扩展] (/docs/devtools/recorder/reference/#extension-troubleshooting)不时会在 Recorder 面板上不被显示出来。
  • 样式边栏现在显示 SVG <stop> 元素的 stop-color 属性显示一个颜色选择器。(1351096)
  • Performance Insights 面板中,识别导致布局的脚本是布局转变的潜在根源。(1343019)
  • Performance Insights 面板中显示 LCP 网页字体的关键路径。 (1350390)

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Updated on 改进文章

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.