开发者工具中的新功能 (Chrome 117)

Sofia Emelianova
Sofia Emelianova
GitHub

网络面板改进

更快速地在本地替换 Web 内容

我们已简化了本地替换功能，因此您无需访问网络面板即可轻松模拟远程资源的响应标头和 Web 内容。

如需覆盖 Web 内容，请打开网络面板，右键点击相应请求，然后选择覆盖内容。

请求下拉菜单中的替换选项。

如果您已设置本地替换项但已停用，则开发者工具会启用这些替换项。如果您尚未设置，开发者工具会在顶部的操作栏中提示您。选择一个存储替换项的文件夹，并允许开发者工具访问该文件夹。

选择一个文件夹，并在顶部的操作栏中允许其访问该文件夹。

设置替换项后，开发者工具会随即将您转到来源 > 替换项 > 编辑器，以便您可以替换 Web 内容。

请注意，被覆盖的资源在 Network 面板中用 已保存。 指示。将鼠标悬停在该图标上即可查看被替换的内容。

“网络”面板中请求旁边的替换图标。

Chromium 问题：1465785、1470532、1469359。

替换 XHR 的内容和提取请求

除响应标头之外，您现在可以替换 XHR 和提取请求的内容。通过此类替换，即使您的后端和 API 尚未就绪，您也可以通过模拟 API 响应来调试您的网页。

目前，开发者工具支持以下请求类型的内容替换：图片（例如 avif、png）、字体、提取和 XHR、脚本（css 和 js）以及文档 (html)。对于不受支持的类型，开发者工具现在会将替换内容选项显示为灰色。

Chromium 问题：792101、1469776。

隐藏 Chrome 扩展程序请求

为了帮助您专注于自己编写的代码，并滤除由您可能在 Chrome 中安装的扩展程序发送的不相关请求，网络面板新增了一个过滤条件。

若要滤除发送到 chrome-extension:// 个网址的所有请求，请选中 复选框。 隐藏扩展程序网址。

请求表格中隐藏的扩展程序网址。

Chromium 问题：1257885、1458803。

人类可读的 HTTP 状态代码

现在，请求标头中的状态代码会在 HTTP 状态代码旁边显示便于用户理解的文本，以便您能够更快地弄清请求所发生的情况。

显示直观易懂的 HTTP 状态代码之前和之后的 。

您也可以将鼠标悬停在请求表格中的状态代码上，以查看相同的文本。

Chromium 问题：1153956。

适用于 JSON 子类型的美观输出响应

具有 application/[subtype]+json MIME 子类型（例如 ld+json、hal+json 等）的请求的 Response 标签页现在可以正确解析响应，并允许您修饰响应。

在网络响应预览中解析 application/json 子类型之前和之后。

Chromium 问题：406900。

性能：查看网络事件的提取优先级的变化

现在，Performance 面板会在 Network 轨道中事件的 Summary 中显示两个优先级字段：“初始优先级”和（最终）“Priority”，而不是单独的“Priority”字段。通过这个附加字段，您现在可以查看事件的提取优先级是否发生变化，并调整下载顺序。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

显示提取优先级变化之前和之后。

此外，在启用了 复选框。 Big request rows（大请求行）设置的情况下，您可以在 Network（网络）面板的 Priority（优先级）列中找到相同的信息。

“网络”面板中的“优先级”列。

Chromium 问题：1463901、1380964。

默认启用的源代码设置：代码折叠和自动显示文件

现在，设置。 Settings > Preferences > 复选框。 代码折叠选项默认处于启用状态。通过此选项，您可以折叠代码块。

要折叠代码块，请将鼠标悬停在代码块开头旁边的行号上，然后点击 收起。 收起图标。点击 {...} 可再次展开该代码块。

此外，设置。 设置 > 偏好设置 > 复选框。 在边栏中自动显示文件现在也默认处于启用状态。

此设置会让来源 > 网页中的文件树选择当您切换标签页时在编辑器中打开的当前文件。

Chromium 问题：1459193、1336599。

改进了第三方 Cookie 问题的调试

为了打造更注重隐私保护的网络环境，在其他浏览器进行更新的同时，Chrome 推出了 Privacy Sandbox 计划。这项计划从根本上增强了网络隐私保护，能够使第三方 Cookie 成为现实，维护依靠广告维持运营的健康网络环境。Privacy Sandbox 具有逐步淘汰的时间表，可让您自如地适应变化。

您已经完成了第三方 Cookie 逐步淘汰后的 Chrome 行为方式的测试。为此，请通过命令行使用 --test-third-party-cookies-phaseout 标志运行 Chrome。如需了解此标志的作用，请参阅调试 Cookie。

无论您以何种方式运行 Chrome（无论是否带有此标记），现在，系统会为所有新 Chrome 用户默认启用问题标签页中的 复选框。 包括第三方 Cookie 问题复选框，因此，系统会报告以下信息：

  • 关于即将进行的逐步淘汰的破坏性更改警告。
  • 与第三方 Cookie 相关的问题。

