DevTools 新功能（Chrome 96）
Published on • Updated on
Translated to: English, Español, Português, 한국어, Pусский, 日本語
现为谷歌 Chrome DevTools 的开发技术推广工程师。
感谢流浪大法师提供的翻译。
有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。
预览特性: 新的 CSS 概览面板
使用新的 CSS 概览面板，可以帮助您确定自己的页面是否存在可以潜在改善 CSS 的地方。打开 CSS 概览面板，然后点击捕获概览以便于生成有关页面 CSS 的报告。
您可以进一步了解该信息。例如，点击颜色区域中的颜色来查看应用相同颜色的元素列表。点击一个元素可以在元素面板中打开该元素。
CSS 概览面板特性目前还处于预览阶段。我们团队也在积极努力开发该功能。我们期待您的反馈以便于我们做进一步改进。
欲了解更多有关于 CSS 概览面板的信息，请阅读此文章。
Chromium 议题：1254557
修复以及改善 CSS 长度编辑与复制的体验
CSS 长度的复制以及文本编辑的用户体验问题均已被修复。这两个功能在上轮发布中出现了一些问题。
此外，您还是可以横向拖拽光标加减长度数值以及在下拉列表中选择新的长度单位。这些附加的长度编辑功能不会影响主要的文本编辑体验。
如果您发现任何问题，请通过 goo.gle/length-feedback 报告。
您可以通过 设置 > 实验 > Enable CSS length authoring tools in the Styles pane 复选框禁用附加的长度编辑功能。
渲染选项卡的更新
模拟 CSS prefers-contrast 媒体特性
prefers-contrast 媒体特性可以用来检测用户是否在页面里面或多或少使用对比度。
打开命令菜单，运行 Show Rendering 命令，然后设置带有模拟 CSS preferred-contrast 媒体特性字样的下拉菜单。
Chromium 议题：1139777
模拟 Chrome 的自动深色主题特性
使用 DevTools 模拟自动深色主题以查看页面在 Chrome 的自动深色主题开启后的外观。
Chrome 96 发布了自动深色主题的 Origin Trial （目前只限于 Android 版）。有了该功能，当用户在操作系统那里选择深色主题时，浏览器将自动为浅色主题网站生成深色主题。
打开命令菜单，运行 Show Rendering 命令，然后设置带有模拟自动深色模式字样的下拉菜单。
Chromium 议题：1243309
将样式边栏里面的 CSS 规则复制为 JavaScript 属性
右鍵菜单里面新增了两个选项，方便您将 CSS 规则复制为 JavaScript 属性。这些快捷选项特别适合那些使用 CSS-in-JS 库的开发者。
在样式边栏中，右键点击 CSS 规则。您可以选择 将声明复制为 JS 的选项来复制单个规则或选择将所有声明复制为 JS 的选项来复制所有规则。
例如，下面的示例将会把 paddingLeft: '1.5rem' 给复制到剪贴板。
Chromium 议题：1253635
网络面板新增载荷（Payload）边栏
当您想查看网络请求中的 payload 信息时，可以使用网络面板里面的 Payload 边栏。此前，payload 信息出现在报头边栏里。
Chromium 议题：1214030
优化属性边栏里面的属性展示
属性边栏现在只展示相关属性，而不是像之前那样展示实例的所有属性。现在移除对 DOM 原型以及方法的展示。
配合 Chrome 95 属性边栏的属性展示改善，您现在可以更轻松地找到相关属性。
Chromium 议题：1226262
控制台的更新
新增选项，用于隐藏控制台里面的 CORS 错误
您可以隐藏控制台里面的 CORS 错误。由于 CORS 的错误已经显示在问题选项卡那里，隐藏控制台里面的 CORS 错误有助于减少混乱。
在控制台里面，点击设置图标，然后取消选中 在控制台中显示 CORS 错误 复选框。
Chromium 议题：1251176
控制台正确预览以及执行 Intl 对象
现在，Intl对象不仅能够被正确预览，而且还能够在控制台里直接查询。此前，Intl 对象不会被立即查询。
Chromium 议题：1073804
统一的异步堆栈信息
DevTools 现在能够实现异步函数的异步堆栈信息与其它异步任务的堆栈信息保持一致。
Chromium 议题：1254259
保留控制台侧边栏
控制台侧边栏将会被保留。在 Chrome 94 中，我们宣布即将弃用控制台侧边栏，并且向开发者寻求反馈以及意见。
现在，我们从弃用通知那里获得了足够的反馈，后面我们将致力于改进侧边栏而不是将它移除。
弃用应用程序面板里面的应用程序缓存边栏
由于 Chrome 以及基于 Chromium 的浏览器都已移除对 AppCache 的支持，因此应用面板里面的应用缓存边栏现已被移除。
Chromium 议题：1084190
[实验阶段] 应用程序面板里面新增 Reporting API 边栏
要启用实验，请在设置 > 实验下勾选带有在应用面板里面启用 Reporting API 边栏字样的复选框选项。
Reporting API 旨在帮助您监控违规网页，过时的API调用以及更多。
启用此实验后，您现在可以在应用程序面板的新 Reporting API 边栏里面查看报告状态。
请注意，Endpoints 部分目前仍在积极开发中（目前没有 reporting endpoints）。
欲了解更多有关于 Reporting API 的信息，请阅读这篇文章。
Chromium 议题：1205856
下载 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
Chrome 110
- [重载时清除性能面板] (/zh/blog/new-in-devtools-110/#perf)
- 记录器更新
- 在记录器中查看并突出显示用户流的代码
- 自定义录音的选择器类型
- 录音时编辑用户流程
- 自动的代码美化器
- 为 Vue、SCSS 等提供更好的语法高亮和内联预览
- 控制台中符合人体工程学且一致的自动完成功能
- 其他的更新
Chrome 109
- Recorder: 为步骤提供新的复制选项，支持页面内重放，步骤支持鼠标右键弹出菜单
- Performance 面板里面的记录显示实际的函数名称
- Console & Sources 面板新增快捷键
- 改善 JavaScript 调试体验
- 其他的更新
- 【实验阶段】优化断点管理界面的 UX
- 【实验阶段】自动格式化
Chrome 108
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
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
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
Updated on • 改进文章