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代理调试HTTP

从事前端开发的同学一定对 Fiddler 不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行 Google 一下,本文不再作科普,简单的说它可以代替Chrome开...

fiddler使用笔记

fiddler使用笔记(强大好用的web调试工具)Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯, 设置断点,查看所有的“进出”Fiddler的数...

移动端调试-charles设置代理,fiddler设置代理,MTL 工具使用,weinre (查看dom元素,查看console.log输出的数据)

from:http://www.cnblogs.com/summer_shao/p/3919397.html
  • hotdust
  • hotdust
  • 2016年04月26日 18:23
  • 1156

app移动端H5页面开发调试之Chrome远程调试

移动端采用原生开发还是H5开发一直接争论不休。但不论怎么说,采用H5开发app不仅仅快速高效,而且布局简单、漂亮,目前许多的框架已经可以做到让人看不出是原生还是H5开发了。 采用H5开发有一个好处就是...

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档 去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有...

总结移动端页面开发时需要注意的一些问题

1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 有些手机网站我们看到如下声明: DOCTYPE html PUBLI...

移动端HTML5页面开发相关总结

一.基本Meta !-- 设置缩放 -- meta name=viewport content=width=device-width, initial-scale=1, user-scalable=n...

移动端页面开发资源总结

工作了有一段时间,基本上都在搞前端的开发,由于公司的需要,加一个移动端,工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内容并不是很全,以后每遇到一个问题都会总结在这里,分享给大...

前端移动端页面开发

一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Rosin-移动端页面开发调试Fiddler插件
举报原因:
原因补充:

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