DevTools 新功能(Chrome 101)

Published on Updated on

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

感谢 流浪大法师 @liuliangsir 提供的翻译

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

导入以及导出用户流程为 JSON 文件

Recorder 面板现在支持导入 JSON 文件形式的用户流程记录以及支持导出用户流程记录为 JSON 文件。这个补充功能的出现,使得分享用户流程的操作变得更加容易,而且还能够有助于 bug 的报告。

例如,下载这个 JSON 文件。您可以使用导入按钮来导入该 JSON 文件,然后重放该用户流程

除了上面所说的导入用户流程记录,您还可以导出这些记录。在录制完用户流程之后,点击导出按钮。会弹出 3 个导出选项:

  • 导出为 JSON 文件。下载的记录为一个 JSON 文件。
  • 导出为 @puppeteer/replay 脚本。下载的记录为一段 [Puppeteer Replay](https://github.com/puppeteer/replay)脚本。
  • 导出为 Puppeteer 脚本。下载的记录为一段 Puppeteer 脚本。

请参考文档以便于了解更多关于这些选项之间的区别。

Recorder 面板中的导出选项

Chromium 议题: 1257499

样式边栏查看级联层

级联层(Cascade layers)允许您显式控制自己的 CSS 文件,从而达到避免样式冲突的目的。这对于大型代码库、设计系统、以及需要在应用中管理第三方样式的情况来说非常有用。

在这个示例里面,定义了 3 个级联层(Cascade layers):pagecomponentbase。在样式边栏那里,您可以查看每个层以及层里面所包含的样式。

点击层名称可以查看层顺序。由于 page 层的权重最高,因此 box 背景是绿色的。

样式边栏查看级联层

Chromium 议题: 1240596

支持 hwb() 颜色函数

您现在可以在 DevTools 那里查看以及编辑 HWB 颜色格式

样式边栏那里,按住 Shift 键,然后点击任意颜色并留意颜色格式的变化。会发现 HWB 颜色格式已经被添加上去。

另外,您也可以在颜色选择器 那里将颜色格式修改为 HWB。

hwb() 颜色函数

改进私有属性的显示问题

DevTools 现在能够正确执行并显示私有属性。在此之前,DevTools 不允许您在控制台以及源码面板里面展开带有私有属性的类。

控制台中的私有属性

Chromium 议题: 1296855, https://crbug.com/1303407

其他的更新

下面列出的是此次更新需要注意的 bug 修复:

  • 修复双击单词以及撤销自动填充所出现的高亮问题。(1298437, 1298667)
  • 源码面板里面,修复注释快捷键问题。(1296535)
  • 源码面板里面,重新启用 Alt (选项) 键的多选功能。(1304070)

[实验阶段] Lighthouse 面板新增 timespan 和快照模式

如果想要开启该实验特性,请在设置 > 实验那里勾选使用 Lighthouse 面板中的 timespan 和 snapshot 模式这个选项。

除了现有的导航模式,Lighthouse 面板现在支持两种新模式,用于评估用户流程 - timespansnapshot

例如,您可以使用 timespan 报告来分析用户交互。打开这个 demo 页面。选择 Timespan 模式,然后点击开始 timespan 按钮。在页面上,点击咖啡杯图案并结束 timespan。读取报告,以便于找出上述交互所产生的 Total Blocking TimeCumulative Layout Shift

每个模式都有属于自己特有的使用场景,优点和限制。请参考 Lighthouse 帮助文档以获取更多信息。

Lighthouse 面板新增 timespan 和快照模式

Chromium 议题: 772558

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