在日常的项目开发中,会遇到 Block HTTP 请求和 WebSocket 请求来测试一些场景。
HTTP
我们先来看看什么是 HTTP 请求
超文本传输协议 (HTTP) 是万维网的基础,通过超文本链接加载网页。HTTP 是一种应用程序层协议,旨在在联网设备之间传输信息,并在网络协议栈的其他层之上运行。HTTP 上的一个典型工作流程是客户端计算机向服务器发出请求,然后服务器发送响应消息
划重点,HTTP 请求是客户端向服务器发出的请求。而浏览器(比如Chrome) 为了开发人员提供了调试工具,可以在调试面板的 NetWork 上看到客户端发出的请求
点击该请求,可以看到关于该请求详细的内容
我们可以看到 HTTP 的请求头/请求体/响应体等等。在这一点上,Chrome 做的真好!!! 既然文章开头说了如何屏蔽 HTTP 请求,那笔者就不废话了
同样选择 HTTP 请求,点击鼠标右键,出现诸多操作的 Tooltip 框,其中有两个功能是我们需要关注的,分别是 Block request URL 和 Block request domain
- Block request URL 是阻止或拦截对某个特定 URL(统一资源定位符)的请求
- Block request domain 是阻止对特定域名下的所有资源或服务
当选择 Block request URL 后,
再执行 Replay XHR,观察其效果
可以发现其状态显示 blocked:devtools,意思就是说被 devtools 屏蔽了
从上面的操作流程中,可以发现 Chrome 的 devtools 工具自带屏蔽 HTTP 请求的操作。业务上需要屏蔽 HTTP 请求还是很简单的
WebSocket
说完了屏蔽 HTTP 请求,那么我们来看一下前端交互用到的另一种协议 WebSocket,看看如何屏蔽 WebSocket 连接
笔者找到一个与 pusher.js 有关的例子
选择后,点击鼠标右键,可以看到下面的效果
依旧提供 Block request URL 和 Block request domain 两个选项,全部选上看看
结果是结果是结果是并没有屏蔽 WebSocket 连接。也就是说 Chrome 的 devtools 工具无法屏蔽 WebSocket 连接
那该怎么屏蔽 WebSocket 连接呢?在这里介绍一个网络代理工具
打开网络代理工具工具,找到我们配置的文件,用 VSCode 打开配置文件,找到像这样的内容
比如我们要屏蔽 pusher.js 的服务,只需要加上这么一行,- DOMAIN-SUFFIX,pusher.com,REJECT
,然后重新启用网络代理工具, 刷新页面,那么 pusher.com 相关的服务全部被屏蔽
总结
-
屏蔽 HTTP 请求可以使用 Chrome devtools 提供 NetWork 面板功能完成
-
屏蔽 WebSocket 请求需要借助网络代理工具帮忙