如果您想以现有 Chrome 用户的身份查看有关即将进行的逐步淘汰的 Cookie 警告，请务必选中此复选框。

要对此进行测试，请访问此演示页面检查 Cookie。

“问题”标签页中报告的第三方 Cookie 问题。

此外，Network 面板中的 复选框。 屏蔽的响应 Cookie 过滤器也经过了改写，以明确其仅显示被屏蔽的响应 Cookie。

该复选框处于启用状态，仅显示带有被屏蔽的响应 Cookie 的请求。

Chromium 问题：1458839、1462693、1466310。

在“Application”面板中调试预加载

对于用户日后可能会浏览的网页，Chrome 团队将恢复进行完整的预渲染。为便于您进行调试，开发者工具将预加载部分添加到 Application 面板。新的预提取和预渲染（统称为“导航预加载”）使用 Speculation Rules API，而不是基于链接的资源提示。

在此演示页面的 Application > Preloading 部分，您可以检查：

  • 推测规则，列出了在当前页面上找到的所有规则集。
  • 预加载项，其中会列出规则集中的所有预提取和预呈现网址。
  • 此页面，其中列出了当前网页的预渲染状态。

如需了解详情，请参阅有关调试推测规则的专用博文。

Chromium 问题：1410709。

新颜色

您可能已经注意到，开发者工具现在的外观焕然一新，更符合 Chrome 的需求。其中一个影响因素是新的配色方案。

应用新颜色之前和之后。

此版本 (117) 为开发者工具带来了更多用户体验改进，我们已提及并进一步列出，包括若干改进的界面文本。

Chromium 问题：1456677。

Lighthouse 10.4.0

Lighthouse 面板现在运行 Lighthouse 10.4.0。最值得注意的是，此版本针对以下各项添加了新的无障碍功能审核：

例如：

无法检查无法区分的链接的颜色。

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

Chromium 问题：772558。

用于开发者工具的 C/C++ WebAssembly 调试扩展程序现已开源

适用于开发者工具的 C/C++ WebAssembly 调试扩展程序现已开源，位于 DevTools 前端代码库中。此扩展程序可在开发者工具中为编译到 WebAssembly 的 C++ 程序启用调试功能。如需了解详情，请参阅调试 C/C++ WebAssembly。

了解如何构建、运行和测试扩展程序，并随时贡献代码。

Chromium 问题：1410709。

其他亮点

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

  • CSS 嵌套：Elements 面板现在会显示嵌套子级的整个选择器链 (1172985)。
  • Application > Manifest 现在包含一个 Window Controls Overlay 部分，用于检查清单中是否存在 display_override 值，并提供指向相关文档的链接。
  • 来源 > 网页树现在会执行以下操作，包括但不限于 (1442863)：
    • 如果文件夹中的所有内容被忽略列出，则将其灰显。
    • 如果文件夹的所有内容都来自源映射，则将其颜色显示为橙色。
  • 性能：现在，当您开始录制时，捕获设置会自动隐藏 (1455498)。
  • Sources > Editor 恢复了 Ctrl + Arrow 的行为 (Win) 和 Opt + Arrow (MacOs) (1468208)。
  • 动画 > 全部暂停切换开关现在可在网页加载时保持其状态 (1446046)。
  • 应用 > 存储 > 缓存存储空间已移至应用 > 存储 > 缓存部分 (1462622)。
  • 改进了部分界面文本和提示：硬件并发提示、网络过滤条件文本和主菜单选项、应用树状视图中的大小写、网络 > 标头文本、来源 > 替换项和文件系统文本。

新的实验性功能

新的渲染模拟：prefers-reduced-transparency

您的网站用户可能会开始在他们的设备上启用新的实验性 prefers-reduced-transparency CSS 媒体功能，表明他们希望减少透明效果。您可以考虑采用这种偏好设置，以提高网站的可访问性。为帮助您，“渲染”抽屉式导航栏标签页现在可以模拟 prefers-reduced-transparency: reduce 设置，以便您针对解决方案进行原型设计并测试网站在这种情况下的行为方式。

如需在 Chrome 中测试此功能，请在 chrome://flags 中启用实验性 Web 平台功能。

Chromium 问题：1424879。

增强型协议监控器

Chrome 开发者工具使用 Chrome 开发者工具协议 (CDP) 对 Chrome 浏览器进行插桩、检查、调试和性能分析。如果您是 Chromium 或开发者工具开发者，则可以使用协议监控器查看由开发者工具发出的所有 CDP 请求和响应，以及发送 CDP 命令。

协议监视器具有一个新接口，可让您更轻松地构建和发送 CDP 命令。现在您不必在文档中查找命令及其参数，开发者工具会向您推荐这些命令。

在协议监视器抽屉式导航栏标签页的右下角，点击 左侧面板已打开。 显示 CDP 命令编辑器，选择一个目标，开始输入命令，根据需要选择建议的参数值之一，然后指定参数值，然后点击发送 。 发送命令 (Ctrl/Cmd + Enter)。

指定并发送 CDP 命令。

Chromium 问题：1469345。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59