轩枫阁

首页 / Web前端 / 插件工具 / Rosin-移动端页面开发调试Fiddler插件

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

前言

随着移动互联网大潮流的到来,移动端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

参考:AlloyTeam/Rosin

66/435
68/435

相关文章

文章评论

  1.   新婚之夜,妈妈递给新娘一个镯子,说:“这是咱们家祖传的,以后就得交给你了。”
      爸爸递给儿子一件护膝,新郎很不理解地说:“爸,你给我玩意干啥,我早就不骑摩托车啦。”
      爸爸回答:“以后跪搓衣板时用得上,这也是祖传的!”

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]