TAT.jessedeng 移动 WEB 调试利器——Rosin
In 未分类 on 2015年03月30日 by view: 17,612
18

前言

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

如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们
有你的支持，我们会做得更好！
分享到:0

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

    回复

发表评论