开发者工具中的新功能 (Chrome 98)

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

借助新的整页无障碍功能树,您可以更轻松地大致了解整页无障碍功能树,并更好地了解您的网站内容如何向辅助技术展示。

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

您可以点击该图标切换到整页无障碍功能树视图。您可以展开节点,也可以点击无障碍窗格中的相应内容查看详细信息。

选择一个节点,然后切换回 DOM 树状视图。现在,系统会选择相应的 DOM 节点。这非常有助于了解 DOM 节点与其无障碍树节点之间的映射。这同样适用于 DOM 树 ⬌ 无障碍树视图!

以前,无障碍树位于无障碍窗格中。该视图功能有限,您只能探索单个节点及其祖先节点。

我们的团队仍在积极完善此预览版功能。我们期待收到您的反馈,以便进一步改进!

整页无障碍功能树

Chromium 问题:887173

“更改”标签页中更精确的更改

更改标签页中的代码更改会自动以美化格式显示。

以前,由于所有代码都显示在一行中,因此很难跟踪缩减后的源代码的实际更改。

“更改”标签页

Chromium 问题:123881812687541086491

为用户体验历程记录设置更长的超时时间

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

例如,我在此演示页面录制了用户流程,以加载并点击菜单项。但是,菜单项的加载速度很慢(需要 6 秒)。此用户体验流程的重放失败,因为其超出了 5 秒(默认超时时间)。

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

(可选)您可以在重玩设置中调整所有步骤的超时。展开重放设置,然后修改超时值。

用户体验历程记录的超时设置

Chromium 问题:1257499

使用“往返缓存”标签页确保您的网页可缓存

往返缓存 (bfcache) 是一种浏览器优化,可实现即时返回和前进导航。

新的返回/前进缓存标签页可帮助您测试网页,确保网页已针对 bfcache 进行优化,并找出可能导致其不符合资格条件的任何问题。

如需测试特定网页,请在 Chrome 中前往该网页,然后在开发者工具中依次前往应用 > 往返缓存。接下来,点击测试返回/前进缓存按钮,开发者工具会尝试离开网页再返回,从而确定该网页能否从 bfcache 恢复。

作为 Web 开发者,您必须了解如何针对所有浏览器优化网页的 bfcache,因为这可以显著提升用户(尤其是网络或设备速度较慢的用户)的浏览体验。

“往返缓存”标签页

Chromium 问题:1110752

新增了“房源”窗格过滤条件

如果您想在属性窗格中重点关注某个属性,现在可以在新的过滤条件文本框中输入该属性名称或值。

默认情况下,系统不会显示值为 nullundefined 的媒体资源。启用全部显示复选框即可查看所有媒体资源。

借助这些增强功能,您可以更快地找到自己关注的房源,从而提高工作效率!

属性窗格过滤器

Chromium 问题:1269674

模拟 CSS forced-colors 媒体功能

forced-colors CSS 媒体功能用于检测用户代理是否已启用强制色彩模式(例如 Windows 高对比度模式),在该模式下,系统会在网页上强制使用用户选择的有限调色板。

打开命令菜单,运行显示渲染命令,然后设置 Emulate CSS media feature forced-colors 下拉菜单。

CSS forced-colors 媒体功能

Chromium 问题:1130859

“在鼠标指针悬停时显示标尺”命令

现在,您可以打开命令菜单,然后运行悬停时显示标尺命令。借助页面标尺,您可以更轻松地测量元素的宽度和高度。

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

“在鼠标指针悬停时显示标尺”命令

Chromium 问题:1270562

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

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

Flexbox 编辑器

Chromium 问题:1263866

新增了用于重放 XHR 和展开所有搜索结果的键盘快捷键

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

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

重放 XHR

Chromium 问题:1050021

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

搜索标签页中新增了一个快捷方式,可让您展开和收起所有搜索结果。以前,您只能一次点击一个文件来展开和收起搜索结果。

依次按 Esc > 三点状菜单 > 搜索,打开搜索标签页。输入搜索字符串(例如函数),然后按 Enter 键查看搜索结果列表。将焦点放在搜索结果上,然后使用以下快捷键展开/收起搜索文件:

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

如需查看 Chrome DevTools 中的键盘快捷键,请参阅键盘快捷键

Chromium 问题:1255073

Lighthouse 面板中的 Lighthouse 9

Lighthouse 面板现在运行的是 Lighthouse 9。Lighthouse 现在会列出共享相同 ID 的所有元素。

非唯一元素 ID 是无障碍功能方面的常见问题。例如,aria-labelledby 属性中引用的 ID 会用于多个元素

如需详细了解这些更新,请参阅 Lighthouse 9.0 中的新功能

Lighthouse 对“所有可聚焦的元素都必须具有唯一的 `id`”进行审核,显示两个元素,这两个元素具有相同的 `id`

Chromium 问题:772558

改进了“来源”面板

我们将来源面板升级为使用 CodeMirror 6,从而大幅提升了其稳定性。以下是一些值得注意的改进:

  • 打开大型文件(例如 WASM、JavaScript)的速度显著提高
  • 在浏览代码时,不再发生随机滚动
  • 改进了可修改来源(例如代码段、本地替换项)的自动补全建议

Chromium 问题:1241848

其他亮点

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

  • 正确显示网络请求的瀑布图。之前,该样式已损坏。(1275501)
  • Sources 面板中搜索包含非常长行数的文档时,代码突出显示会中断。此问题现已解决。(1275496)
  • 网络请求中不再有重复的载荷标签页。(1273972)
  • 修复了效果面板的摘要部分中缺少布局偏移详细信息的问题。(1259606)
  • 广告网络搜索查询中支持任意字符(例如 ,.)。(1267196)

[实验性]“Reporting API”窗格中的端点

Chrome 96 中引入了实验性 Reporting API 窗格,可帮助您监控网页上生成的报告及其状态。

端点部分现已推出。您可以通过该文件大致了解 Reporting-Endpoints 标头中配置的所有端点。

了解如何使用 Reporting API 监控安全违规行为、已废弃的 API 调用等。

Reporting API 窗格

Chromium 问题:1200732

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。