Chrome 121 DevTools 新功能速览

关注下方公众号，获取更多系列文章

Chrome 121 DevTools 带来众多特性更新🌟，下面我们来快速浏览主要的特性更新：

1.Elements 面板改进

Elements 面板现在支持 @font-palette-values CSS at-rule。它让您可以自定义 font-palette 属性的默认值。

在 Styles 面板中，点击 font-palette 属性的值，开发者工具会将您转到 @font-palette-values 专用部分，您可以在其中修改自定义值。

2.Sources 面板改进

1）Sources 面板改进了对 Source map 的支持：

在 Settings > Experiments > Resolve variable names in expressions using source maps 被默认开启。

DevTools 使用 source map 让您可以在 Sources 和 Scope 中调试原始代码，即使是在合并、最小化或编译之后。该实验可让您在 DevTools 中一致地评估原始变量名，包括但不限于以下内容：

a.Console 中的表达式和自动补全建议

b.Watch 表达式

c.条件断点和日志点

2）Sources 增加缩进标识线：

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

3.Performance 面板改进

1）强化 Interactions 轨道：

在 Performance > Interactions 中，将在处理时间边界处显示输入和呈现延迟的提示符。此外，当你将鼠标悬停在一个 interaction 上时，你可以看到一个有用的 tooltip，来详细说明时间信息。

2）在 Bottom-Up、Call Tree 和 EventLog Tab 新增高级过滤功能：

Performance 面板中的Bottom-Up、Call Tree 和 EventLog 选项卡中增加了三个新按钮用于高级过滤：

• Aa：匹配字母大小写
• (.*)：匹配正则表达式
• match_word：匹配整个单词。

4.Network 面板改进

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

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

5.新增 network request blocking 面板

新的命令菜单选项，用于添加和删除请求阻止模式，您现在可以在命令菜单中输入命令，以添加或删除网络请求阻止模式。

Add 命令将带您进入对话框以指定模式，而 Remove 命令则会在不打开网络请求阻止面板的情况下删除所有模式。

6.移除 CSP 违规行为实验

Chrome 89 版中引入的实验性 CSP 违规行为选项卡已被删除，因为它是多余的。要一目了然地查看CSP详细信息，请导航至 Application > Frames > Content Security Policy（CSP）。

此外，issues 面板会报告CSP违规行为。

7.Lighthouse 11.3.0

Lighthouse 升级到版本 11.3.0。其中值得注意的变化是可以对 404 页面运行报告。

8.可访问性

此版本具有以下可访问性改进：

• 在 Network > Payload 中，您现在可以通过 Tab 键聚焦到查看源代码和查看URL编码的按钮，并按 Enter 或 Space 触发相应的操作。
• 在 Console 中，为了减少混淆，链接到 Debugger 中不再可用的脚本现在会变灰，并且无法点击。
• 在导航树中，例如在 Sources > Page 中的树中，按 Enter 键现在会展开和折叠具有子节点的节点。

9.其他亮点

以下是此版本中一些值得注意的修复和改进：

• Perfomance。如果录制失败，您现在可以选择下载原始跟踪事件并尝试找出问题所在（commit）。
• Show Console 快捷键（Mac 是 Ctrl+`，Windows 和 Linux 是 Ctrl++）现在不仅会打开控制台，而且在第二次按下时会关闭控制台。
• 开发者资源。修复了一个导致无法报告CSS资源及其问题的错误。
• Elements：
• 修复了在iframe中检查元素时的错误。
• 计算。修复了默认值无法呈现的错误。
• 搜索。修复了对于一个或两个字符的短查询无法计算匹配数的错误。
• Console：现在可以正确解析以转义字符结尾的正则表达式。
• Settings > Workspace：修复了无法添加排除文件夹的错误。
• Network：
• 当缓存被禁用时，现在会在 Network 旁边显示警告图标。
• 预览。现在会渲染带有data: URI的图像。
• Memory：在操作栏中添加了正确的上传和下载按钮。

大家都在看