DevTools 新功能（Chrome 93）
Published on • Updated on
Translated to: English, Español, Português, 한국어, Pусский, 日本語
现为谷歌 Chrome DevTools 的开发技术推广工程师。
感谢流浪大法师提供的翻译。
有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。
样式窗格（Styles pane）可编辑 CSS 容器查询（container queries）
现在，您可以在样式窗格（Styles pane）那里查看以及编辑 CSS 容器查询（container queries）。
容器查询的出现，给响应式设计提供更多的动态解决方案。虽@container @规则的工作方式与媒体查询（@media）类似，然而 @container 查询的对象是满足一定条件的祖先容器节点，而不是查询视口以及 user agent 信息。
在元素面板那里，点击带有 @container @规则的 DOM 元素。样式窗格现在将显示 @container 信息。您可以点击该信息，以编辑容器尺寸。样式窗格那里同时也会显示相对应的容器信息。把鼠标悬停上去，可以高亮页面中对应的容器元素以及检查容器的真实尺寸。点击可以选中该容器元素。
容器查询特性现还处于实验阶段。测试该特性之前，请在 chrome://flags 那里打开 #enable-container-queries 开关。 
Chromium 议题: 1146422
网络面板可预览 Web bundle
Web bundle 是一种新兴的文件格式，用于封装一个或多个 HTTP 资源。现在，您可以在网络面板那里预览 web bundle 的网络请求。
web bundle 特性现还处于实验阶段。测试该特性之前，请在 chrome://flags 那里打开 #enable-experimental-web-platform-features 开关。
Chromium 议题: 1182537
Attribution Reporting API 调试
现在，Attribution Reporting API 错误会显示在问题标签页那里。
Attribution Reporting是一个新的 API，旨在帮助您在没有使用跨站标识符的情况下，评估用户行为（比如点击或者查看广告）所导致的转化率。
Chromium 议题: 1190735
更好地处理控制台里面的字符串
控制台里面的新右键菜单允许您复制任何字符串，作为文本内容、JavaScript 字面量或者 JSON 字面量。
在 Chrome 90，控制台默认将输出字符串格式化为 JSON 字面量。我们从开发者那里得到反馈：这个改动对开发者造成困扰，一些人觉得字符串的转义有点多，不利于字符串的可读性。
现在，控制台默认将输出字符串格式化为有效的 JavaScript 字面量，并且会进一步提供 3 种复制字符串的选项。复制字符串作为 JavaScript 字面量的这个选项，会转义那些合适且特殊的字符，然后会根据字符串内容来决定是否使用单引号、双引号或者反引号来包裹字符串。复制字符串内容的这个选项呢，会一字不差地将原生的字符串内容（包括换行符以及其它的特殊字符）复制到剪切板。最后，复制字符串作为 JSON 字面量的这个选项，会将字符串格式化为有效的 JSON 字面量，然后复制到剪切板。
Chromium 议题: 1208389
改善 CORS 调试体验
控制台里面的 CORS 相关错误，现在可以链接到网络面板和问题标签页。
点击 CORS 相关错误信息旁边的两个新按钮以查看网络请求，以及进一步理清楚该错误信息，在问题标签页那里获取潜在的解决方案。
Chromium 议题: 1213393
Lighthouse 8.1
现在，Lighthouse 面板运行的是 Lighthouse 8.1。
如果您的网站有使用 source maps，在 Lighthouse 报告里将显示 View Treemap 按钮。点击该按钮查看您网页所有的 JavaScript 的拆解情况，检测 JavaScript 的体积以及载入时 JavaScript 的覆盖情况。
这个报告也引入一个新的指标过滤条件（参考上述截图里面的 Show audits relevant to 过滤条件）。选择一个指标，以便于获取信息以及相关诊断，从而达到改善该指标的目的。
针对评分的部分，Performance Category 做了很多调整，方便与其它的性能工具保持一致以及更好地反映出 web 的现况。
想看完整的变更列表，请翻阅发布记录 。
Chromium 议题: 772558
在 Manifest 窗格展示新的 note 链接
现在，Manifest 窗格可以显示新的 note 链接。
目前，那些有声明 "new-note" 能力 的 ChromeOS (CrOS)、Chrome 以及安卓（Android）的应用 ，可以会在设备的Stylus设定中被选为 note-taking 应用（前提是 CrOS 设备已经在使用 stylus）。当被选为 note-taking 应用，用户可以通过 stylus palette 上的 "创建 Note" 按钮来启动 APP 。我们在应用的 manifest 文件里面添加 new-note-url 字段，是为了将相同功能给移植到 web 应用。
Chromium 议题: 1185678
修复 CSS 选择器匹配问题
DevTools 修复了 CSS 选择器匹配的问题，该功能在上个版本里面有问题。
在样式窗格里面，逗号分隔的选择器会以不同的颜色呈现，这取决于该选择器是否匹配到选中的 DOM 节点：
- 未匹配的选择器部分用浅灰色
- 匹配的选择器部分用黑色
Chromium 议题: 1219153
网络面板支持格式化 JSON 响应
现在，您可以在网络面板里面格式化 JSON 响应。
在网络面板里面，打开一个 JSON 响应，点击 {} 图标以便于格式化该 JSON 响应。
Chromium bug: 998674
下载 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 • 改进文章