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

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

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

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

下面是文章大纲:

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

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

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

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

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

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

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

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

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

二、HOST修改

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

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

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

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

Fiddler抓取到的如下所示:

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

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

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

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

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

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

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

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

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

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

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

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

三、AutoResponder

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

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

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

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

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

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

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

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

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

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

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

四、指令

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

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

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

?sometext

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

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

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

=status

=method

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

@host

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

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

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

!dns hostname

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

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

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

五、过滤Filter

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

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

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

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

六、插件

1、JavaScript Formatter

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

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

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

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

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

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

2、Gallery

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

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

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

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

参考资料:

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 的一些技巧分享

http://www.cnblogs.com/strick/p/4570006.html

上一篇:用于linphone的C#包装器


下一篇:Nginx在局域网中使用ip_hash负载均衡策略,访问全部分发到同一个后台服务器