开发者工具的新变化 (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Google 用户调研。

“网络”面板中简化的过滤栏

我们重新设计了过滤栏，以便您更轻松地过滤请求，并清理网络面板。

相应实验在此版本中默认处于启用状态，但系统会将其恢复为停用状态。您可以在 crbug.com/1523150 中跟踪进度。

新的过滤栏包含两个下拉菜单：一个用于选择请求类型，另一个用于隐藏数据和扩展程序网址或仅显示遭屏蔽的 Cookie 和请求以及第三方请求。这两个菜单都支持多选。

如需立即恢复旧版过滤栏，请依次前往。

简化“网络”面板中的过滤栏前后的对比图。

欢迎前往 crbug.com/1500573 留下您对该功能的反馈。

Chromium 问题：1486431。

Elements 改进

@font-palette-values 支持

“元素”面板现在支持 @font-palette-values CSS at-rule。借助此属性，您可以自定义 font-palette 属性的默认值。

在样式中，点击 font-palette 属性的值，DevTools 会将您带到 @font-palette-values 专用部分，您可以在其中修改自定义值。

样式中的 @font-palette-values 部分。

Chromium 问题：1501781。

支持的用例：自定义属性作为另一个自定义属性的后备

元素 > 样式现在可以解析作为另一个自定义属性的后备的自定义属性。

将自定义属性解析为另一个自定义属性的后备值之前和之后。

Chromium 问题：1499265。

改进了对源映射的支持

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

即使您已合并、缩减或编译代码，开发者工具仍会使用源代码映射，让您在来源和范围中调试原始代码。通过此实验，您可以在开发者工具中一致地评估原始变量名称，包括但不限于：

如需了解详情，请参阅相应 RFC。

Chromium 问题：1444349。

改进了“效果”面板

增强型互动跟踪

效果 > 互动轨道会显示须状线，用于指示处理时间边界处的输入延迟和呈现延迟。

在“互动”轨道中添加胡须之前和之后。

此外，将鼠标悬停在某个互动上时，您会看到一个有用的工具提示，其中详细说明了时间安排。

Chromium 问题：1495751。

在“自下而上”“调用树”和“事件日志”标签页中进行高级过滤

性能面板中的自下而上、调用树和事件日志标签页新增了三个用于高级过滤的按钮：

  • 匹配大小写。
  • 正则表达式。
  • 全字匹配。

用于高级过滤的三个新按钮。

此外，为了帮助您保留上下文，现在只有顶级项目与自下而上标签页中的过滤条件匹配。之前，该过滤条件与每个节点都匹配。

Chromium 问题：1496355。

“来源”面板中的缩进标记

来源面板中的编辑器现在会使用竖线标记缩进的代码块，以方便您查看。

在缩进的代码块前后添加竖线标记。

Chromium 问题：1479986。

为“网络”面板中的替换标头和内容提供实用提示

现在，当您将鼠标悬停在请求的标头和响应标签页旁边的紫色圆点图标上时，“网络”面板会显示提示。提示会告知您哪些内容已被开发者工具替换。

“Headers”（标头）和“Response”（响应）标签页中紫色圆点图标旁的新工具提示。

Chromium 问题：1469776。

用于添加和移除请求屏蔽模式的新命令菜单选项

现在，您可以在命令菜单中输入命令，以添加或移除网络请求屏蔽模式。

添加新命令之前和之后，用于添加或移除网络屏蔽模式。

添加命令会打开一个对话框，供您指定模式；移除命令会移除所有模式，而不会打开网络请求屏蔽面板。

已移除 CSP 违规实验

版本 89 中引入的实验性 CSP 违规标签页已被移除，因为它是冗余的。

如需快速查看 CSP 详细信息，请依次前往应用 > 框架 > 内容安全政策 (CSP)。

“应用”面板中的内容安全政策。

此外，“问题”面板会报告 CSP 违规情况。

“应用”面板中的内容安全政策。

Lighthouse 11.3.0

Lighthouse 面板现在运行的是 Lighthouse 11.3.0。请参阅完整的变更列表。其中一项值得注意的更改是能够针对 404 页面生成报告。

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

此版本在无障碍功能方面做出了以下改进：

  • 在网络 > 载荷中，您现在可以按 Tab 键将焦点移至查看来源和查看网址编码按钮，然后按 Enter 或空格键来触发相应操作。
  • 在控制台中，为了减少混淆，指向调试器不再可用的脚本的链接现在会显示为灰色，并且无法点击。
  • 在导航树（例如来源 > 网页中的树）中，Enter 键现在可展开和收起具有子节点的节点。

Chromium 问题：1338391、1500662、1420362。

其他亮点

此版本包含以下值得注意的修复和改进：

  • 性能。如果录制失败，您现在可以选择下载原始轨迹事件，并尝试找出问题所在（提交）。
  • “显示控制台”快捷键（Mac 为 Ctrl+`，Windows 和 Linux 为 Ctrl++）现在不仅可以打开控制台，还可以在再次按下时关闭控制台。
  • 开发者资源。修复了阻止报告 CSS 资源及其问题的 bug (1420362)。
  • 元素：
    • 修复了检查 iframe 中的元素时出现的 bug (1453375)。
    • 计算。修复了导致无法呈现默认值的 bug (1499882)。
    • Search 获取广告系列的地理位置定位目标，修复了导致无法计算一个或两个字符的短查询的匹配次数的 bug (1416457)。
  • 控制台。现在可以正确解析过滤条件框中以转义字符结尾的正则表达式 (1346936)。
  • 设置 > 工作区。修复了导致无法添加排除文件夹的 bug (1503580)。
  • 网络 > 预览。现在可呈现具有 data: URI 的图片 (1381791)。
  • 内存。向操作栏添加了适当的加载和保存按钮 (1275407)。

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。