移动web调式利器---Rosin研究

阅读目录

  • 关于Rosin
  • Rosin在Fiddler中如何使用

回到顶部

一:关于Rosin

Rosin是Fiddler的一个插件,它能接受页面中的JS的console.log输出的值,将值持久存储在本地,我们可以通过Fiddler代理来开发移动端页面。

更多关于Rosin的具体介绍,可以看如下链接:

http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/

如果我们使用的是Fiddler2的话,请下载如下:

Rosin  For Fiddler2

如果我们使用的是Fiddler4的话,请下载如下:

Rosin  For  Fiddler4

我们可以下载完成后,直接点击下载完后的.exe文件进行安装即可完成,安装完成后,重写打开Fiddler,我们可以看到Fiddler的选项卡中有Rosin选项卡;如下所示:

回到顶部

二: Rosin在Fiddler中如何使用

首先打开Fiddler,切换到Rosin选项卡中,然后点击 add Rule按钮后,打开规则添加面板如下:

可以看到如上下拉框,它支持三种类型的匹配方法,第一种默认是 域名匹配 如上所示;

第二种是路径匹配,如下所示:

第三种是正则匹配,如下所示:

在匹配规则 Rule添加具体的规则即可,比如如上Type右边有相应的提示,如何使用,我们目前使用的最多的是 域名(host)匹配;下面我们来具体看看域名匹配,我们首先在本地服务器下做一个demo;

1.  首先我们来添加Rule,点击Add  Rule按钮后,会弹出如下框:

进行如上配置即可;

2. 点击ok按钮后,变成如下:

现在我们需要在手机端访问域名下 192.168.1.101下的页面,在访问页面之前,我们需要如下设置即可:

如何使用手机调式移动端页面,请点击如下链接查看,还是和之前一样设置即可:

http://www.cnblogs.com/tugenhua0707/p/4623317.html#_labe10

如上设置完成后,我们使用手机来访问如下页面:

假如我现在a.html页面的JS代码如下:

运行完成后,我们回到Fiddler,切换到Rosin的Log选项卡,选择我们的测试页面,查看日志;如下所示:

我们也可以进行一些复杂的对象输出,JS代码如下:

<script>

var obj = {"a":1,"b":11,"c":‘abc‘};

console.log(obj);

</script>

同样我们进入页面后运行下,然后我们使用Rosin选项卡的Log标签来查看结果如下:

我们可以双击右键 ObjectC4AO  弹出JSON View,点击此按钮;

进入如下页面查看

我们也可以切换到Text标签内查看;如下所示:

等等查看效果,基本的 域名匹配如上所示;其他的匹配也是一样的意思,而我们在页面上调式使用到最多的是可以使用域名来匹配即可;

时间: 2024-11-05 13:50:58

移动web调式利器---Rosin研究的相关文章

Web调试利器fiddler

抓包工具HTTWATCH 已经过时啦,快来看看当代的宠儿Web调试利器fiddler .fiddler不管是对开发还是测试,还是产品:都是不可多得的工具:开发用来抓包定位问题; 测试用来抓包,回放测试记录,构造发包用例后续请看下面具体链接http://www.testroad.org/News/show.aspx?id=368

移动web适配利器-rem

移动web适配利器-rem 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦. 兼容性 先看看兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持 大部分主流浏览器都支持,可以安心的往下看了. rem设置字体大小 rem是(font size of the root element),官方解释 , 意思就是根据网页的根元素

前端编程提高之旅(十八)----移动端web流行交互技术方案研究

   在停止实习后,生活最大变化在于没有项目的压力,可以根据兴趣场景,探索技术实现.这个过程对于个人来说,动力自内而外,需求自上而下,都由个人把握.    生活在移动互联网井喷的今天,同时又关注前端技术,平常对微信端流行的交互(或者说玩法)有着特殊的敏感性.如果说之前接触MVC框架还是对单页面网站.CSS3前沿特效有一个概念的话,微信朋友圈及好友分享网页,则把国内网页构建的流行趋势,从幕后推向前台.    乐帝通过研究移动端web流行交互,构建起了一个初步可行的技术方案,用来实现单页面与DOM动

ios的web调试利器--weinre

项目 http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html 原理 1 使用nondejs建立一个服务器: 2 使用注入方式插入一个js到被调试web页面中.这个js会尽可能的拦截页面上的实现得到上层的数据,如ajax请求,但是像图片直接加载,之类是无法得到的.同时定时向服务器发心跳码,或是返回命令结果,这个见面称之被调试页: 3 有pc上打开服务器ip,会打开一个像firebug的界面,这个称之调试台页: 这样,被调试

Linux下DNS服务(Bind9)之Web管理利器-NamedManager部署说明

NamedManager 是一个基于Web的DNS管理系统,可用来添加.调整和删除DNS的zones/records数据.它使用Bind作为底层DNS服务,提供一个现代Ajax的Web界面,支持 IPv4和IPv6.该应用程序很稳定,在生产环境中使用没有任何问题.过多的介绍在此就不做说明了,下面说下NamedManager环境部署过程: 1)下载NamedManager的rpm安装包 [[email protected] ~]# hostname dns.kevin.cn [[email pro

web调试利器_fiddler

此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.fiddler简介 直接引用官网介绍 The free web debugging proxy for any browser, system or platform! fiddler是一个Web调试代理,能够支持任意浏览器.系统或平台的网络调试代理,且允许你记录所有电脑和Internet之间的所有http(s)请求,并允许你查看.设置断点.以及修改输入和输出的数据. 二.fiddler六大关键特性 官

自编清空远程web空间利器

学习了php的filesystem,运用它的功能,可以轻松批量删除远程服务器的文件和文件夹.但一定要小心,删错了,就后悔莫及哟! 应用场景:当我们远程测试某些项目的时候,不需要了,就要删除,以免浪费空间,也可以预防漏洞.但使用FTP删除很慢,所以上传这个文件,设置好你要删除的文件夹,直接运行这个url就搞定了! [code="php"]<?php // php递归删除目录和文件function delAll($path){        if(!is_dir($path)){ 

Firefox开发者专版浏览器,Web开发者利器.

2015的11月9日,Firefox迎来了自己的十周岁生日.在庆祝Firefox十周年之际,Mozilla发布了Firefox开发者专版,这是首款专门为开发者打造的浏览器. 浏览器中独特的暗色调设计.使用了简洁明了的开发者工具主题,为屏幕中的内容节省空间的同时,与应用开发工具保持统一的暗色外观. Firefox开发者专版(中文版)下载:https://www.mozilla.org/zh-CN/firefox/channel/#aurora

前端网站集合

原网址https://segmentfault.com/a/1190000007062464 内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2项,只供参考.更多内容细看分类. 知乎:程序员应该如何注意身体健康? js:JavaScript 标准参考教程 js:JavaScript 秘密花园 Es6:ECMAScript 6入门 Es6:深入浅出E