用Web抓包分析工具Livepool 实现本地替换开发
LivePool 是一个基于 NodeJS,类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。
这是官方的介绍:
LivePool 是一个基于 NodeJS,类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。
功能特性还挺多:
- 基于 NodeJS, 跨平台
- 支持 http 抓包和本地替换调试,Https/WebSockets 直接代理转发(暂不支持本地替换)
- 便捷的 UI 管理界面,跟 Fiddler 类似,降低学习成本
- 可以脱离 UI 后台运行,适应于某些不需要抓包,只需要使用替换和简单路由的场景
- 基于项目的替换规则管理,方便高效,规则支持拖曳排序
- 支持基于请求路径的本地文件替换,支持基于请求路径的路由转发(host 配置)
- 替换类型支持:文件/文件夹替换,combo合并替换,qzmin替换(批量combo),delay延时等
- 支持自动设置系统代理
- 支持规则过滤,只显示关注的请求
- 提供构建 http get/post 请求界面,方便接口调试
- 特色功能:模拟gprs/3g等低网速(mac only)
- 特色功能:支持离线站点到本地,并自动代码格式化
但是让我热血沸腾的是他的本地替换开发功能,下面就让我们一步一步体验这个神奇的过程……
1. 安装NodeJS:由于本工具是基于NodeJS的,所以首先要安装NodeJS,下载地址:http://nodejs.org/download,选择适合你的版本:
2. 通过npm(依赖包管理工具,可以理解为nodejs的maven)安装Livepool,在命令行直接输入:npm install livepool -g,npm会自动下载并安装Livepool及其依赖。
3. 通过命令行输入Livepool来运行,执行成功的结果参加下图:
4. 打开Livepool的图形界面,通过浏览器访问:http://127.0.0.1:8002,界面如下图所示(点击放大):
5. 设置Livepool浏览器代理,选择界面中的菜单 Tools -> System Proxy,设置完浏览任意网页,应该可以看到它抓到的请求了。
6. 然后在下方的Pool面板中创建一个项目和一个规则,即可实现编辑本地静态文件CSS或JS,实时查看效果,省去了搭建环境的时间。
更多功能和替换规则请参见:https://github.com/rehorn/livepool