前言

随着Web前端开发由PC转向Mobile,作为前端工程师,除了需要去学习掌握移动端的新特性外,还需要面对大量移动端特有的难题,其中之一就是——怎么调试移动端页面? 针对调试的问题,现在已经有一些很好的解决方案,比如:weinre、chrome remote、手Q浏览器Inspector,不过这些方案的门槛都较高,需要满足一些额外的条件。目前,在日常的开发调试工作中,打日志依然是一种常见的调试手段,通过日志内容来判断当前页面运行的状态,而日志的输出形式又有很多种,有img请求、dialog弹窗、alert等等,但这些输出方式都不能很好的满足我们的需要,甚至存在一些问题,所以Rosin诞生了。

关于Rosin

Rosin 是一个Fiddler插件,它能接收页面中的console的输出,将内容持久存储在本地,并展现在Fiddler面板。 如果你的项目是通过Fiddler代理来开发调试手机页面,那么Rosin将会是你的好帮手。
项目地址:  http://alloyteam.github.io/Rosin/

特性

  • 基于Fiddler实现
  • 页面规则可配置
  • 无需额外代码,直接console
  • 日志文件本地存储
  • 日志内容管理、搜索、过滤
  • 复杂对象解析,生成JOSN树
  • javascript脚本运行错误捕获,支持跨域

版本

v1.0.0

下载安装

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

使用方法

  1. 打开Fiddler,切换到Rosin Tab
  2. 点击“Add Rule”按钮,打开规则添加面板
    step-1
  3. 选择规则匹配类型,支持三种匹配类型:
  4. 输入具体的规则内容
    step-2
  5. 打开测试页面,在测试页面代码中调用console打日志,或者在PC控制台模拟
    step-3
  6. 回到Fiddler,切换到Rosin的Log选项卡,选择我们的测试页面,查看日志
  7. 对于复杂对象,双击Object字符区域选中,然后右键
    step-4
  8. 复杂对象都会被转为JSON对象,生成一个JSON View
    step-5
  9. 功能区,一些功能按钮,包括:日志文件导出、日志清空、日志文件删除
  10. 搜索功能,搜索框中输入文本,会自动高亮匹配结果,按Enter切换匹配区域
    step-6
  11. javascript运行时错误信息捕获,并且支持跨域情况下的捕获(还记得那些Script.error 0的错误吗)
    step-7

更新日志

v1.0.0 — 2015.01.20
* 支持日志级别按颜色区分
* 支持按级别筛选日志
* 支持日志文件导出
* 支持日志内容清除
* 支持日志文件删除
* 支持日志记录自动清理
* 支持日志内容JSON对象解析
* 支持script error信息输出
* 支持跨域script error信息获取
* 优化日志展示

v0.0.1 — 2014.12.03
* 支持console日志接收
* 支持fiddler日志展示
* 支持页面规则配置
* 支持日志列表展示

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/

  1. wkylin 2017 年 8 月 13 日

    没有看到console.log的输出….

  2. Youmi UED | 前端优秀文章分享 第1期 2016 年 12 月 18 日

    […] Rosin 是一个Fiddler插件,它能接收页面中的console的输出 地址:http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/ […]

  3. 吉-teamoR9-吉 2016 年 4 月 30 日

    可以试一试Charles. 或者直接用Safari->Develop连接要调试的设备。

  4. www.kai-zhou.com 2016 年 3 月 10 日

    请问怎么uninstall?

  5. 安装不了 2015 年 10 月 22 日

    安装不了啊

  6. Destroyer 2015 年 8 月 26 日

    装不了

  7. TAT.iptton

    TAT.iptton 2015 年 8 月 14 日

    考虑加进Rythem中

  8. slimcheng 2015 年 7 月 16 日

    同求,有mac版的么

  9. wangcai 2015 年 6 月 11 日

    这下,fiddle与手机,特别是微信内置浏览器 联调 爽了。

  10. ed 2015 年 5 月 26 日

    Mac上有好的移动web开发调试工具吗?

  11. zwz 2015 年 5 月 19 日

    安装 rosin log 里没有看到符合规则的 请求 是空的 什么问题呢?

    • dfa 2015 年 5 月 19 日

      fidder2,fidder4都试过,碰到同样问题。

    • TAT.jessedeng

      TAT.jessedeng 2015 年 5 月 20 日

      https://github.com/AlloyTeam/Rosin/issues
      麻烦你到github上提交下issues,附上规则截图我查一下。

      也可以试一下下面的方法:
      1、rule配置,看一下是否和在浏览器里面输入location.host得到的结果一致,比如页面在www.qq.com,需要配www.qq.com,配qq.com是不生效的,暂不支持子域名匹配;
      2、检查一下html代码中head标签内是否有其他属性,比如head lang=”cn”,建议去掉只保留head

  12. libo 2015 年 5 月 17 日

    插件解决的是主要是日志记录的问题是吗? 我还想是不是有关远程调试的内容呢。

    • TAT.jessedeng

      TAT.jessedeng 2015 年 5 月 20 日

      第二版会增加这些功能,请期待

  13. maiyatang 2015 年 5 月 5 日

    强大

  14. TAT.iAzrael

    TAT.iAzrael 2015 年 4 月 7 日

    好东西, 支持跨域error这个不错

发表评论