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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

要立即恢复原来的过滤栏，请关闭设置 设置 >实验 >check_box_outline_blank 重新设计了“网络”面板中的过滤栏。

在“网络”面板中对过滤栏进行简化之前和之后。

欢迎您随时前往 crbug.com/1500573 提供关于该功能的反馈。

Chromium 问题：1486431。

元素改进

@font-palette-values 支持

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

在 Styles（样式）中，点击 font-palette 属性的值，开发者工具会带您前往 @font-palette-values 专用部分，您可以在其中修改自定义值。

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

Chromium 问题：1501781。

支持的情况：将自定义属性用作其他自定义属性的后备

元素 >样式现在可解析作为其他自定义属性的后备的自定义属性。

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

Chromium 问题：1499265。

改进了源映射支持

设置 设置 >实验 >check_box 使用源映射解析表达式中的变量名称默认处于开启状态。

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

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

Chromium 问题：1444349。

性能面板改进

“增强型互动”轨道

效果 >互动轨道会有一些“须”，这表明处理时间范围内的输入和呈现延迟。

向“互动”轨道添加“胡须”前后的数据。

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

Chromium 问题：1495751。

“Bottom-Up”“Call Tree”和“Event Log”标签页中的高级过滤

在 Performance 面板中，Bottom-Up、Call Tree 和 Event Log 标签页新增了三个高级过滤按钮：

  • match_case 匹配大小写。
  • regular_expression 正则表达式。
  • match_word 匹配整个字词。

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

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

Chromium 问题：1496355。

“Sources”面板中的缩进标记

为了方便起见，现在，Sources 面板中的 Editor 会使用垂直线标记缩进的代码块。

用垂直线标记缩进代码块的前后。

Chromium 问题：1479986。

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

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

“Headers”（标题）和“Response”（响应）标签页中紫点图标旁边的新提示。

Chromium 问题：1469776。

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

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

添加新命令以添加或移除网络阻塞模式之前和之后。

您可以使用添加命令转到对话框指定格式，使用移除命令可移除所有格式，而不打开网络请求屏蔽面板。

CSP 违规实验已移除

版本 89 中引入的实验性 CSP 违规标签页已被移除。

要快速查看 CSP 详情，请导航至应用 >框架 >内容安全政策 (CSP)。

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

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

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

Lighthouse 11.3.0

Lighthouse 面板现在运行 Lighthouse 11.3.0。请参阅完整的更改列表。其中一项显著变更是能够在 404 页面上生成报告。

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

Chromium 问题：772558。

无障碍

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

  • 在网络 > 中载荷，现在您可以通过 Tab 键将焦点移至查看来源和查看网址编码按钮，然后按 Enter 或空格键触发相应的操作。
  • 在 Console 中，为减少混淆，指向 Debugger 不再可用的脚本的链接现在显示为灰色，并且无法点击。
  • 导航树中，例如 Sources > 中的树Page 键时，按 Enter 键现在可展开和收起包含子项的节点。

Chromium 问题：1338391、1500662、1420362。

其他亮点

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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