hustxiaoc/livepool

Fiddler like cross platform debugging proxy for web developers base on NodeJS

LivePool

Fiddler Like cross platform debugging proxy for web developers base on NodeJS

LivePool 是一个基于 NodeJS，类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具，是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。

版本

version: 0.7.9

特性

• 基于 NodeJS, 跨平台
• 支持 http 抓包和本地替换调试，Https/WebSockets 直接代理转发（暂不支持本地替换）
• 便捷的 UI 管理界面，跟 Fiddler 类似，降低学习成本
• 可以脱离 UI 后台运行，适应于某些不需要抓包，只需要使用替换和简单路由的场景
• 基于项目的替换规则管理，方便高效，规则支持拖曳排序
• 支持基于请求路径的本地文件替换，支持基于请求路径的路由转发（host 配置）
• 替换类型支持：文件/文件夹替换，combo合并替换，qzmin替换（批量combo)，delay延时等
• 支持自动设置系统代理
• 支持规则过滤，只显示关注的请求
• 提供构建 http get/post 请求界面，方便接口调试
• 特色功能：模拟gprs/3g等低网速（mac only）
• 特色功能：支持离线站点到本地，并自动代码格式化

安装

• 先安装 nodejs, 参考官网 http://nodejs.org

从 git 下载安装

• 下载， 运行 livepool

git clone https://github.com/rehorn/livepool

• 安装依赖

cd ~/livepool
npm install

• 运行 livepool

node livepool.js

使用 npm 进行全局安装

npm install livepool -g

• 运行 livepool

livepool

使用

• 将浏览器的代理设置为 http://127.0.0.1:8090, chrome 可以通过 switchsharp 进行
• 打开浏览器，http://127.0.0.1:8002
• 打开需要调试页面地址，如 http://im.qq.com

局域网调试（如 wifi局域网）

• 将浏览器的代理设置为对应的局域网ip http://192.168.1.*:8090, chrome 可以通过 switchsharp 进行
• 打开需要调试页面地址，如 http://im.qq.com

调试移动 web 页面

• 将手机的 wifi 连接代理设置为：服务器 192.168.1.*(对应的局域网 ip)，端口 8090
• 打开浏览器测试

网络代理访问

• 某些网络环境下，比如公司内网，需要配置特定代理才能访问外网，livepool 支持网络代理访问
• 找到当前运行目录下 rules/global.js 配置文件，加上如下代理配置项目，重启启动即可
• proxy:'http://proxy.tencent.com:8080'

界面说明

1. 菜单区
2. Session（显示所有http请求信息）
3. TreeView（使用树状结构显示Session信息）
4. 功能Tab: Pool（按照项目管理本地替换规则）
5. 功能Tab: Inspector (session查看器，查看请求header，body等信息)
6. 功能Tab: Composer（http请求模拟器，可以模拟http get/post请求）
7. 功能Tab: Filter（session过滤器，根据规则过滤session，只保留关注的）
8. 功能Tab: Log（日志显示）
9. 功能Tab: Timeline（session时间轴，comming soon）
10. 功能Tab: Statics（统计，对站点性能进行评估，comming soon）

使用 LivePool 进行抓包

拦截所有的 http 请求，查看分析请求内容

设置代理

浏览器代理

手动将浏览器代理设置为 127.0.0.1:8090, Chrome 可使用 SwitchSharp 等插件进行代理切换，这样浏览器发出的所有的请求就能通过 livepool 中抓取

系统全局代理

livepool 可以设置系统全局代理，实现系统所有 http 请求的抓取

在 Session 中浏览请求

• 灰色背景：命中本地替换规则，并返回了本地内容的请求
• 绿色：js 请求
• 玫红：css 请求
• 蓝色：json 请求
• 黑色：其他类型请求

使用 inspector 查看请求内容

http request

可以查看http request的header，cookie等信息

http response

可以查看http response的header，cookie，视图等信息

视图切换

可以查看图片、JSON、文本代码，并且对代码进行格式化，快速添加替换规则

tips: 便捷操作

• 双击 sesssion 区域请求，快速查看请求内容
• 在 TreeView 中节点，快速滚动到该请求，并查看对应请求内容
• 右键复制请求 url
• 右键在浏览器打开该 url
• 右键 replay，再次发起该请求

本地替换开发

将浏览器请求替换为本地文件，进行线上调试或本地开发，修改立刻生效

新建项目

填写项目名称和根目录

新建替换规则

填写handler替换规则或router路由规则

文件替换规则

延时规则

将请求阻塞指定的时间，再返回给浏览器，可以用来测试极端网络下资源阻塞的页面表现

combo规则

将本地的多个文件合并为一个之后，返回给浏览器，多个文件路径之间使用“|”作为间隔符，一般用来开发调试站点js/css资源分模块进行文件存储的情况

qzmin规则（批量combo规则）

combo规则批量版本，使用一个json文件指定合并规则，便于替换和管理，文件格式请参考范例，find.all.qzmin

文件替换

将某个请求拦截，并使用本地文件替换，返回浏览器，可以用于本地开发调试

文件夹替换

将指定路径的请求，使用本地文件夹下同名文件进行替换（未找到对应文件则直接代理），返回浏览器，可以用于本地开发调试

tips: 便捷操作

• 拖曳规则可以将规则进行快速排序
• 从 session（界面区域1）拖曳请求到 Pool（界面区域4），可以快速创建本地替换规则
• 快捷键：shift+c 复制当前选中项目或规则
• 通过工具栏 export/import 进行规则的导入导出

路由规则

• 使用 ‘-’ 表示直接代理：将请求直接代理转发到目标机器
• ip 路由：将命中的请求路由到指定机器（相当于配置 host）

请求构建器

模拟 http 请求，可以修改get/post请求参数

过滤器

使用规则过滤不重要的请求

日志

显示系统信息、错误日志等

模拟低网速[mac]

模拟网络质量较差网络，查看站点表现

• GPRS: 48kbit/s
• Edge: 64kbit/s
• 3g: 348kbit/s
• ADSL: 768kbit/s
• WIFI: 2048kbit/s

离线站点到本地

• 将站点内容离线到本地，并自动代码格式化，便于查看
• 站点保存到当前文件夹 Sites 下

快捷键

TODO

• 完善 Timeline时间轴、Stat统计界面
• LiveReload、AlloyDesinger集成，
• 支持构建工具 task 管理与运行，如 Grunt, Gulp, Mod
• More....

Thanks

• extjs(sencha)
• http-proxy
• express
• socket.io
• underscore