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
类型的响应内容, 允许通过右下角 {}
按钮对内容进行格式化、高亮, 同时还支持代码折叠....

三、增加 HTTP 状态码可读性
对于请求状态, 不再是简单显示个状态码, 后面还会新增一个状态说明

并且响应内容也会是对应状态的文本说明

四、隐藏扩展程序的请求
如下图所示, 新增一个选项, 可隐藏掉一些扩展程序(插件)相关的请求:
