移动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 ...
随机推荐
- Spring MVC的工作流程
前端控制器(DispatcherServlet): (不需要我们开发)接收请求,响应结果,相当于转发器,中央处理器.减少了其它组件之间的耦合度. springmvc.xml是SpringMVC的一个全 ...
- 远程办公《Remote》读书笔记:中国程序员在家上班月入过六万不是梦
这不是一本新书,这是一本很值得中国程序员看的老书,所以我不是来做卖新书广告的:) 但它的确是一本好书,这本书在Amazon上3个business categories排第一.作者Jason Fried ...
- 小白学习mysql之函数
## 导语 曾经我以为,学会了select.update.insert和delete之后,我就学会了数据库~,要不是到公司看到SQL里充满了密密麻麻的的各种函数,我差点就信了~,当初的自己是多么的天真 ...
- css的垂直居中
请先看博客:http://www.jb51.net/css/39629.html
- javascript去掉字符串前后空格
使用场景 当我们进行一些页面编辑时,字符串前后的空格,通常是无效的.因此需要在获取信息时,进行过滤. 比如: 输入:[空格][空格]a[空格]b[空格][空格][空格] 得到:a[空格]b 代码如下: ...
- 关于checkbox最保险和最模棱两可的方法
最保险的方法: 判断是否是选中的checkbox $('input:checked').length>0 要使checkbox呈现选中状态,最保险的方法,调用input.click()方法 最模 ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- Gson 的使用
Gson 的使用简介Gson 是 Google 开发的Java API,用于转换Java对象 和 Json 对象. 使用Maven 依赖<dependency> <groupId&g ...
- Oracle 11g 默认用户名和密码
安装ORACLE时,若没有为下列用户重设密码,则其默认密码如下: 用户名 / 密码 登录身份 说明 ...
- 修改Oracle权限的SQL及常见错误
1.在cmd命令中进入sqlplus:相应的在DOS命令下执行:(1)set ORACLE_SID = $INSTANCE_NAME(2)sqlplus /nolog(3)connect user/p ...