Chrome 117 DevTools 投喂指南

前言

Chrome在9月12号，发布了最新的版本117，更新了很多实用的DevTools 新特性，下面我们来一起体验下吧。

本文截图chrome版本，采用117正式版本。

文章尾部含有事例文件，用之前确保浏览器版本是117版本及以上
你会得到

完整的117的DevTools新增功能，量大，管饱~

每个新特性都含有实践在线链接可供操作和体验。

网络面板改进

更快地本地覆盖网页内容

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

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

如果设置了本地覆盖但被禁用，DevTools 会启用它们。如果尚未设置它们，DevTools 会在顶部的操作栏中提示你。选择一个文件夹来存储覆盖并允许 DevTools 访问它。

设置覆盖后，DevTools 会将你的配置同步到 Sources > Overrides > Editor ，以便覆盖网页内容。

请注意，被覆盖的资源在"网络"面板中用指示。将鼠标悬停在图标上可查看被覆盖的内容。

Chromium issues: 1465785, 1470532, 1469359.

开小灶环节

选择一个空文件夹即可。
同意文件访问询问完后，chrome会在你选择的文件夹中写入当前选中的文件，目录如下图
可以选择在本地编辑也可以选择在Sources>Overrides中点击对应的文件进行编辑。
点编辑器最左下角{}格式化后方便编辑，保存完后刷新浏览器看到小图标和页面更改的内容则表示覆盖成功。

tip: 留意Sources>Enable Local Overrides 的是否勾选

buy the way

Overrides功能在chrom65版本(18年)更新的功能，本次是优化使用体验，新增入口到NetWork处。
代码已附在文尾

覆盖XHR的内容和获取请求

现在，除了响应标头之外，你还可以覆盖 XHR 的内容并获取请求。通过此类覆盖，即使你的后端和 API 尚未准备好，你也可以模拟 API 响应来调试你的网页。

DevTools 目前支持以下请求类型的内容覆盖：图像（例如 avif、png）、字体、fetch 和 XHR、脚本（css 和 js）以及文档 (html)。 DevTools 现在将不支持的"Override content"选项灰色显示。

Chromium issues: 792101, 1469776.

开小灶环节

图像覆盖：google网站logo替换，只需要在本地拿相同文件名替换即可。

2. response覆盖

fetch: overriders headers覆盖 scarlet-roasted-cannon.glitch.me/网站访问coffee-cart.app/list.json fetch接口请求
1. 点击需要覆盖的请求右键选中overriders headers功能
2. add Hader功能添加响应头Access-Control-Allow-Origin:*
3. 刷新即可正常访问
4. 操作的头部信息会在Sources>Overrides>coffee-cart.app>.headers中保存

buy the way

更多详细内容请访问chrome官方DevTools文档
代码已附在文尾涉及网站
1. scarlet-roasted-cannon.glitch.me/
2. coffee-cart.app
再也不需要mock数据，代码无缝衔接，开发期间再也不用求人造测试数据了😏
Fetch/XHR的覆盖，目前只支持Response Header 和Response data 数据不支持请求头和请求参数的覆盖。

隐藏 Chrome 扩展程序请求

为了帮助专注于编写的代码并过滤掉可能已安装在 Chrome 中的扩展程序发送的不相关请求，网络(NetWork) 面板获得了一个新的过滤器。

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

重要提示

此外，DevTools现在不会尝试加载扩展的源映射文件，因此不会看到与代码无关的"无法加载源映射文件"的警告。

此外，由代码引起的类似警告现在显示在Sources 面板底部的信息栏中，而不是Console中。

Chromium issues: 1257885, 1458803.

开小灶环节

只是隐藏chrome插件发送的请求，是对结果的筛选，而不是阻止了插件的请求
下面的数字11/21的含义是：原网页11个请求/总网络请求书21个插件有10个请求。
在线验证

人类可读的 HTTP 状态代码

请求标头中的状态代码现在在 HTTP 状态代码旁边显示人类可读的文本，因此可以更快地了解请求发生了什么。

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

Chromium issue: 1153956.

JSON 子类型响应的优美打印

