DevTools 新功能（Chrome 102）
Published on • Updated on
Translated to: English, Español, Português, 한국어, Pусский, 日本語
现为谷歌 Chrome DevTools 的开发技术推广工程师。
感谢 韩昌浩 提供的翻译。
有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。
预览功能：新的 Performance insights 面板
利用 Performance insights 面板来获取关于您网站性能的可行性深度分析。面板将按照您的用例提供可行性的建议和回馈。
打开此面板并根据您的用例来开始一段新的录制。举个例子，让我们来测量这个示例网页的页面加载情况。
录制完成后，您会在 Insights 窗格中获得相关的性能深度分析。 单击每个深度分析项目（例如，阻止渲染的请求、布局偏移）以了解问题和潜在的修复。
前往 Performance insights 面板的文档并通过教程来逐步了解更多内容。
这是一项预览功能，可帮助 Web 开发人员（尤其是非性能专家）识别和修复潜在的性能问题。 我们的团队正在积极开发此功能，并期待获得您的反馈 以进一步改进。
Chromium 议题: 1270700
新的模拟浅色和深色主题的快捷方式
您现在可以在样式边栏中利用新的快捷方式来更快速地模拟浅色和深色主题（CSS 媒体功能 prefers-color-scheme）。
在此之前，在渲染标签页中模拟主题需要更多步骤。
Chromium 议题: 1314299
提升网络预览标签页的安全性
网络面板中的预览标签页现在应用了内容安全政策（CSP）。
例如，第一个屏幕截图显示了一个包含混合内容的页面。该页面通过安全的 HTTPS 连接加载，但样式表通过不安全的 HTTP 连接加载。
浏览器默认阻止样式表请求。但是，当您通过网络面板中的预览标签页打开页面时，样式表此前并没有被阻止（因此背景变成了红色）。现在像您期望的那样，该样式表被阻止了（第二个屏幕截图）。
Chromium 议题: 833147
提升在断点处的重新加载
调试程序现在会在断点处重新加载时停止脚本执行。
例如，之前在这个 React 示例 中的 ReactDOM 断点处重新加载时，脚本进入了无限循环。来源面板由于无限循环而崩溃。
继续执行 JavaScript 会给开发人员带来很多麻烦，并且可能会使渲染程序处于损坏状态。这项更改使调试行为与 Firefox 等其他浏览器保持一致。
Chromium 议题: 1014415, 1004038, 1112863, 1134899
控制台更新
在控制台中处理脚本执行错误
控制台中脚本评估期间的错误现在会生成正确的错误事件，这些事件会触发 window.onerror 处理程序，并在窗口对象上作为 "error" 事件进行调度。
Chromium 议题: 1295750
通过回车键提交实时表达式
一旦您完成了一个实时表达式 的输入，您即可通过回车键来提交它。在此之前，按回车键会导致添加新行。这行为与 DevTools 的其他部分不一致。
使用 Shift + 回车键 来添加新行。
Chromium 议题: 1260744
在用户流程录制开始时取消
您可以在用户流程录制开始时取消录制。此前没有办法取消录制。
Chromium 议题: 1257499
在样式边栏中展示继承的高亮伪元素
现在，在样式边栏中可以看到继承的高亮伪元素（例如 ::selection、::spelling-error、::grammar-error、以及 ::highlight）。
正如规范中提到的，当多个样式冲突时，CSS 层叠决定了优先的样式。此新功能可帮助您了解层叠规则的继承和优先级。
目前，您需要使用 --enable-blink-features=HighlightInheritance 的命令行选项运行 Chrome 以启用此功能。
Chromium 议题: 1024156
其它的更新
以下是此版本中一些值得注意的修复：
- 属性边栏现在默认显示带有值的访问器属性。在此之前，这些值被错误地隐藏了。（1309087）
- 样式边栏现在正确地用删除线显示被覆盖的
@supports规则。在此之前，被覆盖的这些规则没有删除线。（1298025） - 修复了来源面板中的 CSS 格式化逻辑，该逻辑在编辑 CSS 时会导致多个空行。（1309588）
- 将控制台中对象的以递归方式展开选项限制为最大100层，这样它就不会在展开循环引用的对象时陷入无限循环。（1272450）
[实验阶段] 复制 CSS 更改
请在设置 > 实验中勾选 Sync CSS changes in the Styles pane 来开启此实验功能。
在此实验中，样式边栏用绿色突出显示您的 CSS 更改。您可以将鼠标悬停在更改的规则上，然后单击它旁边新的复制按钮进行复制。
除此之外，您可以通过右键单击任何 CSS 规则并选择复制所有 CSS 更改来跨 CSS 声明复制所有 CSS 更改。
变更标签页中还添加了一个新的复制按钮，以帮助您轻松跟踪和复制 CSS 更改！
Chromium 议题: 1268754
[实验阶段] 在浏览器外选择颜色
请在设置 > 实验中勾选 Enable color picking outside the browser window 来开启此实验功能。
启用此实验以使用颜色选择器在浏览器之外选择颜色。在此之前，您只能在浏览器内选择颜色。
在样式边栏中，单击任何颜色预览以打开颜色选择器。使用吸管从任何地方选择颜色。
Chromium 议题: 1245191
下载 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 • 改进文章