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

Sofia Emelianova
Sofia Emelianova
GitHub

改进了“网络”面板

更快地在本地替换 Web 内容

本地替换项功能现已简化，这样您就可以在网络面板中轻松模拟远程资源的响应标头和 Web 内容，而无需访问这些资源。

如需替换网页内容，请打开 Network 面板，右键点击相应请求，然后选择 Override content。

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

如果您已设置本地替换项但已停用，则 DevTools 会启用它们。如果您尚未设置这些账号，DevTools 会在顶部的操作栏中提示您。选择要用来存储替换项的文件夹，并允许 DevTools 访问该文件夹。

选择一个文件夹，然后在顶部的操作栏中允许对其进行访问。

替换项设置完毕后，DevTools 会带您前往 Sources（来源）> Overrides（替换项）> Editor（编辑器），以便您替换网页内容。

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

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

Chromium 问题：1465785、1470532、1469359。

替换 XHR 和提取请求的内容

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

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

Chromium 问题：792101、1469776。

隐藏 Chrome 扩展程序请求

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

如需过滤掉发送到 chrome-extension:// 网址的所有请求，请查看 复选框。 隐藏扩展程序网址。

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

Chromium 问题：1257885、1458803。

直观易懂的 HTTP 状态代码

请求标头中的状态代码现在会在 HTTP 状态代码旁边显示可读取的文本，以便您更快地了解请求发生的情况。

显示简单易懂的 HTTP 状态代码前后的对比。

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

Chromium 问题：1153956。

为 JSON 子类型整齐打印响应

具有 application/[subtype]+json MIME 子类型（例如 ld+json、hal+json 等）的请求的响应标签页现在会正确解析响应，并允许您对其进行美化。

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

Chromium 问题：406900。

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

性能面板现在会在网络轨道中某个事件的摘要中显示两个优先级字段：初始优先级和（最终）优先级，而不是仅显示一个优先级。借助这个额外字段，您现在可以查看事件的提取优先级是否发生变化，并调整下载顺序。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

显示提取优先级更改前后。

此外，在启用 复选框。 Big request rows 设置后，您可以在 Network 面板的 Priority 列中找到同样的信息。

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

Chromium 问题：1463901、1380964。

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

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

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

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

此设置会使 Sources（来源）> Page（页面）中的文件树在您切换标签页时选择 Editor（编辑器）中打开的当前文件。

Chromium 问题：1459193、1336599。

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

为了帮助打造隐私保护更完善的网络环境，并与其他浏览器的更新同步，Chrome 推出了 Privacy Sandbox 计划。这项计划从根本上增强了网络隐私保护，并可以使第三方 Cookie 过时的方式维持健康的广告支持型网络。Privacy Sandbox 逐步淘汰时间表可让您轻松适应变化。

您现在已经可以测试 Chrome 在停用第三方 Cookie 后的行为。为此，请使用 --test-third-party-cookies-phaseout 标志从命令行运行 Chrome。如需了解此标志的用途，请参阅调试 Cookie。

无论您通过何种方式运行 Chrome（无论是否带有此标记），问题标签现在都会为所有 Chrome 新用户默认启用复选框。 包括第三方 Cookie 问题复选框，因此：

  • 关于即将弃用该功能的破坏性更改警告。
  • 与第三方 Cookie 相关的问题。

作为 Chrome 现有用户，如果您希望看到有关即将被逐步淘汰的 Cookie 警告，请务必选中此复选框。

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

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

此外，网络面板中的 复选框。 被屏蔽的响应 Cookie 过滤器已重写，以明确说明它仅显示被屏蔽的响应 Cookie。

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

Chromium 问题：1458839、1462693、1466310。

在“应用”面板中调试预加载

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

在此演示页面的 Application（应用）> Preloading（预加载）部分，您可以检查以下内容：

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

如需了解详情，请参阅专门介绍如何调试推测规则的帖子。

Chromium 问题：1410709。

新颜色

您可能已经注意到，开发者工具现在的外观焕然一新，与 Chrome 更加一致。其中一个原因是新的配色方案。

应用新颜色前后。

此版本 (117) 为 DevTools 带来了更多用户体验改进，包括上述和下文中列出的改进，其中包括改进了许多界面文本。

Chromium 问题：1456677。

Lighthouse 10.4.0

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

例如：

未能检查链接的颜色，导致链接无法区分。

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

Chromium 问题：772558。

适用于 DevTools 的 C/C++ WebAssembly 调试扩展程序现已开源

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

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

Chromium 问题：1410709。

其他亮点

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

新的实验性功能

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

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

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

Chromium 问题：1424879。

增强型协议监视器

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

协议监视器采用了新界面，可让您更轻松地构建和发送 CDP 命令。现在，您无需在文档中查找命令及其参数，开发者工具会为您提供建议。

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

指定并发送 CDP 命令。

Chromium 问题：1469345。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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