移动web调式利器---Rosin研究
移动web调式利器---Rosin研究
阅读目录
一:关于Rosin
Rosin是Fiddler的一个插件,它能接受页面中的JS的console.log输出的值,将值持久存储在本地,我们可以通过Fiddler代理来开发移动端页面。
更多关于Rosin的具体介绍,可以看如下链接:
http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/
如果我们使用的是Fiddler2的话,请下载如下:
如果我们使用的是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标签内查看;如下所示:
等等查看效果,基本的 域名匹配如上所示;其他的匹配也是一样的意思,而我们在页面上调式使用到最多的是可以使用域名来匹配即可;
移动web调式利器---Rosin研究的更多相关文章
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
手机H5 web调试利器--WEINRE (WEb INspector REmote) 调试移动端页面,优先选择使用chrome浏览器调试,如果是hybrid形式的页面,可以使用chrome提供的ch ...
- 移动web适配利器-rem
移动web适配利器-rem 前言 提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移 ...
- Web调试利器fiddler介绍
转载:http://blog.chinaunix.net/uid-27105712-id-3738821.html 最近在使用fiddler,发现这个真是非常最犀利的web调试工具,笔者这里强烈推荐给 ...
- 深入浅出新一代跨平台抓包&调式利器Fiddler Everywhere
什么是Fiddler Everywhere? Fiddler Everywhere is a web debugging proxy for macOS, Windows, and Linux. Ca ...
- 深入浅出,新一代跨平台抓包&调式利器Fiddler Everywhere
什么是Fiddler Everywhere? Fiddler Everywhere is a web debugging proxy for macOS, Windows, and Linux. Ca ...
- Web调试利器OpenWindow
有些时候调试web页面,在循环里面我们不方便设置断点进行调试,或者调试起来比较麻烦,我们就可以用openWindow的方法打印出想要查看的信息,既方便又省时. 代码如下: OpenWindow = w ...
- Web 前端利器Emmet 的HTML用法总结
在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 ...
- Web调试利器fiddler使用
fiddler官网:http://fiddler2.com/ http://wenku.baidu.com/view/053e79d776a20029bd642dc1 http://www.cnblo ...
- 有关Web常用字体的研究?
Windows自带字体: 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋GB2312:FangSongGB2312 楷体GB2312:K ...
随机推荐
- 解决vs2013使用Git推送到远程仓库报错的问题
在上一篇<让PowerShell使用Git>中可以让PowerShell运行Git命令,那么就开始使用. 1.从远程仓库克隆项目 GitHub和Git.oschina都是不错的免费托管网站 ...
- Openwrt Uboot烧写
Openwrt 烧uboot 需要慎重,一般买一个带不死uboot的路由器再折腾会比较安全,因为 openwrt firmware对uboot分区进行了保护,而且带有不死uboot的路由器可以通过we ...
- Opencv step by step - 鼠标事件
鼠标事件有下面几种(没有滚轮事件,比较遗憾): #define CV_EVENT_MOUSEMOVE 0 滑动 #define CV_EVENT_LBUTTONDOWN 1 左键点击 #define ...
- OSX 上安装 Scrapy 的那些坑
Scrapy 这个爬网框架真心不错,但在OSX上安装总是会出现各种的问题,在这里就作一个收集汇总.我的系统环境是 OS X El Capitan (10.11.1) 首先要保证 pip , virtu ...
- (旧)子数涵数·Flash——初识ActionScript
一.什么是AS(ActionScript) ActionScript,简称AS,中译为"动作脚本语言". 用于在Flash上实现一些光用Flash无法实现的功能. 在Flash界面 ...
- .net 开发人员如何自处
关于N家还是J家,谁家更阔绰有前途的问题,每年都要讨论一会,当然和各位兄弟在岗位上迷茫,不知位置在哪有关系,不过这个问题基本算是伪问题,这种东西放到更高的维度,真的什么都不是. 但是为什么J家好像是不 ...
- JavaScript事件---事件绑定和深入
发文不易,转载传播,请亲注明链接出处,谢谢! 内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容 事件绑定分为两种:一种是传统事件绑定(内联模型, ...
- neutron中的dhcp功能
1. 分布式dhcp 特点: 1)一个dhcp port对应多个host上的tap设备. 2)基于port event的network与agent的绑定与解绑定,即创建tap设备.namespace. ...
- sql-char和varchar,nvarchar的区别
数据类型的比较 char表示的是固定长度,最长n个字 varchar表示的是实际长度的数据类型 比如:如果是char类型,当你输入字符小于长度时,后补空格:而是varchar类型时,则表示你输入字符的 ...
- Java-EnumSet
如下 package 集合类.Set类; /** * Set不允许重复数据 */ /** * 这个类是1.5开始有的, * 目前个人使用量几乎为零,很少使用 * 其使用方式和普通的Set没有区别,只是 ...