在日常的项目开发中，会遇到 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 请求需要借助网络代理工具帮忙
