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

Jecelyn Yeen

预览功能：整页无障碍树

通过新的全页无障碍树，您可以更轻松地大致了解整页无障碍树，并更好地了解您的 Web 内容是如何向辅助技术公开。

在元素面板中，打开无障碍窗格，然后选中启用整页无障碍树复选框。然后，重新加载开发者工具，您会在 Elements 面板中看到一个新的“无障碍”按钮。

您可以点击该按钮，以切换到整页无障碍树视图。您可以展开节点，也可以在 Accessibility 窗格中点击查看详细信息。

选择一个节点并切换回 DOM 树视图。现已选择对应的 DOM 节点。这是了解 DOM 节点与其无障碍功能树节点之间的映射的绝佳方式。这也适用于 DOM 树 ⬌ 无障碍树视图！

以前，无障碍树可在无障碍窗格中使用。视图有限，您只能探索单个节点及其祖先实体。

我们的团队仍在积极开发此预览版功能。我们期待您的反馈，希望我们进一步改进此功能！

整页显示无障碍树

Chromium 问题：887173

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

“更改”标签页中的代码更改会自动输出美观输出。

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

“更改”标签页

Chromium 问题：1238818、1268754、1086491

为用户体验流程记录设置较长的超时时间

现在，您可以在 Recorder 中为所有步骤或特定步骤调整超时设置。这尤其适用于网络请求速度缓慢且动画较长的网页。

例如，我在此演示页面上记录了一个用户流，该流程会加载并点击菜单项。不过，菜单项的加载速度较慢（需要 6 秒）。此用户流的重放超过 5 秒（默认超时），因此无法重放。

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

（可选）您可以在重放设置中调整所有步骤的超时。展开重放设置并修改超时值。

用户流记录的超时设置

Chromium 问题：1257499

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

往返缓存（或 bfcache）是一种浏览器优化方法，可实现即时的往返导航。

利用新的往返缓存标签页，您可以测试网页，确保它们针对 bfcache 进行了优化，并找出任何可能阻碍网页获取资格的问题。

如需测试特定页面，请在 Chrome 中导航至该页面，然后在开发者工具中依次转到应用 > 往返缓存。接下来，点击测试往返缓存按钮，开发者工具会尝试离开和返回页面，以确定是否可以从 bfcache 恢复该网页。

作为 Web 开发者，了解如何在所有浏览器中针对 bfcache 优化您的网页，因为这样可以显著改善用户的浏览体验，尤其是网络或设备速度较慢的用户。

往返缓存标签页

Chromium 问题：1110752

新的“属性”窗格过滤条件

如果您希望在 Properties 窗格中关注特定属性，现在可以在新的 Filter 文本框中输入该属性名称或值。

默认情况下，系统不会显示值为 null 或 undefined 的属性。选中全部显示复选框即可查看所有房源。

借助这些增强功能，您可以更快地获取所需的媒体资源，从而提高工作效率！

“属性”窗格过滤条件

Chromium 问题：1269674

模拟 CSS forced-colors 媒体功能

forced-colors CSS 媒体功能用于检测用户代理是否启用了强制颜色模式（例如，Windows 高对比度模式），在该模式下，它会在网页上强制实施用户选择的有限调色板。

打开命令菜单，运行 Show Rendering 命令，然后设置 Emulate CSS media feature forced-colors 下拉菜单。

CSS forced-colors 媒体功能

Chromium 问题：1130859

通过悬停命令显示标尺

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

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

通过悬停命令显示标尺

Chromium 问题：1270562

在 Flexbox 编辑器中支持 row-reverse 和 column-reverse

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

Flexbox 编辑器

Chromium 问题：1263866

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

在 Network 面板中重放 XHR 的键盘快捷键

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

重放 XHR

Chromium 问题：1050021

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

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

依次点击 Esc > 三点状菜单 > 搜索，打开搜索标签页。输入搜索字符串（例如函数），然后按 Enter 键以查看搜索结果列表。将焦点置于搜索结果上，并使用以下快捷键展开/收起搜索文件：

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

前往键盘快捷键，了解 Chrome 开发者工具中的键盘快捷键参考。

Chromium 问题：1255073

Lighthouse 面板中的 Lighthouse 9 号飞船

Lighthouse 面板现在正在运行 Lighthouse 9。Lighthouse 现在会列出共用同一 ID 的所有元素。

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

如需详细了解这些更新，请查看 Lighthouse 9.0 的新变化。

Lighthouse 针对“所有可聚焦元素必须具有唯一的‘id’”的审查，显示了两个具有相同 `id` 的元素

Chromium 问题：772558

经过改进的“来源”面板

在我们升级为使用 CodeMirror 6 的过程中，Sources 面板中有大量稳定性改进。以下是一些重要改进：

  • 打开大型文件（例如 WASM、JavaScript）时速度显著加快
  • 单步调试代码时不再随机滚动
  • 改进了针对可修改的来源（例如摘要、本地覆盖）的自动补全建议

Chromium 问题：1241848

其他亮点

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

  • 正确显示网络请求的广告瀑布图。之前，此样式已损坏。(1275501)
  • 在来源面板中，行过长的文档中进行搜索时，代码突出显示被破坏。此问题现已解决。(1275496)
  • 网络请求中不再有重复的载荷标签页。(1273972)
  • 修复了 Performance 面板的 Summary 部分中缺失的布局偏移详细信息。(1259606)
  • 在网络搜索查询中支持任意字符（如 ,、.）。(1267196)

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

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

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

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

Reporting API 窗格

Chromium 问题：1200732

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59