此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

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

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

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

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

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

精简了“Network”面板中的过滤栏的前后对比效果。

欢迎随时访问 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。

改进了源代码映射支持

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

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

控制台中的表达式和自动补全建议
实时表达式
监视表达式
条件断点和日志点

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

Chromium 问题：1444349。

性能面板改进

“增强型互动”跟踪

Performance > Interactions 轨道会获取一些胡须，用于指示在处理时间范围输入和呈现的延迟。

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

此外，将鼠标悬停在互动上时，您可以看到详细说明显示时间的实用提示。

Chromium 问题：1495751。

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

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

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

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

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

Chromium 问题：1496355。

“Sources”面板中的缩进标记

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

使用垂直行标记缩进代码块的前后对比效果。

Chromium 问题：1479986。

关于“网络”面板中已替换标题和内容的帮助提示

现在，当您将鼠标悬停在请求的 Headers 和 Response 标签页旁边的紫色点图标上时，Network 面板会显示提示。工具提示会告诉您被开发者工具替换的内容。

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

Chromium 问题：1469776。

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

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

添加命令会将您转到对话框以指定模式，而移除命令则会移除所有模式，而不打开网络请求拦截面板。

CSP 违规实验已移除

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

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

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

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

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

Lighthouse 11.3.0

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

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

Chromium 问题：772558。

无障碍功能

此版本有以下无障碍功能改进：

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

Chromium 问题：1338391、1500662、1420362。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。