徒手撸web版fiddler

490 阅读2分钟

简介

作为一名前端,想必大家都了解fiddler。它的核心的功能是抓包、代理。

bproxy是基于NodeJS开发,对标fiddler的一款反向代理工具。主要解决我们日常开发过程中需要处理的网络请求。

使用场景

fiddler已经很强大,但是也有不足、不适用的场景。 bproxy使用场景:

  • 跨平台、集成到项目中,有助于前端架构师搭建完善的开发环境。
  • 代理前端资源到本地devServer,有助于我们日常的本地开发。
  • 对单个请求的处理,有助于我们同时联调多个环境,比如设置host。
  • 特殊请求走二级proxy,比如google。
  • 前端的各种mock诉求,跟业务代码完全隔离。mock请求、超时、异常等。

功能介绍

代理请求到本地文件

日常开发过程中,我们经常需要调试各个环境。比如上线前,我们通过本地代码调试日常环境。或者利用本地代码调试线上问题等。 我们可以把入口文件代理到本地。大大提高开发效率。 参考bproxy配置:

config.rules.push({
  regx: 'https://cdn.domain.com/path/js/*.js',
  file: '/path/js/a.js',
})

批量代理请求到本地目录

现在应该没有哪个项目只有一个js文件的了吧,所以作为上一个规则的升级版,我们经常需要代理多个文件到本地。 参考配置:

config.rules.push({
  regx: 'https://cdn.domain.com/path/js/*',
  path: '/path/js/',
})

批量代理请求到本地devServer

现在基本也没有写一行代码就build一次目标文件出来了,所以作为上一条规则的升级版,我们需要批量代理多个文件到本地测试服务上; 参考配置:

config.rules.push({
  regx: 'https://cdn.domain.com/path/js/**',
  redirect: 'http://localhost:3000/js/'
})

自定义响应

如果bproxy提供的一些交互规则不能满足项目需求,当然你可以自定义请求返回内容。 案例:《使用sass编译后返回css》

模拟若网

有一些特定需要关注弱网环境的情况,我们需要将网络主动设置延迟响应,看看端上的效果,我们也考虑了,参数是delay: number;

支持https

支持https,主要是为开发者优化了自定义证书的一些繁琐操作,bproxy提供了一键安装证书的功能(bproxy -i)。不过,这个功能暂时只提供了MacOs开发者使用。

一键mock文件

一键mock可以快速配置一个请求的代理规则,然后我们开发者只需要简单修改响应文件对应的字段,来调试部分字段的预期值。

有兴趣的同学不妨安装试一试。

安装和使用

// 安装
npm i bproxy -g

// 启动
bproxy -s

更多内容详见:github.com/zobor/bprox…

最后

写这个工具的目的是为了提高开发效率,也希望为开源社区贡献一份力。