Web 开发调试工具 Livepool

GPL
JavaScript
跨平台
腾讯
2014-07-21
滔哥

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

版本

version: 0.7.5

特性

  • 基于 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

界面说明

  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....

加载中

评论(19)

北京d路飞
北京d路飞
调试功能超牛!跨平台抓包工具,比破解charles等方便多了;支持替换返回内容,比如修改客户端显示的用户等级数据,适合客户端开发、测试验证各种接口数据边界值;支持replay重发,方便服务端调试;支持对单接口修改路由,方便不修改客户端,路由到测试服务器、或测试接口;。。。。。。还有一些神奇功能可以基于它开发,如接口文档一键生成功能,本人已开发完成,求贡献代码到项目的方法
bobshi
bobshi
good~ Livepool
第三方支付接口
第三方支付接口
这哥们是利物浦的球迷吧 Livepool
angrytoro
angrytoro
要不要这么强大啊,有了这个,都可以放弃fiddler了 Livepool
李惟
李惟
屌丝程序员表示:目前chrome自带调试器,已经够用 Livepool
fmxzhou
fmxzhou
这个玩意更高级点。 Livepool
伫见燕然
伫见燕然
利物浦……OMG.....没用过,好像很强大的样子 Livepool
匿名t3a
匿名t3a
F12用来干嘛的 这轮子挺大 Livepool
王洪旭
王洪旭
f12 Livepool
苏生不惑
苏生不惑
我勒个去 Livepool

暂无资讯

暂无问答

whistle--全新的跨平台web调试工具

版权声明:本文由吴文斌原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/151 来源:腾云阁 https://www.qcloud.com/community whistle是基于Node实现的跨...

2016/11/07 18:45
161
0
实用高效,27款腾讯热门开源项目推荐

腾讯作为互联网行业的一大巨头,一直都不吝啬将好的技术开放,与广大开发者共享,未来也将推出VR开放平台和AI技术。腾讯在全球合作伙伴大会披露了未来五年的发展思路,在技术共享方面,腾讯希...

2016/10/19 07:11
14.5K
39
腾讯的76款开源软件

工具: AlloyDesigner(可视化Web构建工具)致力于提高前端生产效率的浏览器内运行工具。 AlloyLever(Web开发调试工具) APT(Android性能测试工具)无需源代码,支持第三方应用,适合小白用...

2016/11/14 13:39
59
0
ceph的体系结构

本文翻译自:http://docs.ceph.com/docs/hammer/architecture/ 一些名词的翻译方式: scalable :可扩展性 high availability:高可用 map:图 cluster map:集群运行图 monitor:监视器 acting...

03/08 17:50
16
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部