DevTools 新功能（Chrome 112）

感谢 Poong Zui Yong 提供的翻译

# 记录器更新

# 重播扩展支持

记录器 引入了对自定义重放选项的支持，您可以使用扩展将这些选项嵌入到 DevTools 中。

试用 示例扩展。 选择新的自定义重播选项以打开自定义重播界面。

您可以开发自家的扩展，根据您的需要自定义 记录器 并将其与您的工具集成：搜索 chrome.devtools.recorder API 并查看更多 扩展示例。

Chromium 议题: 1400243.

# 使用 pierce 选择器记录

除了 custom， CSS， ARIA， text 和 XPath 选择器，您现在还可以使用 pierce 选择器。 这些选择器的行为类似于 CSS 选择器，但也可以穿透影子根。

在含有 shadow DOM 的页面上开始一个新的记录。在 Selector types to record 选择 Pierce，并开始记录您与子 DOM 中元素的交互并检查相应的步骤。

Chromium 议题: 1411188.

# 导出带有 Lighthouse 分析的 Puppeteer 脚本

Recorder 引入了一个新的导出选项：Puppeteer (including Lighthouse analysis)。 使用 Puppeteer，您可以自动化和控制 Chrome。 使用 Lighthouse，您可以捕捉并提高网站的性能。

打开你的录影, 点击 导出, 选择新选项 ，并保存 .js 文件。

运行 Puppeteer 脚本 在 flow.report.html 文件中获取 Lighthouse 报告。

# 获取扩展

探索自定义您的记录器体验的选项，例如，使用自定义导出选项。 在录影里， 通过单击 导出 > Get extensions 以获取 Recorder 的扩展。

如果您有开发[记录器扩展]，欢迎添加(https://github.com/GoogleChrome/developer.chrome.com/edit/main/site/en/docs/devtools/recorder/extensions/index.md) 到我们的 记录器扩展列表. 我们期待在名单上看到您的扩展！

Chromium 议题: 1417104, 1413168.

# 元素 > 样式更新

# CSS 文档

您一天查看多少次有关 CSS 属性的文档？ 当您将鼠标悬停在某个属性上时，元素 > 样式 边栏现在会向您显示简短描述。

工具提示还有一个 了解更多 链接，可将您带到此属性的 MDN CSS 参考。

如果您很了解 CSS，您可能会觉得工具提示很麻烦。 要将它们全部关闭，请选择 Don't show.

要重新打开它们，请检查 Settings > Preferences > Elements > Show CSS documentation tooltip.

Chromium 议题: 1401107.

# CSS 嵌套支持

元素 > 样式 边栏现在可以识别 CSS 嵌套 语法并将嵌套样式应用于正确的元素。

Chromium 议题: 1172985.

# 在控制台中标记日志点和条件断点

DevTools 进一步改进 调试控制台中标记日志点和条件断点的用户体验。控制台现在标记由断点触发的消息：

• console.* 在 条件断点 中调用带有橙色问号 ?

• Logpoint 的消息带有两个粉红色点 ..

控制台 现在为您提供指向源文件中断点的正确锚链接，而不是 Chrome 创建的用于在 V8 上运行任何 Javascript 的 VM<number> 脚本。

单击断点消息旁边的链接可直接跳转到断点编辑器。

Chromium 议题: 1027458.

# 在调试过程中忽略不相关的脚本

为了帮助您专注于代码中最重要的部分，您现在可以直接从 Sources > Page 边栏的文件树中将不相关的脚本添加到 Ignore List。

右键单击任何脚本或文件夹，然后选择与忽略相关的选项之一。 您可能会看到用于在列表中添加或删除脚本或文件夹的选项。 Debugger ignores scripts 添加到列表中并在调用堆栈中忽略它们。

如果您选择忽略的脚本，配置 按钮会将您带到 Settings > Ignore List. 您还可以使用以下命令从文件树中隐藏被忽略的源 > Hide ignore-listed sources .

Chromium 议题: 883325.

# JavaScript 性能剖析器开始弃用

早在 Chrome 58 中，DevTools 团队就计划最终弃用 JavaScript 性能剖析器，并让 Node.js 和 Deno 开发人员使用性能面板，用于分析 JavaScript CPU 性能。

此 DevTools 版本 (112) 开始 四阶段 JavaScript 性能剖析器 弃用。 JavaScript 性能剖析器 面板现在显示相应的警告横幅。

使用 Performance 面板来代替 性能剖析器分析 CPU。

在相应的 RFC 和 crbug.com/1354548 中了解更多信息并提供反馈。

Chromium 议题: 1417647.

# 模拟降低对比度

渲染 选项卡为[模拟视觉缺陷](/docs/devtools/rendering/apply-effects/#emulate-vision-deficiencies）列表—对比度降低。 使用此选项体验您网站是否对比敏感度较低的人友好呈现。

请注意，列表选项已更新以告诉您选项代表的颜色不敏感度。

使用 DevTools，您可以一次找到并修复所有对比度问题。 有关详细信息，请参阅 如何提升您的网站更具可读性。

Chromium 议题: 1412719, 1412721.

# Lighthouse 10

Lighthouse 面板现在运行 Lighthouse 10.0.1。 有关详细信息，请参阅 Lighthouse 10.0.1 的新功能。

Lighthouse > > 旧版导航 现在默认禁用。 此选项使用旧版 Lighthouse configuration 在导航模式下。

Lighthouse 10 现在使用 Moto G Power 作为默认仿真设备。 DevTools 将此设备添加到 Settings > Devices。

Chromium 议题: 772558.

# 其他的更新

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

• Sources > Breakpoints 边栏现在在不明确的文件名旁边显示不同的文件路径 (1403924)。

• Performance 面板的火焰图中的 Main section 现在将 CpuProfiler::StartProfiling 指定为 Profiler Overhead ([ 1358602]（https://crbug.com/1358602））。

• DevTools 改进了自动完成：

• 源代码：任何单词的一致完成 (1320204)。

• 控制台: Arrow down 选择第一个建议，而且建议含有 Tab 提示 (1276960).

• DevTools 添加了一个 事件侦听器断点 让你在打开Document Picture-in-Picture window时暂停 (1315352).

• DevTools 设置了一个解决方法，可以将 Vue2 webpack 工件正确显示为 JavaScript (1416562)。

• 控制台设置 有一个更好的名字：默认展开 console.trace() 消息。 （[1139616]（https://crbug.com/1139616））。

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