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

Google 用户调研。

“网络”面板改进

更快地在本地替换 Web 内容

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

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

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

设置替换项后，开发者工具会转到 Sources > Overrides > Editor，以便您替换网页内容。

请注意，网络面板中会使用 来指示被替换的资源。将鼠标悬停在该图标上，即可查看被替换的内容。

Chromium 问题：1465785、1470532、1469359。

替换 XHR 和 fetch 请求的内容

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

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

Chromium 问题：792101、1469776。

隐藏 Chrome 扩展程序请求

为了帮助您专注于自己编写的代码，并过滤掉 Chrome 中可能已安装的扩展程序发送的相关性较低的请求，网络面板新增了一个过滤器。

如需过滤掉发送到 chrome-extension:// 网址的所有请求，请选中 Hide extension 网址s（隐藏扩展程序网址）。

Chromium 问题：1257885、1458803。

人类可读的 HTTP 状态代码

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

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

Chromium 问题：1153956。

以美观格式打印 JSON 子类型的响应

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

Chromium 问题：406900。

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

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

此外，您还可以在启用 大型请求行设置的网络面板的优先级列中找到相同的信息。

Chromium 问题：1463901、1380964。

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

设置 > 偏好设置 > 代码折叠选项现在默认处于启用状态。此选项可让您折叠代码块。

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

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

此设置可让您在切换标签页时，Sources > Page 中的文件树选择 Editor 中当前打开的文件。

Chromium 问题：1459193、1336599。

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

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

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

无论您以何种方式运行 Chrome（使用或不使用标志），问题标签页现在都默认针对所有新 Chrome 用户启用了 包含第三方 Cookie 问题复选框，因此会报告：

• 有关即将淘汰的重大变更警告。
• 与第三方 Cookie 相关的问题。

如果您是 Chrome 的现有用户，并且想查看有关即将淘汰 Cookie 的警告，请务必勾选此复选框。

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

此外，网络面板中的 被屏蔽的响应 Cookie 过滤器已重新措辞，以明确表明它仅显示被屏蔽的响应 Cookie。

Chromium 问题：1458839、1462693、1466310。

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

Chrome 团队正在重新引入用户可能前往的未来页面的完整预渲染。为了方便您调试此问题，DevTools 在应用面板中添加了预加载部分。新的预提取和预渲染（统称为“导航预加载”）使用 Speculation Rules API，而不是基于链接的资源提示。

在此预渲染演示页面的 Application > Preloading 部分，您可以检查以下内容：

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

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

Chromium 问题：1410709。

新颜色

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

此版本 (117) 为开发者工具带来了更多用户体验改进，包括上文已提及和下文列出的改进，以及许多改进的界面文本。

Chromium 问题：1456677。

Lighthouse 10.4.0

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

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

例如：

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

Chromium 问题：772558。

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

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

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

Chromium 问题：1410709。

其他亮点

此版本包含以下值得注意的修复和改进：

• CSS 嵌套：“Elements”面板现在会显示嵌套子级的整个选择器链 (1172985)。
• 应用 > 清单 现在包含一个窗口控件叠加层部分，用于检查清单中是否存在 display_override 值，并提供相关文档的链接。
• 来源 > 网页树现在可以执行以下操作，包括但不限于 (1442863)：
  • 如果文件夹的所有内容都位于忽略列表中，则将文件夹灰显。
  • 如果文件夹的所有内容都来自源地图，则以橙色显示该文件夹。
• 性能：现在，当您开始录制时，拍摄设置会自动隐藏 (1455498)。
• 来源 > 编辑器 恢复了 Ctrl + 箭头键 (Win) 和 Opt + 箭头键 (MacOs) 的行为 (1468208)。
• 动画 > 全部暂停切换开关现在会在网页加载时保持其状态 (1446046)。
• 应用 > 存储 > 缓存存储已移至应用 > 存储 > 缓存部分 (1462622)。
• 改进了一些界面文本和工具提示：硬件并发工具提示、网络过滤条件文本和主菜单选项、应用树视图中的大写字母、“网络”>“标头”文本、“来源”>“替换项”和“文件系统”文本。

新的实验性功能

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

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

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

Chromium 问题：1424879。

增强型协议监视器

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

协议监控器获得了一个新界面，可让您更轻松地构建和发送 CDP 命令。现在，您无需在文档中查找命令及其参数，开发者工具会向您建议这些内容。

在协议监控器抽屉式标签页的右下角，点击 Show CDP command editor，选择目标，开始输入命令，选择建议的命令之一（如果需要），指定参数值，然后点击 Send command（Ctrl/Cmd + Enter）。

Chromium 问题：1469345。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告开发者工具问题，以报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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