前言

随着 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

      • 董政 2017 年 12 月 28 日

        我这里也是同样的问题。

  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 这个不错

发表评论