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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

此版本中默认启用了相应的实验，但将会还原。您可以在 crbug.com/1523150 中跟踪进度。

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

如需立即恢复旧版过滤栏，请依次前往 设置 > 实验 > “网络”面板中的过滤栏重新设计，然后关闭该实验。

优化“网络”面板中的过滤栏前后。

欢迎随时访问 crbug.com/1500573 提供有关该功能的反馈。

Chromium 问题：1486431。

元素改进

@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 > 使用源映射解析表达式中的变量名称已处于开启状态。

借助 DevTools 中的 Source Maps，您可以在组合、缩减或编译代码后，在 Sources 和 Scope 中调试原始代码。通过此实验，您可以在各种开发者工具中一致评估原始变量名称，包括但不限于：

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

Chromium 问题：1444349。

改进了性能面板

“增强型互动”轨迹

性能 > 互动轨道会显示 Whisker，用于指示处理时间边界处的输入和呈现延迟。

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

此外，当您将鼠标悬停在某个互动上时，系统会显示一个实用工具提示，详细说明时间。

Chromium 问题：1495751。

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

性能面板中的 Bottom-Up、Call Tree 和 Event Log 标签页新增了三个用于高级过滤的按钮：

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

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

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

Chromium 问题：1496355。

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

Sources 面板中的 Editor 现在会使用垂直线标记缩进的代码块，以方便您查看。

使用竖线标记缩进代码块之前和之后的效果。

Chromium 问题：1479986。

针对“网络”面板中被替换的标头和内容的实用提示

现在，当您将鼠标悬停在请求的标头和响应标签页旁边的紫色圆点图标上时，网络面板会显示提示。通过这些提示，您可以了解哪些内容已被 DevTools 替换。

“标头”和“响应”标签页中紫色圆点图标旁边的新提示。

Chromium 问题：1469776。

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

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

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

添加命令会将您转到用于指定模式的对话框，移除命令会移除所有模式，而无需打开网络请求屏蔽面板。

CSP 违规实验已移除

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

如需一目了然地查看 CSP 详情，请依次前往应用 > 框架 > 内容安全政策 (CSP)。

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

此外，问题面板会报告 CSP 违规问题。

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

Lighthouse 11.3.0

Lighthouse 面板现在运行的是 Lighthouse 11.3.0。请参阅完整的变更列表。其中一个显著变化是，您可以针对 404 页面生成报告。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

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

  • 现在，在网络 > 载荷中，您可以使用 Tab 键将焦点移至查看源代码和查看网址编码按钮，然后按 Enter 或 Space 键触发相应操作。
  • 在 Console 中，为避免混淆，指向不再可供 Debug 工具使用的脚本的链接现在会灰显，且无法点击。
  • 在导航树中（例如 Sources > Page 中的树），Enter 键现在可展开和收起具有子级的节点。

Chromium 问题：1338391、1500662、1420362。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。