时光如白驹过隙。转眼间，2023 年即将接近尾声。在这一年里 Chrome 浏览器带来了 12 个版本更新，其中 DevTools 在 Elements、Network、Styles、Sources、Application 等面板功能及用户体验上带来了众多更新。本文将对 DevTools 各个版本的重要更新进行一次系统的回顾。

DevTools in Chrome 109

Recorder 面板支持按步骤录制、重放和修改：

以前，当开发者重放用户流时，开发者工具始终会通过导航到或重新加载页面来开始重放。使用最新更新时，Recorder 会单独显示导航步骤。您可以右键点击并将其移除，以执行页内重放。

Sources 和 Console 面板中新增了键盘快捷键：

您可以通过以下方式在 Sources 面板中的标签页之间切换：

• 在 MacOS 上，按 Function + Command + 向上箭头和向下箭头；
• 在 Windows 和 Linux 上，按 Ctrl + Page up 或 down；

您还可以使用以下方式在 Console 面板中进行补全：

• 在 MacOS 上，使用 Ctrl + N 和 Ctrl + P 来浏览自动补全（类似于 Emacs）。
• 例如，您可以在 Console 中输入 window.，然后使用以下快捷键进行导航。

改进了 JavaScript 调试：

• new.target 是一种元属性，用于检测是否使用了新运算符调用函数或构造函数。您现在可以在控制台中记录 new.target，以便在调试期间检查其值。以前，当您输入 new.target 时，它会返回错误。
• 借助 WeakRef 对象，您可以保留对另一个对象的弱引用，而不阻止该对象被垃圾回收。现在，开发者工具会显示该值的内嵌预览，并在调试期间直接在控制台中评估弱引用。

DevTools in Chrome 110

改进 Vue、SCSS 等语法突出显示和内嵌预览：

Sources 面板增强了几种广泛使用的文件格式的语法突出显示功能，可让您更轻松地阅读代码并识别其结构，包括 Vue、JSX、Dart、LESS、SCSS、SASS 和内嵌 CSS。

拆分 Recorder 面板代码视图：

现在提供拆分代码视图，可让开发者更轻松地查看用户流代码。当您将鼠标悬停在左侧的每个步骤上时，Recorder 会突出显示相应的代码，便于您轻松跟踪流程。

重新加载时清除 Peformance 面板：

现在，当您点击 Start profiling and refresh page 按钮时，Performance 面板会清除屏幕截图和跟踪记录。在开发中经常使用 Performance 观测时非常有用。

DevTools in Chrome 111

使用 Styles 面板调试高清颜色：

DevTools引入了新的工具，帮助开发者创建、转换和调试高清颜色，样式面板现在支持 12 种新的颜色空间和 7 种新的色域，如CSS Color Level 4规范所述。

以下是使用 color()、lch()、oklab()和color-mix()的 CSS 颜色定义示例：

您还可以使用以下新的快捷方式从屏幕中选择颜色。按字母 C 键可启用颜色提取器，按 Escape 可将其停用。取色器工具仅对 sRGB 颜色空间中的颜色进行采样。

整理 Application 面板中缓存模块：

现在，Cache Storage 窗格位于 Application 面板的 Storage 部分，而 Back/forward cache 窗格已移至 Background Services 部分。

DevTools in Chrome 112

支持原生 CSS 嵌套：

在该版本中，Elements > Styles 窗格可以识别 CSS Nesting 语法并将嵌套样式应用于正确的元素。

通过 Lighthouse 分析将录制内容导出为 Puppeteer 脚本：

Recorder 引入了一个新的导出选项：Puppeteer（包含 Lighthouse 分析）。借助 Puppeteer，您可以自动执行和控制 Chrome。借助 Lighthouse，您可以获取并改善网站的性能。

DevTools in Chrome 113

重写网络请求响应头：

现在您可以在 Network 面板中重写响应头。以前，您需要访问网络服务器才能对 HTTP 响应标头进行测试。在 Network > Headers > Response Headers，将鼠标悬停在头部的值上，单击并对其进行编辑，同时也可以点击 “Add_header” 按钮增加新的 header。

优化 CSS 无效属性和值的展现：

为帮助开发者您更快地排查 CSS 问题，Styles 面板现在会划线：

• 当 CSS 属性无效时，包含整个 CSS 声明（属性和值）。
• 在 CSS 属性有效但值无效时，仅上传值。

备注：这个特性是国内前端 Yisi(一丝) 大佬贡献的

DevTools in Chrome 114

对 WebAssembly 的调试支持：

DevTools 启用 Settings > Experiments > Checkbox. WebAssembly Debugging: Enable DWARF support。

本实验可让您暂停执行并调试 Wasm 应用程序中的 C 和 C++ 代码，并提供所有调试信息：

• 使用 DWARF 调试信息映射的原始源代码。
• 调用堆栈中可理解的函数名称。
• 支持断点等。

DevTools in Chrome 115

Styles 面板新增自定义 CSS 属性的值提示：

在Elements > Styles中，将鼠标悬停在自定义 CSS 属性名称上，即可在工具提示中看到其值。

Sources 面板新增 CSS 语法高亮显示：

Sources 面板会新增对以下预处理 CSS 文件，如 SASS、SCSS 和 LESS 的语法高亮显示。

DevTools in Chrome 116

Linear timing 支持编辑：

通过 Elements > Styles 中的 Easing Editor，您只需点击一下，即可调整 transition-timing-function 和 animation-timing-function 值。在改版版本中 Easing Editor 获得了线性计时函数支持。

支持存储桶和元数据视图：

应用 Application > Storage 部分支持存储桶。存储桶彼此独立，因此你可以为数据片段指定驱逐优先级，确保最有价值的数据不会被删除。每个存储桶都可以存储与已建立的存储 API（如 IndexedDB 和 CacheStorage）相关联的数据。

