移动开发中Fiddler的那些事儿

当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。

但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了。

后面发现了Fiddler,设置一下后,就能用这个来抓取手机访问页面时候的请求了。

下面是文章大纲:

  1. Fiddler配置与手机无线的配置
  2. HOST修改
  3. AutoResponder
  4. 指令
  5. 过滤Filter
  6. 插件

一、Fiddler配置与手机无线的配置

1、首先电脑和手机要使用同一个无线

        

2、配置Fiddler,单机Tools=》Fiddler Options

  

3、配置手机无线,我的手机是Android机,IOS也是差不多的,就是加个代理和端口,主机名就是你电脑的IP地址,自己用ipconfig看下就有了。

  改好后,要重新连接一下,才能让Fiddler抓取到。

  

二、HOST修改

我一开始调试手机网页,都是先把文件上传到绑域名的服务器上,然后再访问测试,这样效率有点低。

以前的PC网页都是在本地调试好后上传到服务器上的,现在我也想这么做,这个时候就需要在Fiddler中配置域名转向了。

1、例如用手机访问http://www.pwstrick.com/fiddler/这个页面:

  

Fiddler抓取到的如下所示:

  

2、接下来我要让http://www.pwstrick.com/fiddler/访问的是我本中的工程文件。

点击Tools=》HOSTS打开的页面如下:

  

满心欢喜的以为域名已经转向了,用浏览器打开,duang一下是下面那个鸟样:

  

后面我想到得在我本地Apache上面配置个虚拟目录:

  

刷新下页面:弹出的内容就变成本地设置的了

  

现在访问pwstrick地址的HOSTIP就变成了127.0.0.1了

  

三、AutoResponder

刚上面的host修改,是把所有这个域名下的文件都重定向。但有的时候只需要测试某个文件,这个时候就可以用AutoResponder了。

1、将第一个和第二个打勾,第二个不打勾的话,所有页面就都不能访问啦,第二个选项的意思是不匹配的请求都保持不变。

  

2、在下面做个匹配规则,我选的是完全匹配,这里可以用正则表达式,高大上的东西。

  

  

3、满怀期待的刷新下页面,出来了用的是demo2.js文件中的内容

  

点击进入fiddler文档页面查看更多规则事例...

这个请求还可以让他延时请求,或者其他方式,选项如下:

  

四、指令

在软件的底部有个打指令的地方,目前我用的最多的就cls,就是清屏幕,其他指令还不怎么用,我比较low,囧。点击查看fiddler官方文档

  

刚查看文档,发现几个未来应该会用到的指令,这里做个小记录

?sometext

  

  

输入?pwstrick然后直接按回车就会看到搜索URL中包含pwstrick的地址。

=status

=method

选择响应状态=status (200、404等)或请求方法=method的会话(POST、GET等)

@host

选择会话中域名包含host的会话,此时按Enter键可高亮所有匹配的结果

将会把api.pwstrick.com、www.pwstrick.com等URL选中

  

!dns hostname

进行目标域名的DNS查找,并将结果显示在LOG选项卡上

  

  

五、过滤Filter

  

选项好多,这里我打算把pwstrick.com给过滤出来,然后就把那个选项打勾

接着点击Actions中的Run Filterset Now,不过滤请求的话,太多眼都看花了,随便访问个线上网站就有几十个请求,唰唰下来

  

六、插件

1、JavaScript Formatter

将压缩过的JavaScript脚本格式化,查看别人网站时候的压缩脚本时候用很给力

首先得要先下载这个插件然后安装,点击页面搜索到JavaScript Formatter,点击下载。

安装好后重启Fiddler,接下来邮件那个URL就会看到下图中的红色框选项,点击一下。

  

接下来就能看到好看的JavaScript脚本了,不过不足的是不是彩色的,没有高亮。这个时候可以借助另外一个插件配合一下,那就是Syntax-Highlighting Add-Ons,也是在官网的插件页面搜索标题下载,下载完后就会多个SyntaxView选项,下图中的截图是我已经下载好了的画面,并且Syntax-Highlighting Add-Ons这个插件还可以做些其他功能具体可以查看文档。

         

2、Gallery

这是看图片的一个插件,没有这个插件的话我还得复制URL,然后在浏览器中输入看图片。

我抓取了花瓣网的页面做演示:我先做了个域名过滤,旁边的Gallery一栏就会自动出来图片。

  

  

