现为谷歌 Chrome DevTools 的开发技术推广工程师。
感谢 流浪大法师 提供的翻译
有兴趣帮忙改进 DevTools 吗？请注册并参与 Google 用户体验调研。
Recorder: 为步骤提供新的复制选项，支持页面内重放，步骤支持鼠标右键弹出菜单
在 Recorder 面板里面打开一个用户流程。之前，当您重放该用户流程时，DevTools 会始终通过跳转或重新加载页面的方式来执行此次的重放。
有了这次更新，Recorder 面板就可以分别展示各个跳转（navigation）步骤。您可以鼠标右键并删除它来执行页面内重放！
除此之外，您还可以对步骤进行鼠标右键操作并将其复制到 Recorder 面板的剪贴板中，而不再是导出整个用户流程。它也适用于 Chrome 扩展。例如，尝试将步骤复制为 Nightwatch Test 脚本。有了这个功能，您可以轻松地更新任何已有脚本。
现在，您可以在步骤上的任何位置通过鼠标右键的方式来弹出菜单。在此之前，您只能通过点击 3 个点按钮的方式来弹出步骤菜单。
Chromium 议题：1322313, 1351649, 1322313, 1339767
在 Performance 面板里显示实际的函数名称
Performance 面板现在会读取 sourcemap， 在 trace 中显示实际的函数名称和它们的源文件。
在这个例子里面，处在生产环境下的源文件会被压缩。例如，在这个 demo 中，sayHi 函数被压缩为 n，takeABreak 函数被压缩为 o。
在此之前，当您在 Performance 面板中记录 trace 时，trace 只会显示您压缩后的函数名称。这使得调试变得更加困难。
有了这次更新，DevTools 现在就可以读取 sourcemap 并显示实际的函数名称和源文件位置。
Console & Sources 面板新增快捷键
在 Sources 面板里面，您可以通过以下方式切换选项卡：
在 MacOS 系统里面，使用 Function + Command + Arrow up 和 Arrow down
在 Windows 和 Linux 系统里面，使用 Control + Page up 或 Page down
此外，您可以在 MacOS 系统里面使用 Ctrl + N 和 Ctrl + P 来上下选择自动填充建议，类似于 Emacs。例如，您可以在 Console 面板里面输入 window. 并使用这些快捷键来上下选择自动填充建议。
此外，DevTools 现在只会在行尾响应用于自动填充的 Arrow Right。例如，当您在代码的中间位置编辑某些内容时，会弹出自动填充对话框。当您按下 Arrow Right时，您很可能想要将光标设置到下一个位置，而不是自动填充。这个 UX 上的变动可以更好地服务于您的工作流程。
Chromium 议题：1167965, 1172535, 1371585. 1369503
改善 JavaScript 调试体验
以下是这个版本针对 JavaScript 调试的一些改进：
new.target指的是一个元属性，它可以让您检测到调用函数或构造函数是否使用 new 操作符的这种情况。您现在可以通过在 Console 面板里面打印出new.target的方式来检查它的值。在此之前，当您输入new.target时，它就会返回错误。
WeakRef对象允许您持有另一个对象的弱引用，而不会阻止该对象被垃圾回收。DevTools 现在会在调试期间在控制台里面直接显示一个 inline preview，并且对弱引用进行评估。在此之前，您必须显式地调用“deref”来解析它。
- 修复了 shadowed 变量的 inline preview。在此之前，显示的值是不正确的。
- 在 Sources 面板的 Scope 窗格中，对
Generator和async函数中的变量名进行反混淆。
Chromium 议题：1267690, 1246863 1371322, 1311637
其他的更新
以下是此版本中一些值得注意的修复：
- 针对 Styles 面板中的非活跃 CSS 属性 - 行内高度和宽度，弹性和网格属性，支持更多的提示信息。
- 修复语法高亮的问题。自从 DevTools 的 code editor 升级以来，它就不再正常工作。
- 在 Recorder 面板中，在失焦事件之后，正确地捕获 input change 事件。
- 在 Recorder 面板中，为了更好的调试体验，更新 Puppeteer 重放脚本。
- 针对远程调试，在 Recorder 面板中，支持记录和重放。
- 修复
var()中存在特殊 CSS 变量名会导致解析失败的问题。在此之前，DevTools 不支持解析带有转义字符的变量，例如var(--fo\ o)。
【实验阶段】优化断点管理界面的 UX
要启用该实验特性，请在 Settings > Experiments 下勾选 Enable re-designed Breakpoint Sidebar Pane in the Sources Panel。
遇到需要查看所有断点的情况，目前的 Breakpoints 窗格所能够提供的视觉辅助实属有限。此外，常用的操作被隐藏在右键菜单中。
处于实验阶段的 UX redesign 目的在于结构化 Breakpoints 面板，并允许开发人员快速访问常用功能，特别是在编辑和删除断点的情况下。
这里有一些亮点：
- 两个暂停选项都在 Breakpoints 面板中，并用文本标记，以便于理解。
- 断点可以按文件分组，按行/列号排序，并可折叠。
- 在 Breakpoint 面板中，把鼠标悬停在断点或文件名上，面板会新增删除和编辑断点的选项。
阅读我们的 RFC (closed) 的全部更改，并在这里提供您的反馈。
【实验阶段】自动格式化
要启用实验，请在 Settings > Experiments 下勾选 Automatically pretty print in the Sources panel。
Sources 面板现在会自动对那些文件内容处于压缩状态的源文件进行格式化。您可以单击 pretty print button { } 来取消。
在此之前，Sources 面板默认会显示压缩内容。开发人员需要手动单击 pretty print 按钮来格式化内容。此外，格式化内容不会显示在同一个文件中，而是显示在另一个 ::formatted 选项卡中。
Chromium 议题：1164184
下载 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
Published on • 改进文章