Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Latest commit

 

History

History
143 lines (97 loc) · 11.2 KB

index.md

File metadata and controls

143 lines (97 loc) · 11.2 KB
Raw
layout title authors date updated description hero alt tags
layouts/blog-post.njk
DevTools 新功能（Chrome 101）
jecelynyeen
2022-04-12
2022-04-12
导入以及导出用户流程为 JSON 文件、支持 hwb() colors 函数、样式边栏查看级联层以及更多。
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/e9bxQMW3fZ7eWHLceqqz.jpg
new-in-devtools
devtools
chrome-101

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

{% Partial 'devtools/banner.md' %}

{% YouTube id='u9GRAliBrM8' %}

导入以及导出用户流程为 JSON 文件 {: #recorder }

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

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

{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/Jy7NEDZs6XJb90EWqETj.mp4", class="screenshot", autoplay=true, controls=true, loop=true, muted=true %}

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

  • 导出为 JSON 文件。下载的记录为一个 JSON 文件。
  • 导出为 Puppeteer 脚本。下载的记录为一段 Puppeteer 脚本。

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/mcbKR5hpCNXUmdGp4UDP.png", alt="Recorder 面板中的导出选项", width="800", height="556" %}

Chromium 议题: 1257499

样式边栏查看级联层 {: #layer }

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

在这个示例里面，定义了 3 个级联层（Cascade layers）：page、component 和 base。在样式边栏那里，您可以查看每个层以及层里面所包含的样式。

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/A0yHsGUcqVCIO3fzKhEz.png", alt="样式边栏查看级联层", width="800", height="490" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/52f5be82ff6ba59343ba65ab7d8e215e46d44d3b #}

Chromium 议题: 1240596

支持 hwb() 颜色函数 {: #hwb }

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

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

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/jW7PXLu6Q5myiKLrsoD3.png", alt="hwb() 颜色函数", width="800", height="508" %}

改进私有属性的显示问题 {: #private-props }

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/LKir8oYFgNvRZSXMhXa7.png", alt="控制台中的私有属性", width="800", height="498" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/78b2ae5c5baa825c88917098ef57b595d3c94aa0 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/fdc72aa79313d8ec9e7a04461588bcc27aae1535 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/3d369648ae956e799f7337e798bf3453f1c4c440 #}

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

其他的更新 {: #misc }

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

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

[实验阶段] Lighthouse 面板新增 timespan 和快照模式 {: #lighthouse }

{% Aside %}

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

除了现有的导航模式，Lighthouse 面板现在支持两种新模式，用于评估用户流程 - timespan 和 snapshot。

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

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/loe3f6KaR9UdYe57oQ7r.png", alt="Lighthouse 面板新增 timespan 和快照模式", width="800", height="488" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/4d17e989f0f5bad0f9d4d5badff16fd6da09ae33 #}

Chromium 议题: 772558

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}