Rosin-移动端页面开发调试Fiddler插件

转载 2015年11月17日 23:03:58


前言

随着移动互联网大潮流的到来,移动端H5开发需求也愈加强烈。而移动端页面的调试对开发效率起着重要作用,都有什么调试方法呢?

  • 对于Android设备,可通过设备连接Chrome浏览器进行调试(chrome://inspect/#devices)。
  • 对于IOS设备,可通过设备连接Mac的Safiri浏览器进行调试(仅Mac可调试)。
  • 对于网络,可通过Fiddler连接同一wifi设置代理进行调试。

上面的方案似乎可解决了大部分问题,当然也只是我了解的一部分调试方法。但很多的H5页面需要在一些App内的webview内打开,如微信(需要授权登录)等。这时候就不能使用手机浏览器调试,需要查看一些调试、错误信息的时候,得通过alert的方法来调试,非常傻。接下来介绍的这个插件Rosin,可以解决这个问题,来自腾讯AlloyTeam。

Rosin

Rosin是一个Fiddler插件,协助开发者进行移动页面开发调试,是移动web开发、调试利器。

下载安装

下载对应Fiddler版本的Rosin,解压之后运行RosinInstall.exe安装(如果电脑有权限控制,请“右键->以管理员身份运行”)

特性

  • 基于Fiddler实现
  • 配置页面匹配规则
  • 拦截console方法输出
  • 日志内容本地存储
  • 日志内容展示、搜索、过滤
  • 复杂对象JSON解析
  • 脚本运行错误捕获
  • 支持https日志输出

使用方法

1. 打开Fiddler,切换到Rosin Tab

2. 点击“Add Rule”按钮,打开规则添加面板

asfsdf

3. 选择规则匹配类型,支持三种匹配类型:

4. 输入具体的规则内容

dfsgsdfgfdg

5. 打开测试页面,在测试页面代码中调用console打日志,或者在PC控制台模拟

asdgsdfgsdf

6. 回到Fiddler,切换Rosin Tab的Log选项卡,选择对应的测试页面,查看日志

7. 对于复杂对象,双击Object字符区域选中,然后右键

dfagfsdbha

8. 复杂对象都会转为JSON对象,生成一个JSON View

dsgfsda

9. 功能区,一些功能按钮,包括:日志文件导出、日志清空、日志文件删除

10. 搜索功能,搜索框中输入文本,会自动高亮匹配结果,按Enter切换匹配区域

sdfgvbsdgb

11. JavaScript运行时错误信息捕获,并且支持跨域情况下的捕获(还记得那些Script.error 0的错误吗?javascript错误提示Script error.解析

dfbnfgnfgn

Rosin-移动端页面开发调试Fiddler插件








Fiddler工具使用说明

第一部分 工具介绍这个工具我已经使用比较长时间了,对我的帮助也挺大,今天我翻译的微软的文章,让更多的朋友都来了解这个不错的工具,也是我第一次翻译文章,不恰当之处请大家大家多多指正。介绍:你是不是曾经疑...
  • wzhibin
  • wzhibin
  • 2008年03月26日 14:37
  • 20574

创建Fiddler4的插件(总结)

因为测试的原因,所以需要抓包与分析。不过由于是https包,找了很多工具,还是决定用Fiddler4,毕竟它是免费的。Opensource的工具可完全没找到,甚至于纯library的也是要收费的。比如...
  • Marcus2006
  • Marcus2006
  • 2016年11月17日 10:27
  • 2150

动态加载与插件系统的初步实现(四):解析JSON、扩展Fiddler

按文章结构,这部分应该给出WCFRest项目示例,我想WinForm示例足够详尽了,况且WCFRest还不需要使用插件AppDomain那一套,于是把最近写的Fiddler扩展搬上来吧。 Fiddl...
  • dyllove98
  • dyllove98
  • 2013年07月02日 22:05
  • 4255

Fiddler插件开发

有这么一种应用场景: 你是做前端或APP开发的,需要调用服务端提供的接口,接口只能在公司内网访问;在公司外就无法调试代码了。 想在公司外访问怎么办呢? 如果在公司的时候将所有接口的响应内容都保存...
  • x333vxhl
  • x333vxhl
  • 2017年02月15日 09:07
  • 546

fiddler简单使用

1.简介 2.安装配置 3.常用的一些点 1.简介Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据...
  • DamonRush
  • DamonRush
  • 2016年08月01日 18:32
  • 1602

基于fiddler插件开发的移动测试网络监控与分析

由于目前App前端业务测试很少关注后端网络接口的异常情况,客户端QA在项目测试时往往局限于关注测试功能,导致测试粒度较粗。Fiddler是我们在客户端测试时使用比较普遍的工具,常用于HTTP抓包、构造...
  • baidu_mtc
  • baidu_mtc
  • 2015年12月18日 13:53
  • 3612

Fiddler抓取http请求(web/手机/移动端)

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框...
  • isealand
  • isealand
  • 2015年08月22日 13:49
  • 7863

Fiddler拦截并修改移动端请求

由于测试电商平台APP,需测试购买,但又限于公司一提到钱,就给种不给力,所以想到使用Fiddler拦截消息,修改一个虚拟商品ID,虚拟商品价格为0.01元,方便以后测试。 1.打开Fiddler,配置...
  • miss_hua
  • miss_hua
  • 2017年02月15日 15:10
  • 4135

Fiddler 调试手机上的http请求

以前做web的时候用过Fiddler来调试,Fiddler功能强大,能够在http请求的前后插入数据。然后有次就用它来把百度返回的主页logo给替换掉,然后给其他人看 ,当然是纯属好玩 = =   ...
  • ifangler
  • ifangler
  • 2015年03月06日 17:11
  • 1441

微信内移动前端开发抓包调试工具fiddler使用教程

 [微信开发利器]微信内移动前端开发抓包调试工具fiddler使用教程 2015-03-14 19:20:59 by 恩波 222 2 在朋友圈看到一款疯转的...
  • xpb1980
  • xpb1980
  • 2015年05月05日 14:32
  • 2833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Rosin-移动端页面开发调试Fiddler插件
举报原因:
原因补充:

(最多只允许输入30个字)