DevTools 新功能(Chrome 104)

Published on Updated on

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

感谢 Jim Lim @xyugroup 提供的翻译

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

在调试时进行帧重启

帧重启 功能回归了! 您可以在调试时的函数中途从头开始重启当前代码行之前的代码。这个功能曾经因为稳定性问题在 Chrome 92 版本被弃用。

在这个 例子, 调试器暂停在这个靠近toggleColorScheme函数尾端的断点(343 行) 。 在函数 toggleColorScheme开始处重启调试器, 扩展在调试器面板中的 调用 部分, 在toggleColorScheme上右点击并选取帧重启

在调试时进行帧重启

Chromium 议题: 1303521

录制面板中的慢速重播选项

您现在可以对用户流程进行慢速重播 - 慢、很慢和极慢. 这些选项使您能在屏幕上更加详细地观察到每一个重播的步骤。

打开 录制 面板,然后开始一个新的录制。 录制完成后,在重播的下拉按钮上点击, 选择一个速率来进行重播流程。

录制面板上的慢速重播选项

Chromium 议题: 1306756

为录制面板创建 extension

您可以创建或安装一个Chrome扩展来使用您喜爱的格式来导出重播脚本。 看 录制扩展应用程序界面API 文档来学习如何自己创建一个Extension。

按照这些步骤 安装一个演示扩展。

为录制面板客制化扩展

Chromium 议题: 1325751

使用面板中的已编写/已部署来进行分组

启用新的已编写/已部署来进行分组以组织您的源面板中的文件。当使用框架(例如, React, Angular)来开发网络应用程序, 在浏览源文件的时候会非常困难,那是因为由构建工具(例如, Webpack, Vite)所产生的缩图造成的。

使用这个复选框, 您可以将文件分组成两个类别以进行快速搜索:

  • 已编写 (Authored). 类似您在集成开发环境(IDE)中的源文件。 DevTools 根据您的源图产生这些文件 (由您的构建工具DevTools所提供).
  • 已部署(Deployed) - 浏览器读取的真正文件。 通常这些是已压缩的文件。

您可以自己做一个尝试,用这个链接 React demo!

使用源面板中的已编写/已部署进行分组

Chromium 议题: 960909

Performance insights 面板新增了用户计时轨道

您现在可以透过 Performance insights 面板新增的用户计时轨道来查看您 performance recording 的 performance.measure() 标记。

例如, 这个 网页 使用 performance.measure()方法进行文字载入耗时的计算。

当您开始 测量页面载入, 用户计时 追踪显示在录制中。在旁侧面板中点击计时物件检视计时细节.

Performance insights 面板新增了用户计时轨道

Chromium 议题: 1322808

显示元素的分配槽(slot)

元素面板中的槽原件有一个新的徽章。当调试布局的问题时,使用这个功能快速地确认影响节点布局的元素 .

这个 样本 包含了几个被命名槽的卡片。 检查个人-职业 槽的卡片, 点击 靠近它的徽章以显示他的分配槽。

学习 how to use and 元素分配一个可以用来填充网页组件的影子文件对象模型 (Shadow DOM) 的自由面板。

显示元素的分配槽

Chromium 议题: 1018906

模拟性能录制的硬件并发

性能 面板中的硬件并发新设置让开发者设置由navigator.hardwareConcurrency报告的值。

一些应用程序使用 navigator.hardwareConcurrency来调控他们的应用程序的并行程度, 例如, 调控Emscripten的可移植操作系统接口线程池(PThread)的大小. 使用这个功能, 开发者可以测试他们的应用程序在不同的内核数下的性能。

模拟性能录制的硬件并行

Chromium 议题: 1297439

在自动填充层叠样式表(CSS)时预览非颜色数值的值

当完成自当填充层叠样式表(CSS)变量时, DevTools 可以使用有意义的数值填充非颜色变量,并且让你预览改变后的节点数值。

在自动填充层叠样式表(CSS)时预览非颜色数值的值

Chromium 议题: 1285091

识别退后/前进缓存面板中的阻塞帧

退后/前进缓存 面板中的应用程序 有新的 分部来帮助你识别阻止页面符合bfcache条件的阻塞帧 .

识别退后/前进缓存面板中的阻塞帧

Chromium 议题: 1288158

改良JavaScript对象的自动填充建议

JavaScript对象属性的自动填充现在可以根据这个规律显示:

  1. 拥有可枚举的属性
  2. 拥有不可枚举的属性
  3. 继承的可枚举的属性
  4. 继承的不可枚举的属性

以前,开发者很难找到相关属性, 因为这个建议功能只支持自己的属性而非它的继承属性, 并且所有的继承属性都有自己的优先等级。

JavaScript对象属性的自动填充现在可以根据这个规律显示

Chromium 议题: 1299241

源图优化

以下是列出了几个源图的修复,这些优化改进了整体调试体验:

  • 您现在可以在带有 sourceURL 注释的内联的 <script>脚本中设置断点。
  • 调试器现在可以解析带有源图的范围视图中的块作用域变量。 解析块作用域变量lock scoped variables
  • 调试器现在可以解析带有源图的的范围视图中的块箭头函数的变量. 解析箭头函数中的变量

Chromium 议题: 1329113, 1322115

其他亮点

这里是一些本版本中需要注意的修复:

  • 修复源面板中的自动填充设置。之前, 这个功能的关闭设置是失效的。 (1323286)
  • 更新应用程序面板中的**清单文件(Manifest)**来解析最新的配色方案的格式。 (1318305)
  • 改进了 Performance insights 中的 <script async> 渲染阻塞问题的建议。 之前,既使已经在脚本标注为异步, DevTools 也会建议用户将异步属性添加到脚本标签。 (1334096)
  • 性能洞察面板现在将iframes检测为布局变化的潜在原因。 你可以检看细节面板 中的iframe 细节。 (1328873)
  • 命令菜单打开文件 , 编写文件 (源图产生的文件) 的排名会更加高,因此他们会出现在被相似命名的部署脚本之上。 (1312929)

下载 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 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

Last updated: Improve article

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