DevTools in Chrome 117

简化了本地重载功能：

本地重载功能现在得到了简化，因此你可以轻松地从网络面板上模拟远程资源的响应头和网页内容，而无需访问它们。

为了重载网页内容，打开 DevTools 的 network 面板，然后右键，选择 Override content。

如果您已设置但禁用了本地重载，DevTools 会启用它们。如果尚未设置，DevTools 会在顶部的操作栏中提示您。选择一个文件夹来存储重载的文件，并允许 DevTools 访问该文件夹。见下方截图：

设置好重载后，DevTools 会带你进入 source > override > editor 面板，让你重载网页内容。

请注意，被覆盖的资源会在网络面板中显示出来。将鼠标悬停在Saved. 图标上，即可看到被覆盖的资源。

隐藏 Chrome 扩展程序请求：

为了帮助您专注于自己编写的代码，并过滤掉您可能已在 Chrome 中安装的扩展程序发送的无关请求，Network 面板中新增了一个过滤条件。

若要滤除发送到 chrome-extension:// 个网址的所有请求，请勾选"隐藏扩展程序网址"复选框。

代码折叠和自动文件显示：

设置。Settings > Preferences > Code folding（代码折叠）选项现已默认处于启用状态。通过此选项，您可以折叠代码块。

DevTools in Chrome 118

styles 面板中新增自定义属性：

Elements 面板现在支持 @property CSS at-rule。它允许您显式定义 CSS 自定义属性并在样式表中注册它们，而不需要运行任何 JavaScript。

若要检查已注册的自定义属性，请在 “Elements > Styles” 中，将鼠标悬停在属性名上，并在工具提示中查看其描述符。在工具提示中，单击该链接即可折叠的 @property 部分中的已注册属性。

改进本地重载：

延续上一版本的改进，本地重载现在可以实现以下功能：

• 在 Sources > Page 中，当您右键单击源代码映射文件并选择重载内容时，DevTools 将显示一个对话框，带您进入原始源代码。源映射文件的内容无法重载。

• Network 面板新增了 Has overrides 列和相应的 has-overrides:[content|headers|yes|no] 过滤器。要查看 Has overrides 列，请右键单击表头并选择它。

• 在 Sources > Overrides 中，Delete all overrides 菜单选项已替换为 Delete 选项，并具有精确的行为。

之前的 Delete all overrides 选项令人困惑，因为它只删除当前会话中激活的覆盖，并以紫色圆点图标标记。

新的 Delete 选项首先会显示一条警告信息并提示确认，然后删除点击的文件夹及其所有内容。

要恢复以前的选项，请在 Settings > Experiments 中勾选 "Delete all overrides temporarily"。

增强搜索功能：

现在，搜索结果会显示一行代码中找到的所有匹配项。以前，它只显示每行代码的第一个匹配项。当你搜索已被压缩的文件时，新行为尤其有用。当你点击搜索结果时，它会在编辑器中打开文件，现在不仅可以垂直滚动匹配项，还可以水平滚动。

此外，搜索速度也得到了提升，可以看一下左右对比：

最后，搜索现在支持忽略列表，不会显示忽略文件的结果。

多图预警！Chrome 118 DevTools 新功能介绍

DevTools in Chrome 119

改进了 Elements > Styles 面板中的 @property 部分：

1）可编辑的 @property 规则

历史版本中，DevTools 会以斜体显示不可编辑的规则，你现在可以在 Elements > styles 中编辑 @property 规则，如下图：

2）报告无效的 @property 规则

在 issue 选项卡会报告 @property规则中无效声明问题，如下图：

更新要模拟的设备列表：

在 Settings > Devices 的用户代理字符串（userAgent）已更新，以反映浏览器和操作系统的平均使用情况。您可以在模拟器中选择更多的最新设备来测试。如下图：

Sources 面板中漂亮地打印内联 JSON：

在 Sources 面板中已支持在 <script> HTML 标记中可以格式化展现内联的 JSON 数据，以方便调试，如下图：

更多详见：Chrome 119 DevTools 新特性一览

DevTools in Chrome 120

第三方 Cookie 逐步被淘汰：

Chrome 浏览器计划从 2024 年第一季度开始禁用 1% 用户的第三方 Cookie，以方便测试，然后在 2024 年第三季度逐步覆盖到 100% 用户。Chrome 推出了一系列API，为诸如身份验证、广告和欺诈检测等用例提供了以隐私为重点的替代方案。

默认情况下，系统已为所有 Chrome 用户启用复选框。包括第三方 Cookie 问题复选框。因此，现在问题标签页会针对即将弃用和逐步淘汰第三方 Cookie 的 Cookie 向您发出警告。您可以随时取消选中该复选框，让系统不再显示这些问题。

改进了动画调试：

现在，在 Animations 标签页中，您可以：

• 点击时间轴标题上的任意位置，即可设置进度条指针。如果动画已在播放，则继续播放，否则停止。以前，您必须拖动它。
• 调整名称列的大小即可查看完整的动画名称。

更多详见：Chrome 120 DevTools 新功能速览

DevTools in Chrome 121

Sources 增加缩进标识线：

为了更方便阅读，DevTools 121 中在 Sources 面板中新增了垂直线标记缩进的代码块。

Network 面板新增重载的 Headers 和 Response 提示信息：

当您的鼠标悬停在请求的 Headers 和 Response 标签旁边的紫色圆点图标上时，网络面板现在会显示 tooltip。这些 tooltip 会告诉您哪些内容被开发者工具覆盖。

更多详见：Chrome 121 DevTools 新功能速览

以上就是Chrome DevTools 的各版本主要更新，其他亮点可以参考 Chrome DevTools 官方文章。