Chrome 117: 聊聊 Network 的变化

墨渊君
2,645 阅读7分钟

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

image

引言

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

一、替换请求

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

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

运行机制:

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

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

1.1 替换静态资源文件请求

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

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

image

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

image

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

image

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

image

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

image

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

ScreenFlow

1.2 管理

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

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

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

image

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

image

  1. 管理列表一些功能讲解:

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

image

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

image

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

image

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

image

1.3 替换响应内容

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

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

image

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

image

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

image

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

image

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

image

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

ScreenFlow

1.4 替换响应头

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

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

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

image

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

image

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

image

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

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

image

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

image

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

image

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

image

二、JSON 数据支持格式化

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

ScreenFlow

三、增加 HTTP 状态码可读性

对于请求状态, 不再是简单显示个状态码, 后面还会新增一个状态说明

image

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

image

四、隐藏扩展程序的请求

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

image

五、参考

大家好, 我是墨渊君, 如果您喜欢我的文章可以:

avatar
文章
阅读
粉丝