Chrome 117: 聊聊 Network 的变化

Chrome 117 已经发布一段时间, 该版本引入了许多令人兴奋又有意思的功能!! 其中 Network 面板的升级变化相当显著!! 本文主要就是针对这些变更上手做个实践顺便做个记录!

引言

Chrome 117 已经发布一段时间, 该版本引入了许多令人兴奋又有意思的功能!! 其中 Network 面板的升级变化相当显著!! 本文主要就是针对这些变更上手做个实践顺便做个记录!

一、替换请求

Network 面板升级中, 最大的更新就是允许在 Network 面板中修改请求 响应内容 以及 响应头, 该功能可以帮助我们:

调试线上 BUG
开发阶段设置模拟数据, 无需等待后端完成相应接口的开发
不再借助于第三方代理工具、代理服务

运行机制:

当我们在控制台(DevTools)中对请求进行替换时, 控制台(DevTools)会将修改后的文件的 副本 保存到我们指定的文件夹中(所以首次使用需要创设置一个文件夹、并且设置权限)
当我们重新加载页面时, 控制台(DevTools)会提供本地修改后的文件, 而不是网络资源, 即使我们无权访问这些接口、或者接口不存在, 依然生效

补充: 所有替换功能只有在开启控制台(DevTools)情况下才会生效

1.1 替换静态资源文件请求

本节介绍如何替换网络(Network)中的一些静态资源文件, 包括 JS、CSS、JSON 等静态资源...

如下图, 进入网络(Network)面板, 选择静态资源文件请求、右键、选择 替换内容

这时在控制台(DevTools)上方就会出现提示词, 提示需要 选择一个文件夹, 这里点击选一个文件夹即可(因为替换时会生成副本文件、或者配置文件, 需要有地方存储)

选择文件后, 在页面顶部会弹出提示词, 提示需要给设置的文件夹设置权限, 如下图所示; 这里点允许即可

到此初始步骤基本就完成了, 下面将跳转到 源代码/来源 面板, 该面板下有 替换 一栏, 所有替换时生成的副本、配件文件内容都会在这里列出, 我们可以直接在这边对副本内容进行编辑!! 用于覆盖原始请求!!

回到 Network, 刷新页面, 会发现我们设置了 替换 的请求, 图标右下角会有个粉色小圆点进行标记!!! 用于提示开发者!!!

最后的效果如下图: 替换了页面的 CSS 文件, 给所以元素字体设置了 20px

1.2 管理

如上文演示, 所有 替换副本文件 或 配置文件, 都可以在 源代码/来源 面板 替换 模块中进行维护, 下面对该模块进行简单讲解, 同时介绍另一种管理方式

进入 替换副本文件 或 配置文件 管理列表, 这里有两种方式:

方法一: 在 Network 中随便选一个请求右键、点击 显示所有替换项, 就会切换到管理列表

方法二: 直接进入 源代码/来源 面板, 选择 替换 模块

管理列表一些功能讲解:

启用/关闭 替换功能, 如下图切换 checkbox 即可, 这里设置完可能需要刷新才能生效

清空所有配置, 如图点击右上角小图标即可

删除、重命名等其他功能: 选中副本文件, 右键将出现菜单栏, 可对副本文件进行增删改等操作...

另一种管理方式: 其实所以副本都是常规的文件, 都被保存在最初设置的那个目录中, 这里其实我们可以直接在 vscode 打开该目录, 直接在 vscode 对副本文件进行管理

1.3 替换响应内容

上面我们讲解了如何替换静态资源文件, 下面我们尝试替换下常规的 fetch/XHR 请求, 这里操作方式基本一致

我们先看一下原始接口(127.0.0.1:3000/v3/todo-detail)的响应内容是啥, 直接看图:

下面就开始替换接口(127.0.0.1:3000/v3/)的响应内容: 如下图选中对应接口、右键、选择 替换内容

这时会跳转到, 源代码/来源 面板下的 替换 模块, 并且会根据请求 URL 路径创建 对应层级 的目录以及副本文件

下面尝试在编辑器中对副本文件进行编辑(当然你也可以直接在 源代码/来源 面板下中进行修改), 如下图所示, 修改副本(todo-detail)文件的 title(追加了 -666666)

最后刷新下页面会发现, 接口返回的数据会被替换成对应副本文件的内容, 并且请求响应的 TAB 会有小粉点的标记

最后补充下: 对于 404 的接口, 我们一样是可以使用 替换内容 功能, 来实现 Mock 数据; 这样就可以避免在开发阶段后端接口可能并为上线, 而影响我们开发进度, 只需要提前定义好接口 Mock 即可

1.4 替换响应头

上文介绍了如何替换 fetch/XHR 请求响应内容, 下面来看下如果替换 响应头

同样如果要修改请求头, 这里有两种开启编辑的方式:

方法一: 直接选择请求、选择 替换标头

方法一: 选择请求, 鼠标 hover 到任意一个 响应头 中会出来一个编辑按钮, 点击即可

上面两种方式, 最后的效果是一样的, 都会唤醒网络(Network)面板中响应头的编辑功能, 如下图所示:

实际上: 这里会在我们最初设置的目录中, 按照请求路由创建相同层级的目录以及配置文件 .headers

对于修改过的响应头(包括新增), 对应的那行会被高亮, 同时鼠标 hover 时会有删除按钮

下面我们看下在 源代码/来源 面板下的 替换 模块中生成的配置文件 .headers, 相关说明如下图:

我们回到 vscode 中, 看下生成的 .headers 长啥样, 如下图所示这里生成的其实就是一个 JSON 格式的配置信息

如上图其实我们配置 2 条规则, 它们是有交集、且存在部分冲突的(都设置了 token), 那么它们之间优先级是如何的? 这里其实是按照数组顺序, 也就是规则的顺序进行覆盖的, 也就是如果存在相同响应头的配置, 后面的会覆盖前面的, 如下图所示:

二、JSON 数据支持格式化

对于响应数据类型(Content-Type)为 application/[subtype]+json、ld+json、hal+json 等, 响应 选项卡能够支持被格式化、高亮、折叠; 如下图所示, 对于 JSON 类型的响应内容, 允许通过右下角 {} 按钮对内容进行格式化、高亮, 同时还支持代码折叠....