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

Sofia Emelianova
Sofia Emelianova

改进了“网络”面板

更快地在本地替换 Web 内容

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

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

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

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

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

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

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

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

Chromium 问题:146578514705321469359

替换 XHR 和提取请求的内容

现在,除了响应标头之外,您还可以替换 XHR 和提取请求的内容。借助此类替换项,您可以模拟 API 响应来调试网页,即使您的后端和 API 尚未准备就绪也是如此。

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

Chromium 问题:7921011469776

隐藏 Chrome 扩展程序请求

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

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

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

Chromium 问题:12578851458803

人类可读的 HTTP 状态代码

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

显示人类可读的 HTTP 状态代码之前和之后。

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

Chromium 问题:1153956

整齐打印 JSON 子类型的响应

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

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

Chromium 问题:406900

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

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

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

此外,您还可以在网络面板的优先级列中找到相同的信息,前提是已启用 复选框。 大请求行设置。

“广告联盟”面板中的“优先级”列。

Chromium 问题:14639011380964

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

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

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

此外,现在默认还会启用 设置。 设置 > 偏好设置 > 复选框。 自动在侧边栏中显示文件

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

Chromium 问题:14591931336599

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

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

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

无论您以何种方式运行 Chrome(无论是否使用该标志),问题标签页现在都会默认为所有新 Chrome 用户启用 复选框。 包含第三方 Cookie 问题复选框,因此会报告:

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

如果您是现有 Chrome 用户,并且希望看到有关即将弃用 Cookie 的警告,请务必选中此复选框。

如需对此进行测试,请在此演示页中检查 Cookie。

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

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

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

Chromium 问题:145883914626931466310

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

Chrome 团队将恢复对用户可能要浏览的未来网页进行完整预渲染。为了便于您调试此问题,DevTools 会在 Application 面板中添加 Preloading 部分。新的预提取和预渲染(统称为“导航预提取”)使用 Speculation Rules API,而不是基于链接的资源提示

此演示页面Application(应用)> Preloading(预加载)部分,您可以检查以下内容:

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

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

Chromium 问题:1410709

新颜色

您可能已经注意到,DevTools 现在采用了全新外观,与 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 命令。现在,您无需在文档中查找命令及其参数,开发者工具会为您提供建议。

协议监视器抽屉式标签页的右下角,点击 左侧面板已打开。 Show CDP command editor(显示 CDP 命令编辑器),选择一个目标,开始输入命令,选择其中一个建议的命令(如果需要),指定参数值,然后点击 发送 。 Send command(发送命令)(Ctrl/Cmd + Enter)。

指定并发送 CDP 命令。

Chromium 问题:1469345

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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