基于puppeteer的网络拦截工具flyover

为什么需要网络拦截工具

通常我们会遇到这样的场景:

  1. 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个很好的工具fiddler可以完成这个功能,当然mac下也有其对应的工具Charles,但是工具收费,在不付费的前提下,使用体验很差。
  2. 线上js资源出了bug,线下修复之后通过测试区不好还原场景,因为只有在线上的数据环境下才能重现bug,但是在线上的代码一般都是混淆过的,调试很不友好(这里不考虑生成soucemap的场景)
  3. 其它需要使用本地资源替换线上资源的情况

flyover是什么

  • flyover是一个简易的本地网络代理工具,基于Puppteer做网络拦截,可以实现对线上压缩代码的调试。
  • flyover基于node & puppeteer实现 & 代码开源(当然发布没几天,可能会有很多问题,欢迎大家issue)

如何使用flyover

  1. npm install -g flyover
  2. flyover --help具体细节见 https://github.com/JerrZhang/flyover ,欢迎issue 和 star

flyover 实现原理

我们知道所有请求,无论是页面请求还是js 发起的各种请求,最终都是通过浏览器软件发起的,服务器响应后,都是响应给浏览器的,那么整个工程可以细分为如下流程(个人理解):

  1. 请求浏览器发起请求
  2. 浏览器接到请求申请,发起请求到服务器
  3. 服务器处理后响应给浏览器
  4. 浏览器把响应给上层引擎(比如UI引擎& js引擎等)

puppeteer提供了在第2阶段和第4个阶段的拦截,可以完成浏览器接到请求之后,终端到远程服务器的请求,转而读取本地资源响应给上层引擎;依次来实现对资源的本地化拦截和替换;技术实现也比较简单,只需要在启用拦截后,监听page 对象的request事件进行处理即可,核心代码如下:

//启用请求拦截
 this.page.setRequestInterception(true);
 //监听请求事件
this.page.on('request', (req) => {
    //如果包含在拒绝列表中的文件
    let denyFile = this._isInCtrllist(req.url(), ctrlsfiles);
    if (denyFile.getIsDenyFile()) {
        //直接响应本地文件内容
        req.respond({
            body: denyFile.getFileContent()
        });
    } else {
        //其它情况请求继续
        req.continue();
    }
})

简单的几行代码就实现了一个初级的网络拦截工具,是不是很简单实用?

完整代码 https://github.com/JerrZhang/flyover

不足

  1. 只能使用chrome浏览器来测试,这是由于puppeteer本身的限制决定的
  2. 还无法支持sourcemap,2.0中会支持添加sourcemap来进行调试

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自由而无用的灵魂的碎碎念

在windows server 2008 r2上安装nokia pc 套件

我下载了最新版的nokia pc套件,不过发现无法在windows server 2008 r2上安装:

1053
来自专栏程序员互动联盟

【答疑释惑】如何知道电脑是32位还是64位

近来在联盟中经常看到有人问64位系统与32位系统的问题。这里把相关问题几种回答下。 首先我们要明白一个常识,64位操作系统可以使用32位系统的软件,但是32位系...

2883
来自专栏qqqqq

腾讯云弹性网卡绑定多IP利用外网访问教程

1.1K1
来自专栏雨过天晴

原 mac brew

1796
来自专栏游戏杂谈

替换系统自带的记事本

系统自带的记事本功能比较弱,所以一般我会选择使用notepad2.exe来替代它。

2693
来自专栏北京马哥教育

httpd服务归纳:浅谈I/O模型

nginx 利用 rewrite 屏蔽IE浏览器 1. 四种理论的I/O模型 1) 调用者(服务进程): 阻塞: 进程发起I/O调用...

30112
来自专栏编程软文

postman从入门到精通

今天总监让我给测试同事们培训postman,使用过postman的朋友应该知道,这个简直就是前后端接口调试神器。根据平时的经验以及自己到网上看了相关的帖子,对于...

1171
来自专栏bboysoul

asciinema linux下录制终端屏幕的软件

asciinema是一款linux下终端录制的软件,非常好玩也非常牛逼,关键是可以非常方便的录制,录制完成之后也可以非常方便的嵌入网页之中。

983
来自专栏帘卷西风的专栏

关于linux服务器进程监控及自动重启的简单方案

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

2122
来自专栏后端技术探索

狼厂项目实践:通用检索框架准实时流的设计与实现

检索对实时性的要求很高,不仅是对索引建立、结果召回、策略干扰等核心部分,也包括数据录入的部分。检索的数据流主要包括全量数据与增量数据,其中全量数据是在运行前就已...

891

扫码关注云+社区

领取腾讯云代金券