发布于 2015-01-06 08:06:18 | 184 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程,程序狗速度看过来!

Livepool Web 开发调试工具

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


本文为大家讲解的是如何在Linux下安装LivePool web开发调试工具的方法,感兴趣的同学参考下。

LivePool简介

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

安装

先安装 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 下

快捷键



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务