在Response 面板 application/[subtype]+json MIME subtype (例如 ld+json 、 hal+json 等）的请求，"响应"选项卡现在可以正确解析响应并美化它。

Chromium issue: 406900.

性能(Performance)：查看网络事件的获取优先级的变化

现在，性能(Performance) 面板在网络(NewWork) 轨道中的事件摘要(Summary) 中显示两个优先级字段：初始优先级(Initial Priority) 和最终优先级(Priority) ，而不仅仅是单个优先级(Priority )。通过这个附加字段，现在可以查看事件的获取优先级是否发生变化并调整下载顺序。有关更多信息，请参阅使用 Fetch Priority API 优化资源加载。

此外，可以在网络(NetWork) 面板的优先级(Priority) 列中找到相同的信息，并启用大请求行(Big request rows) 设置。

Chromium issues: 1463901, 1380964.

开小灶环节

这对资源加载顺序有很好的参考，从而方便调整资源优先级，得到更优的LCP，从而得到更好的网站浏览体验。
在线验证

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

设置(Settings) > 首选项(Preferences) > 代码折叠( Code folding ) 选项现在默认启用。此选项允许折叠代码块。

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

此外， 设置(Settings) > 首选项(Preferences) > 自动显示侧边栏中的文件( Automatically reveal files in the sidebar ) 现在也默认启用。

此设置使源(Sources)>页面(Page) 中的文件树在切换选项卡时选择在编辑器中打开的当前文件。

Chromium issues: 1459193, 1336599.

为了帮助构建更加私密的网络，并与其他浏览器的更新并行，Chrome 引入了隐私沙盒计划。这一举措从根本上增强了网络隐私，并可以以淘汰第三方 cookie 的方式维持健康的、广告支持的网络。隐私沙盒（Privacy Sandbox）具有逐步淘汰时间表，可让你轻松适应变化。

现在已经可以测试 Chrome 在第三方 cookie 逐步淘汰后的行为表现。为此，请使用 --test-third-party-cookies-phaseout 命令行运行 Chrome。要了解此标志的作用，请参阅Debugging cookies。

无论以何种方式运行 Chrome（带或不带该标志），问题(Issues) 选项卡现在都会默认为所有新 Chrome 用户启用 包括第三方 Cookie 问题(Include third-party cookie issues) 复选框，因此会生成报告:

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

如果现有 Chrome 用户想要查看有关即将淘汰的 cookie 警告，请务必选中此复选框。

要对此进行测试，请检查此演示页面上的 cookie。

此外，网络(Network) 面板中的 阻止的响应 cookie 过滤器(Blocked response cookies) 已被重新措辞，以明确它仅显示阻止的响应 cookie。

Chromium issues: 1458839, 1462693, 1466310.

开小灶环节

更多对于逐步淘汰第三方cookie的信息请查看这里

在应用程序(Application)面板中调试预加载

Chrome 团队正在恢复用户可能导航到的未来页面的完全预渲染。为了对此进行调试，DevTools 将预加载(Preloading) 部分添加到了应用程序(Application) 面板。新的预取(prefetching)和预渲染(prerendering)（统称为"导航预加载"-navigational preloading）使用推测规则 API，而不是基于链接的资源提示。

在此演示页面的应用程序(Application)>预加载(Preloading) 部分中，你可以检查：

推测规则(Speculation Rules) 列出了当前页面上找到的所有规则集。

预加载(Preloads) 列出规则集中所有预取和预渲染的 URL。

此页面(This Page) 列出了当前页面的预渲染状态。

有关更多调试预加载规则信息，请参阅Debugging speculation rules。

Chromium issue: 1410709.

新颜色

你可能已经注意到，DevTools 现在具有焕然一新的外观，可以更好地与 Chrome 保持一致。影响因素之一是新的配色方案。

此版本 (117) 为 DevTools 带来了更多 UX 改进，这些改进已经提到并进一步列出，包括许多改进的 UI 文本

Chromium issue: 1456677.

Lighthouse 10.4.0

Lighthouse 面板现在运行 Lighthouse 10.4.0。最值得注意的是，此版本添加了以下新的可访问性审核：

例如：

另请参阅完整的更改列表。要了解在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse: Optimize website speed这篇《优化网站速度》文章

Chromium issue: 772558.

DevTools 的 C/C++ WebAssembly 调试扩展现已开源

DevTools 的 C/C++ WebAssembly 调试插件现已开源，并源码存储在 DevTools 前端存储库中。此扩展启用 DevTools 中针对编译为 WebAssembly 的 C++ 程序的调试功能。有关更多信息，请参阅调试 C/C++ WebAssembly。

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

Chromium issue: 1410709.

其他亮点

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

CSS 嵌套："元素"面板现在显示嵌套子项的整个选择器链 (1172985)。
应用程序(Application) > 清单(Manifest) 现在有一个窗口控件覆盖(Window Controls Overlay) 部分，用于检查清单中是否存在 display_override 值并提供相关文档的链接。
来源(Sources) > 页面(Page) 树现在执行以下操作，包括但不限于 (1442863)：
- 如果文件夹的所有内容都被忽略列出，则文件夹会变灰。
- 如果文件夹的所有内容都来自源映射，则将文件夹着色为橙色。
性能(Performance) ：开始录制时，捕获设置现在会自动隐藏 (1455498)。
源(Sources ) > 编辑器(Editor )恢复了 Ctrl + Arrow 行为 (Win) 和 Opt + Arrow (MacOs) (1468208)。
动画(Animations) > 暂停所有(Pause all ) 切换现在可以在页面加载时保持其状态 (1446046)。
应用程序(Application) > 存储(Storage) > 缓存存储(Cache storage) 已移至应用程序(Application) > 存储(Storage) > 缓存部分(Cache section) (1462622)。
一些 UI 文本和工具提示得到了改进：硬件并发工具提示、网络过滤器文本和主菜单选项、应用程序树视图中的大写、网络(NetWork) > 标题文本(Headers texts)、源(Sources) > 覆盖和文件系统文本(Overrides and Filesystem texts)。

开小灶环节

Css嵌套 : 是在chrome112版本(23年4月4日发布)新增的功能，各浏览器支持程度请看这里，117版本目前是优化devTools的css嵌套功能的显示修复，demo地址

新的实验功能

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

网站用户可能会开始在其设备上启用新的实验性 prefers-reduced-transparency CSS 媒体功能，以表明他们偏好减少透明效果。你可以考虑考虑此偏好以提高网站的可访问性。为了帮助您，渲染抽屉(Rendering) 选项卡现在可以模拟 prefers-reduced-transparency: reduce 设置，以便可以构建解决方案原型并测试你的网站在这种情况下的行为方式。

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

DevTools 团队对 Luke Warlow 推出此功能表示感谢。

Chromium issue: 1424879.

增强型协议监视器

Chrome DevTools 使用 Chrome DevTools Protocol (CDP)来检测、检查、调试和分析 Chrome 浏览器。如果你是 Chromium 或 DevTools 开发人员，协议监视器为你提供了一种查看 DevTools 发出的所有 CDP 请求和响应以及发送 CDP 命令的方法。

协议监视器有一个新的界面，让你可以更轻松地构建和发送 CDP 命令。现在你不必在文档中查找命令及其参数，DevTools 会向你推荐它们。

要启用此功能，请勾选 设置(Settings)>实验(Experiments)> 协议监视器(Protocol Monitor) 。