开发者社区> shadowcat> 正文

移动开发中Fiddler的那些事儿

简介: 来源:http://www.cnblogs.com/strick/p/4570006.html 当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。 但是现在我要在手机上面调试页面,这个时候就没有这么方便的现成工具了。 后面发现了Fiddler,设置一下后,就能用这个来抓取手机访问页面时候的请求了。 下面是文章大纲:
+关注继续查看

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


当我以前在调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

1)过滤域名

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

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

  

 

2)自定义请求头或响应头属性

Set request header与Set response header,设置自定义请求头与响应头。可以模拟跨域等问题。

坐标的是不肥请求头,右边是部分响应头,Origin与Access-Control-Allow-Origin对应了起来,必须一模一样,少个“http”都不行。

  

 

六、插件

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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(上)
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(上)
25 0
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(中)
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(中)
20 0
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(下)
《智能前端技术与实践》——第1章 开发环境配置——1.6 使用 Google 浏览器——1.6.2 Google 浏览器扩展程序(下)
23 0
iTab浏览器插件教程
iTab是一个好看好用的自定义卡片式浏览器新标签页扩展。 安装iTab标签页扩展后,您将告别呆板无趣的原生标签页,享受iTab标签页为您带来的个性化新体验:
110 0
入门兵器谱,测试相关软件系列——Fiddler抓包工具使用教程
Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件)。Fiddler 要比其他的网络调试器要更加简单,因为它不仅仅暴露http通讯还提供了一个用户友好的格式。
120 0
推荐一款万能抓包神器:Fiddler Everywhere
由于Fiddler基于.NET开发,对于像我这类Mac系统的资深用户来讲,显然不太合适,为了解决Mac下使用Fiddler的问题,早在2016年官方出过一款名为Fiddler for OS X Beta 1 尝试来解决这类问题, 但这款工具必须通过Mono才可以在Mac上使用。并且在Mac上使用是非常不稳定, 有非常多的问题。 所幸的是,在2018年,官方又进一步推出了一款名为:Fiddler Everywhere的抓包工具,今天就给大家聊一聊这款工具。
710 0
移动开发中Fiddler的那些事儿
当我以前在调PC端网页的时候,Firefox有Firebug,Chrom也有自己的调试抓包工具,用起来很方便。
81 0
测试工具Fiddler(二)—— 入门使用
测试工具Fiddler(二)—— 入门使用
94 0
测试工具Fiddler(一)—— 基础知识
测试工具Fiddler(一)—— 基础知识
120 0
+关注
shadowcat
酱油程序猿 CSDN 博客:http://blog.csdn.net/freeking101
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
Re: 移动开发的未来
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载