DevTools 新功能（Chrome 98）

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

# 预览功能：整页无障碍功能树

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

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

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

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

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

Chromium 议题：887173

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

现在，变更标签页中的代码变更会被自动美观输出（pretty-print）。

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

Chromium 议题：1238818，1268754，1086491

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

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

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

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

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

Chromium 议题：1257499

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

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

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

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

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

Chromium 议题：1110752

# 新的属性边栏过滤器

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

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

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

Chromium 议题：1269674

# 模拟 CSS forced-colors 媒体功能

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

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

Chromium 议题：1130859

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

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

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

Chromium 议题：1270562

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

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

Chromium 议题：1263866

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

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

在网络面板中选择一个 XHR 请求，然后按键盘上的 R 以重放 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。

​

Chromium 议题： 772558

# 源代码面板的改善

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

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

Chromium 议题： 1241848

# 其他的更新

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

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

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

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

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

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

Chromium 议题： 1200732

# 下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版（Dev） 或测试版（Beta） 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ，让您抢先在用户之前发现您网站上的问题！

# 联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进，或一切关于 DevTools 的一切。

• 提交建议或意见回馈：crbug.com.
• 报告 DevTools 问题：打开 DevTools，按 更多选项图标     > 帮助 > 报告 DevTools 问题。
• 在推特上，发推文： @ChromeDevTools.
• 在我们的 What's new in DevTools YouTube 视频底下留言。

# 更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能，请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

# Chrome 111

• 使用样式面板调试高清颜色
• 增强断点的用户体验
• 可自定义的记录器快捷方式
• Angular 更好的语法显示
• 在应用程序面板中重新组织缓存
• 其他的更新

# Chrome 110