参考资料:

http://www.6san.com/789/  Fiddler过滤指定域名

http://tid.tenpay.com/?p=3011  前端开发利器—FIDDLER

http://ju.outofmemory.cn/entry/148593  使用前端开发利器Fiddler调试手机程序

http://www.cnblogs.com/mcho/p/3983066.html  Fiddler (六) 最常用的快捷键

http://my.oschina.net/leejun2005/blog/151103  关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享

时间: 2024-10-11 11:35:46

移动开发中Fiddler的那些事儿的相关文章

移动开发中Fiddler的那些事儿 (转)

当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便. 但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了. 后面发现了Fiddler,设置一下后,就能用这个来抓取手机访问页面时候的请求了. 下面是文章大纲: Fiddler配置与手机无线的配置 HOST修改 AutoResponder 指令 过滤Filter 插件 一.Fiddler配置与手机无线的配置 1.首先电脑和手机要使用同一个无线        2.配置Fiddle

总结iOS开发中的断点续传那些事儿

前言 断点续传概述 断点续传就是从文件赏赐中断的地方重新开始下载或者上传数据,而不是从头文件开始.当下载大文件的时候,如果没有实现断点续传功能,那么每次出现异常或者用户主动的暂停,都会从头下载,这样很浪费时间有木有.所以呢,项目中实现大文件下载的时候,断点续传功能是必不可少了.当然咯,断点续传有一种特殊的情况,就是我们的应用呗用户kill掉或者应用crash,要实现应用重启之后的断点续传,这种情况就是我们将要解决的问题. 断点续传的原理 要实现断点续传,服务器必须是要支持的.目前最常见的两种方式

移动开发中“单位”的那些事儿

前言 在移动开发中我们常常会考虑度量单位的问题,在传统pc的web开发中用的比较多的是px(css像素),在android开发中一般则用dp.sp.px(物理像素)等,而移动web开发中同样也是用px(css像素)做单位,通常会结合viewport进行缩放.本篇blog就梳理一下在移动开发中用到的各种单位以及他们之间的联系和区别. 绝对单位和相对单位 如题,首先来看看什么是绝对单位和相对单位: 绝对单位:即值在任何环境下都不会变化的常量,如我们日常生活中经常会用到的in(inch英寸).cm(厘

支付宝(alipay)即时到账收款接口开发中的那些事儿

不会做,看看也可以会,要做好就还是需要多学习 国庆回来就一直没状态,看完<银河护卫队>,印象最深的竟然是只有两句台词的呆萌groot,昨天才休息一天,大耍大吃,今天还是把昨天的知识学习一下.前些天同事做一网站,需要用到支付宝接口,由于同事才学习PHP,我比他多学习了两天,我就帮忙参考了一下. demo就是教程 支付宝官方网站(https://b.alipay.com/order/techService.htm)下载了开发包,直接拷贝了PHP版本作为我们需要的版本,里面直接就是一个demo.要怎

Java开发中的23种设计模式详解(转)

设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合理的运用设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应,每一个模式描述了一个在我们周

0. Java开发中的23种设计模式详解(转)

设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合理的运用设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应,每一个模式描述了一个在我们周

(转) 浅析HTML5在移动应用开发中的使用

(转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67 2012-03-07  来自 UECD.163.com  编辑 wangguo 有38498人浏览 收藏 html5 移动开发 app UI < > 猎头职位: 上海: Junior Product Manager 前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对

iOS开发中的数据安全隐患和解决方案

移动互联网的兴起,每天都会涌现大量的app产品,无论公司开发还是个人开发,大家都在追求更快的抢占市场,但是确忽略了打磨产品,也忽略了移动开发中的数据安全隐患,如果我们用Charles工具,很容易截获到很多知名的app的传输的隐私数据,包括用户名和账号信息等.比如下图是我用Charles(青花瓷)软件截获糗事百科明文方式传输的用户名和账号信息,网上了解到神州租车和一嗨租车的用户登陆也是明文传输,明文传输很容易被截获.下文我就将我今天查阅各种资料学到的关于iOS中数据安全的知识总结下来和大家分享.

Java开发中的23种设计模式

一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. 行为型模式,共十一种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式. 其实还有两类:并发型模式和线程池模式.用一个图片来整体描述一下: 二.设计模式的六大原则 1.开闭原则(Open Clo