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

Sofia Emelianova
Sofia Emelianova
GitHub

网络面板改进

更快地在本地替换 Web 内容

本地替换功能现已简化，因此您可以从 Network 面板轻松模拟远程资源的响应标头和 Web 内容，而无需访问它们。

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

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

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

在顶部的操作栏中选择一个文件夹并授予其访问权限。

替换设置完成后，开发者工具会将您转到 Sources >替换 >编辑器，可让您替换 Web 内容。

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

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

Chromium 问题：1465785、1470532、1469359。

替换 XHR 和提取请求的内容

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

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

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 显示两个优先级字段：“Initial Priority”和（最终）Priority，而不仅仅是单独的 Priority。通过此附加字段，您现在可以查看活动的提取优先级是否发生变化并调整下载顺序。如需了解详情，请参阅使用 Fetch Priority API 优化资源加载。

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

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

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

Chromium 问题：1463901、1380964。

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

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

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

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

此设置会在 Sources >切换标签页时，通过页面选择在编辑器中打开的当前文件。

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

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

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

有关详情，请参阅专门介绍推测规则调试的帖子。

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 嵌套：元素面板现在会显示嵌套子级的整个选择器链 (1172985)。
  • 应用 >清单现在包含窗口控件叠加层部分，用于检查清单中是否存在 display_override 值，并提供相关文档的链接。
  • 来源 >网页树现在可执行以下操作，包括但不限于 (1442863)： <ph type="x-smartling-placeholder">
      </ph>
    • 如果文件夹中的所有内容都被列入忽略列表，则相应文件夹会处于灰显状态。
    • 如果文件夹中的所有内容都来自源映射，则将其颜色设为橙色。
  • 性能：现在，拍摄设置会在您开始录制时自动隐藏 (1455498)。
  • 来源 >编辑器恢复了 Ctrl + Ctrl行为 (Win) 和 Ctrl + Ctrl (MacO) (1468208)。
  • 动画 >全部暂停切换开关现在会在网页加载过程中保持其状态 (1446046)。
  • 应用 >存储 >Cache storage 移到了 Application >存储 >缓存部分 (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、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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