• [重载时清除性能面板] (/zh/blog/new-in-devtools-110/#perf)
• 记录器更新
• 在记录器中查看并突出显示用户流的代码
• 自定义录音的选择器类型
• 录音时编辑用户流程
• 自动的代码美化器
• 为 Vue、SCSS 等提供更好的语法高亮和内联预览
• 控制台中符合人体工程学且一致的自动完成功能
• 其他的更新

# Chrome 109

• Recorder: 为步骤提供新的复制选项，支持页面内重放，步骤支持鼠标右键弹出菜单
• Performance 面板里面的记录显示实际的函数名称
• Console & Sources 面板新增快捷键
• 改善 JavaScript 调试体验
• 其他的更新
• 【实验阶段】优化断点管理界面的 UX
• 【实验阶段】自动格式化

# Chrome 108

• 不活跃 CSS 属性的提示
• 在 Recorder 面板中自动检测 XPath 和文本选择器
• 逐步执行逗号分隔的表达式
• 改进的忽略列表设置
• 其他的更新

# Chrome 107

• 客制化开发者工具（DevTools）的键盘快捷键
• 使用键盘快捷键对光亮与深色主题进行快速切换
• 高亮记忆检查器里的 C/C++ 对象
• 支持 HAR 导入的完整启动器的资讯
• 点击回车键 (Enter) 后开始 DOM 搜索
• 在 align-content 的 CSS flexbox 属性中显示 start 和 end 图标
• 其他的更新

# Chrome 106

• 在 Sources 面板中按照 Authored / Deployed 对文件进行分组
• 异步操作的链接堆栈痕迹
• 自动忽略已知的第三方脚本
• 在调试过程中改进调用堆栈
• 在来源面板中隐藏被忽略的来源
• 在命令菜单中隐藏被忽略的文件
• 性能面板中的新互动轨道
• 性能洞察面板中的 LCP 时序分解
• 在 Recorder 面板中自动生成录音的默认名称
• 其他的更新

# Chrome 105

• 录制面板中的分步重放
• 支持录制面板中的鼠标悬浮事件
• 性能洞察面板中的最大内容绘制（LCP）
• 将闪烁的文本（FOIT、FOUT）识别为布局变化的潜在根本原因
• Manifest 窗格中的协议处理程序
• 元素面板中的顶层徽章
• 在运行时附加 Wasm 调试信息
• 调试时支持实时编辑
• 在样式窗格的规则中查看和编辑@scope
• Source map 改进
• 其他的更新

# Chrome 104

• 在调试时进行帧重启
• 录制面板中的慢速重播选项
• 为录制面板创建扩展
• 使用面板中的编写/部署来进行分组
• 性能洞察面板中的新功能 - 用户计时追踪
• 显示元素的分配槽
• 模拟性能录制所需的硬件并发功能
• 在自动填充层叠样式表（CSS）时预览非颜色数值的值
• 识别退后/前进缓存面板中的阻塞帧
• 优化 JavaScript 对象的自动填充建议功能
• 优化 Source maps 功能
• 其他的更新

# Chrome 103

• Recorder 面板捕获双击和右击事件
• Lighthouse 面板支持 timespan 和 snapshot 新模式
• 改进 Performance Insights 面板的缩放控制问题
• 对删除性能记录的操作进行确认
• 重新排列 Elements 面板中的窗格
• 支持在浏览器外面选择颜色
• 改进调试期间的 inline 值预览问题
• Virtual authenticators 支持大型 blob
• Sources 面板支持新的键盘快捷键
• Source maps 改进

# Chrome 102

• 预览功能：新的 Performance insights 面板
• 新的模拟浅色和深色主题的快捷方式
• 提升网络预览标签页的安全性
• 提升在断点处的重新加载
• 控制台更新
• 在用户流程录制开始时取消
• 在样式边栏中展示继承的高亮伪元素
• 其它亮点
• [实验阶段] 复制 CSS 更改
• [实验阶段] 在浏览器外选择颜色

# Chrome 101

• 导入以及导出用户流程为 JSON 文件
• 样式边栏查看级联层
• 支持 hwb() 颜色函数
• 改进私有属性的显示问题
• 其他的更新
• [实验阶段] Lighthouse 面板新增 timespan 和快照模式

# Chrome 100

• 在样式边栏中查看并修改
• 默认支持常用选择器
• 自定义一段录制内容的选择器
• 重命名一段录制内容
• 在悬停时预览类/函数属性
• 性能面板中的部分呈现帧
• 其他的更新

# Chrome 99

• WebSocket 请求限速
• 应用面板里面的 报告 API（Reportng API）新边栏
• 支持 Recorder 面板一直处于等待状态，直到元素可见或可点击
• 更好的控制台样式，格式化和过滤
• 使用 source map 文件来调试 Chrome 扩展
• 优化 Sources 面板里面源文件夹树的显示问题
• Sources 面板里面显示 Worker 源文件
• Chrome 自动深色模式的更新
• 颜色选择器和分割面板支持触摸
• 其他的更新

# Chrome 98

• 预览功能：整页无障碍功能树
• 在变更标签页中显示更精确的更改
• 为用户操作流的录制设置更长的超时时间
• 使用“往返缓存”选项卡确保您的页面可缓存
• 新的属性边栏过滤器
• 模拟 CSS forced-colors 媒体功能
• 在鼠标指针悬停时显示标尺
• 在 Flexbox 编辑器中支持 row-reverse 和 column-reverse
• 新增“重放 XHR“和“扩展所有搜索结果”的键盘快捷键
• Lighthouse 面板中的 Lighthouse 9
• 源代码面板的改善
• 其他的更新
• [实验阶段] 在 Reporting API 窗格中显示端点

# Chrome 97

• 预览特性：新的录制器面板
• 设备模式中更新的设备列表
• 修改 HTML 时自动补全
• 改善代码调试体验
• [实验阶段] 跨设备同步 DevTools 设置

# Chrome 96

• 预览特性：新的 CSS 概览面板
• 修复以及改善 CSS 长度编辑与复制的体验
• 模拟 CSS prefers-contrast 媒体特性
• Emulate the Chrome’s Auto Dark Theme feature 模拟 Chrome 的自动深色主题特性
• 将样式窗格里面的 CSS 规则复制为 JavaScript 属性
• 网络面板新增载荷（Payload）边栏
• 优化属性窗格里面的属性展示
• 新增选项，用于隐藏控制台里面的 CORS 错误
• 控制台正确预览以及执行 Intl 对象
• 统一的异步堆栈信息
• 保留控制台侧边栏
• 弃用应用程序面板里面的应用程序缓存窗格
• [实验阶段] 应用程序面板里面新增 Reporting API 窗格

# Chrome 95

• 新的 CSS 长度编辑工具
• 在“问题”标签页隐藏问题
• 改善属性展示
• Lighthouse 面板中的 Lighthouse 8.4
• 在“来源”面板中排序代码段
• 阅读 DevTools 新功能的翻译文章和举报翻译错误
• DevTools 命令菜单的用户交互优化

# Chrome 94

• 设定您的 DevTools 用户界面语言
• 设备列表新增 Nest Hub 设备
• 帧（Frame）详情页获取 origin trials 信息
• 新的 CSS 容器查询（Container queries）徽章
• 利用新的复选框反转过滤网络请求的条件
• 控制台的边栏即将被弃用
• 在问题选项卡以及网络面板那里显示原生 Set-Cookie 响应头
• 在控制台里显示原生访问器为自己的属性
• 正确输出带有 #sourceURL 行内脚本的错误堆栈信息
• 更改计算样式边栏里面元素的颜色格式
• 使用原生的 HTML 提示框替换自定义提示框
• [实验阶段] 隐藏问题选项卡里面的问题

# Chrome 93

• 样式窗格（Styles pane）可编辑 CSS 容器查询（container queries）
• 网络面板可预览 Web bundle
• Attribution Reporting API 调试
• 更好地处理控制台里面的字符串
• 改善 CORS 调试体验
• Lighthouse 8.1
• 在 Manifest 窗格展示新的 note 链接
• 修复 CSS 选择器匹配问题
• 网络面板支持格式化 JSON 响应

# Chrome 92

• CSS 网格编辑器
• 支持控制台中的 const 重声明
• 来源顺序查看器
• 查看 iframe 详细信息的新快捷方式
• 优化跨域资源共享的调试支持
• 重命名 XHR 标签为 Fetch/XHR
• 在网络面板中过滤 Wasm 资源类型
• 网络状况面板中设备的用户代理客户端提示
• 在问题面板中报告怪异模式问题
• 在性能面板中添加“计算相交部分”
• Lighthouse 面板中的 Lighthouse 7.5
• 在“调用堆栈”边栏中弃用上下文菜单的 "Restart frame" 项
• [实验阶段] 协议监视器
• [实验阶段] Puppeteer Recorder