2023年终盘点丨这一年,Chrome DevTools 的新功能
时光如白驹过隙。转眼间,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 官方文章。
大家都在看