DevTools 新功能(Chrome 98)

Published on Updated on

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

感谢 阮贝琪 @jecelynyeen韩昌浩 @hanselfmu 提供的翻译

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

预览功能:整页无障碍功能树

新的整页无障碍功能树让您更轻松地概览您整个网页的无障碍功能树结构,并帮助您了解您网页内容在辅助技术(例如:屏幕阅读器)下的展示。

元素面板中,打开无障碍功能边栏并选中启用整页模式的无障碍功能树复选框。然后,重新加载 DevTools,您将在元素面板中看到一个新的无障碍功能树按钮。

单击该按钮以切换到无障碍功能树视图。您可以展开元素节点或单击元素,从而在无障碍功能边栏中查看详细信息。

此前,无障碍功能边栏中的无障碍功能树只能提供局部的视图,它只能让您探索单个元素节点及其祖先元素。

我们的团队仍在积极开发这项预览功能。期待您的反馈以帮助我们进一步改进!

整页无障碍功能树

Chromium 议题:887173

在变更标签页中显示更精确的更改

现在,变更标签页中的代码变更会被自动美观输出(pretty-print)。

此前,开发者们很难在变更标签页中跟踪压缩(minified)代码的实际变化,因为所有代码都挤在一行。

变更标签页

Chromium 议题:123881812687541086491

为用户操作流的录制设置更长的超时时间

您现在可以在录制器中为所有步骤或特定步骤调整超时设置。这对于网络请求缓慢且动画冗长的页面尤其有用。

例如,我在这个演示页录制用户加载并点击菜单项的操作。但是,菜单项的加载速度很慢(需要6秒)。这次用户操作的重放会因此失败,因为它超过了默认的5秒超时。

我们可以使用新的超时设置来解决这个问题。展开我们点击菜单项的步骤。编辑步骤添加超时,并将其设置为6000毫秒(等于6秒)。

另外,您可以在重放设置中为所有步骤调整超时。展开重放设置并编辑超时数值。

用户操作录制的超时设置

Chromium 议题:1257499

使用“往返缓存”选项卡确保您的页面可缓存

往返缓存(或 bfcache) 是一种浏览器优化,可提供即时的后退和前进导航。

新的往返缓存标签页可以帮助您测试您的页面,以确保它们针对 bfcache 进行了优化,并指出任何可能阻止它们符合 bfcache 条件的问题。

要测试某一页面,请在 Chrome 中导航到该页面,然后在 DevTools 中进入应用 > 往返缓存。接下来,单击测试往返缓存按钮,DevTools 将尝试导航离开当前页面并返回,以确定该页面是否可以从 bfcache 中恢复。

作为 Web 开发人员,了解如何在所有浏览器中针对 bfcache 进行页面优化至关重要,因为它将显著改善用户的浏览体验——尤其是那些网络或设备较慢的用户。

往返缓存标签页

Chromium 议题:1110752

新的属性边栏过滤器

如果您想持续关注属性边栏中的某一个特定属性,您现在可以在新的过滤文本框中输入该属性的名字或值。

默认情况下,属性值为 nullundefined 的属性是被隐藏的。启用全部显示复选框可以查看所有的属性。

这些改进使您可以更快地看到您关注的属性,从而提高您的效率!

属性边栏过滤

Chromium 议题:1269674

模拟 CSS forced-colors 媒体功能

forced-colors CSS 媒体功能用于检测用户代理是否启用了强制颜色(forced-colors)模式(例如 Windows 高对比度模式),这种模式会基于用户选择的颜色来展示页面。

打开命令菜单,运行显示“渲染”工具命令,然后设置模拟 CSS 媒体功能 force-colors 下拉菜单。

CSS forced-colors 媒体功能

Chromium 议题:1130859

在鼠标指针悬停时显示标尺

您现在可以打开命令菜单并运行在鼠标指针悬停时显示标尺的命令。页面标尺可以让您更轻松地测量一个元素的宽度和高度。

以前,您只能通过设置 > 显示标尺复选框启用页面标尺。

在鼠标指针悬停时显示标尺

Chromium 议题:1270562

在 Flexbox 编辑器中支持 row-reversecolumn-reverse

Flexbox 编辑器添加了两个新按钮以支持 flex-direction 中的 row-reversecolumn-reverse

Flexbox 编辑器

Chromium 议题:1263866

新增“重放 XHR “和“扩展所有搜索结果”的键盘快捷键

在网络面板中“重放 XHR ”的键盘快捷键

网络面板中选择一个 XHR 请求,然后按键盘上的 R 以重放 XHR。之前,您只能通过上下文菜单重放 XHR(右键单击 > 重放 XHR

重放 XHR

Chromium 议题: 1050021

用于展开所有搜索结果的键盘快捷键

搜索选项卡中添加了一个新的键盘快捷键,允许您展开和折叠所有搜索结果。之前,您只能通过一次单击一个文件来展开和折叠搜索结果。

通过 Esc > 3点妆 菜单 > 搜索打开搜索选项卡。输入搜索字符串(例如函数)并按 Enter 以查看搜索结果列表。关注搜索结果并使用以下快捷方式展开/折叠搜索文件:

  • Windows / Linux - Ctrl + Shift + { or }
  • MacOS - Cmd + Options + { or }

前往 keyboard shortcuts 文档以参考 Chrome DevTools 中的键盘快捷键。

Chromium 议题: 1255073

Lighthouse 面板中的 Lighthouse 9

Lighthouse 面板现在已运行 Lighthouse 9。Lighthouse 现在将列出所有共享相同 id 的元素。

重叠元素 id 是一个常见的无障碍(accessibility)问题。例如,aria-labelledby 属性中的 id 用于多个元素

更多的 Lighthouse 更新细节,请参考 What’s new in Lighthouse 9.0

Lighthouse 的“所有可聚焦元素必须具有没重叠的 `id`”的审核 。画面显示两个元素,都具有相同的 `id`

Chromium 议题: 772558

源代码面板的改善

DevTools 升级使用 CodeMirror 6。此升级为源代码面板带来了大量的稳定性改进。以下是其中一些显着的改进:

  • 打开大文件(例如 WASM、JavaScript)时速度显着加快
  • 单步执行代码时不再随机滚动
  • 改进了源码的自动完成建议(例如代码段、local override)

Chromium 议题: 1241848

其他的更新

这些是此版本中一些值得注意的修复:

  • 修复网络请求的瀑布图。(1275501)
  • 修复在源代码面板中搜索具有很长行的文档时,无法高亮代码的问题。(1275496)
  • 网络请求中不再显示重复的 Payload 选项卡。 (1273972)
  • 修复了性能面板的摘要部分中缺少的布局转换详细信息。 (1259606)
  • 网络搜寻查询中支持任意字符(例如 ,, .)。 (1267196)

[Experimental] 在 Reporting API 窗格中显示端点

要启用实验,请在设置 > 实验下勾选带有在应用面板里面启用 Reporting API 边栏字样的复选框选项。

我们在 Chrome 96 引入了实验阶段的 Reporting API 窗格,以帮助您监控网页的 Reporting API 报告以及状态。

这次我们加入了端点部分。它为您提供了在 Reporting-Endpoints 标头中配置的所有端点的概述。

浏览 Reporting API 文档,以学习如何使用 Reporting API 来监控违规网页,过时的API调用以及更多。

Reporting API 窗格

Chromium 议题: 1200732

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