【每周一讲】Fiddler4的使用

1、其实,这段是铺垫

1.1、场景
  • 场景1:需要调试上线产品的浏览器兼容性问题。假如有Bug发生在Firefox或者Chrome这种有控制台支持调试的浏览器下一切都好说,可是假如bug只发生在遨游,TT,世界之窗,搜狗...这种的没有调试功能的浏览器下...我又该怎么办?
  • 场景2:需要调试服务器上某个HTML/CSS/JavaScript文件。一般情况下,我们都是将文件直接进行修改,然后重新发布再去做验证,这样就容易影响到测试环境或者生成环境的稳定性。更好的做法是,我们在本地开发环境中直接修改文件并进行验证,然后发布到测试环境,这样能保证测试环境的稳定,可是又比较繁琐。
  • 场景3:因为前后端分离的缘故,前端开发时,服务接口经常需要使用jsonp调用,实际上线又是合并打包为同一个域使用ajax。我想直接使用ajax,我不用jsonp,这样我就不用考虑实际上线和开发时候的差别了。
  • 场景4:对于静态资源是另一个内网ip192.168.0.235的服务器上,生产环境中,(因为我们对外的ip基本只有一个)使用nginx等反向代理分发使得html中使用资源的地址可以都是相对地址,如/resource/images/1.png,但是开发时,我们没有nginx也不懂它,又不想改这个资源的相对地址的写法,我如何能做到?
  • 场景5:恶搞没有安全性校验的服务。犹记得之前某团的外卖有个手机点屏幕次数的游戏,这个游戏中点击次数超过多少分才能抽奖。试想了下,它会不会游戏分数是前端生成后传到后台的。用工具抓了下包,结果发现真的是这样,结果发现分数我可以随便改,轻松站在排行榜第一位,真是不想吐槽之。。。
1.2、一些东东

前端人员在使用chrome浏览器调试网页时,对自带的Web Inspector肯定不会陌生,我们常用NetWork选项来查看资源加载的情况。下面是chrome浏览器的截图:

有些人可能有听说过有用过HttpWatch、Firebug、Wireshark、TcpTrace...

都是什么鬼,不都是一些网络抓包工具吗!是的,各取所好各有所长,不过都不是本文要描述的小鬼Fiddler。

2、Fiddler是什么鬼

我需要一个http抓包工具,不管用什么浏览器,甚至不一定是浏览器,可以是Java程序、.Net程序……它都可以胜任,用它,我能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据。没错,Fiddler小鬼就是这么个强大好用的工具。

它是在web server 和 client 之间搭了一层 proxy,所有的请求都会经过它,如下图所示:

Fiddler在web client 与 server 之间充当了一个请求及响应的代理角色,它会在本地建立一个默认代理服务,端口默认为8888,为此我们访问一下此端口,可见如下效果:

当启用 Fiddler时,IE会设定为使用系统代理,代理地址:127.0.0.1, 端口:8888,因此如果你的浏览器在开启Fiddler之后没有设置相应的代理,则Fiddler是无法捕获到HTTP请求的(FireFox需要手动设置代理,chrome浏览器我使SwitchyOmega)。如下是启动Fiddler之后,IE浏览器的代理设置:

当Fiddler退出的时候它会自动注销,这样就不会影响别的程序。不过如果Fiddler非正常退出,这时候因为Fiddler没有自动注销,会造成网页无法访问。解决的办法是重新启动下Fiddler或者去把代理设置去掉。

3、认识小鬼Fiddler

借用网上博客图片,我们可以看到几个区域:

(1)监听开关 - 只有两种状态,capturing表示捕捉状态。(ps,但是,我试了我的Fiddler都会捕捉 (/ □ \))

(2)监听类型 - 四种状态分别对应 监听所有请求;监听浏览器请求,监听非浏览器请求,和全部隐藏(Hide All)

(3)命令行 - 允许你直接输入命令,详细官方文档介绍 http://docs.telerik.com/fiddler/KnowledgeBase/QuickExec,常见得命令有:

  • help  打开官方的使用页面介绍,所有的命令都会列出来
  • cls    清屏  (Ctrl+x 也可以清屏)
  • select  选择会话的命令
  • ?.jpg  用来选择jpg后缀的图片的会话
  • bpu  截获request

(4)请求会话列表 - 请求列表的信息分别有 结果(Result),协议(Protocol),主机名(Host),网页地址(URL),内容大小(Body),缓存(Caching),响应的HTTP内容类型(Content-Type),请求所运行的程序(Process),注释(Comments),自定义(Custom)。会话第一列的图标含义:

(5)请求相关信息 - 此部分功能主要对于http请求的分析统计修改等。

  • Statistics - 统计资料信息
  • Inspectors - 强大的检查器,类似的Chrome等浏览器的Inspectors可能你不会陌生
  • Timeline - 时间轴
  • Composer - 用来创建HTTP Request 然后发送。 你可以自定义一个Request, 也可以手写一个Request, 你甚至可以在请求会话列表中拖拽一个已有的Request. 来创建一个新的HTTP Request
  • AutoResponder - 自动回复器,这个功能非常常用
  • Filters - 请求与响应的会话过滤器

4、一些功能技巧

4.1、Filters请求与响应的会话过滤

请求会话列表中存在上百个请求,怎么过滤想要的,可以启用 Fiddler  Filters强大的过滤机制,还可以依据正则来过滤,如: REGEX:(empty.js.gif|__utm.gif) ,具体你可以参考:http://fiddler2.com/documentation/KnowledgeBase/Filters,下图英文看得懂的话应该很好理解设置,记得使用要勾选Use Filters。

4.2、断点,修改Request、Response

两种方式

A、第一种(这种方法会中断所有的会话,不大实用,建议用命令。):打开Fiddler 点击Rules-> Automatic Breakpoint  ->Before Requests/After Response /Disabled

B、第二种(这种方法只会中断命令执行的url): bpu在请求开始时中断,bpafter在响应到达时中断,bps在特定http状态码时中断,bpv/bpm在特定请求method时中断。

以bpu为例演示断点功能(摘抄):

(1)以淘宝无线H5为例,在浏览器打开m.taobao.com首页。

(2)在Fiddler命令行输入区输入“bpu”回车执行清掉原有的断点,然后输入“bpu m.taobao.com/search.htm”回车执行,接下来就会中断URL中包含此地址的请求。

(3)在浏览器淘宝首页顶端搜索框输入“充气娃娃”后点击搜索,此时请求被中断,在Fiddler会话列表面板看到以红色小图标开头被中断的会话

(4)点击会话列表中被中断的会话,依次进入Inspectors-->WebForms。此时请求并未发出,q参数即为查询关键字,我们修改为“nike”,然后点击“Break on Response”按钮。注:在这里实现修改了请求数据,其它的post数据,甚至是headers里的cookie、referer、user-agent等都可以修改。

(5)右边面板Response区有响应内容了,这时Fiddler再次中断了response,响应已到达Fiddler代理,但还没返回给浏览器。点击Inspectorsg下Response区的“response is encoded and may need to decoded before inspection.Click here to transform”后,即可在TextView tab看到返回的html内容。在这里修改response中的title部分,然后点击“Run to Completino"把修改后的response返回给浏览器。

(6)回到浏览器,搜索出关键字为“nike”的结果,而不是“充气娃娃”,标题也被修改为“搜索充气娃娃”。

其他:

命令行输入 go 会断续执行所有中断,再次输入 bpu 会清除所有的断点。

如上第四点图所示,这里有很多的操作选择,就是选择输出内容,选择之后,实际的响应数据就会这些替代,特别是最后一个find 操作a file:这个我们可以中断一个图片,然后这里选择本地的一张图片,这样我们就可以替换页面的图片。比较强大的场景就是例如现网js出了问题,但是一般现网的js是压缩过的,在firebug中根本无法调试,这样我们可以把它映射到本地的一个原始版本,这样firebug就会拿到一份原始的js,就可以方便的调试了。

4.3、AutoResponder请求、响应应答与替换
4.4、模拟user-agent、模拟慢速网络
4.5、Fiddler的script系统

FiddlerScript方文档

以上4.2-4.5可以看该博客Fiddler 高级用法:Fiddler Script 与 HTTP 断点调试,我不再累述。更高级的可以基于.NET写一些Fiddler插件,使用Fiddler Core库来写一些应用。

4.6、其实官方文档都很详细
  1. Java、PHP、Python等应用如何使用Fiddler
  2. 使用检测https
  3. 因为是.NET程序,Linux、Mac如何使用虚拟机辅助,其实有个Alpha Build Need a Linux or Mac build?
  4. 居然不支持localhost或者127.0.0.1的监听,用机器名或者域名IP加“.”支持

5、请思考本文开头提出的场景的解决思路

突然,我想到移动端开发,手机上调试网页的时候,Fiddler似乎也可以给我们做点什么:手机上网页打印console,我们无法看到,所以往往排查问题时候,无从下手。既然Fiddler可以做这么多事情,我们是否可以在发现移动端请求的时候响应中加入js console的重写呢?将打印的内容以url方式 http://mytest/content?c=...这个方式访问,再拦截之取得内容,在Fiddler中打印?

时间: 2024-10-10 23:55:44

【每周一讲】Fiddler4的使用的相关文章

吐哈社区 每周一讲

吐哈社区 每周一讲   公开课 第一讲  选择艺术  权衡 第二讲  创新和不创新的一墙之隔   ...期待哦

【每周一讲】Java的ThreadLocal

1.初识她 她到底是谁? 姑且先看个例子. public interface Counter {     /**      * 获取下一个序列值      * @return      */     int getNextNum(); } public class SimpleCounter implements Counter {     private int i = 0;     @Override     public int getNextNum() {         return 

最近收集的一些酷炫的UI界面设计

昨天学校实验室刚好要做每周一讲,于是乎收集了这些非常华丽酷炫的设计 接下来进入欣赏模式: 最后:学习之路永无止境,希望早日有实力做出像样的UI界面

每周一书《Oracle 12 c PL(SQL)程序设计终极指南》

本周为大家送出的书是<Oracle 12 c PL(SQL)程序设计终极指南>,此书由机械工业出版社出版, 孙风栋,王澜,郭晓惠 著. 内容简介: <Oracle 12c PL/SQL程序设计终极指南>志在打造PL/SQL领域最为系统.全面.实战.权威的著作,通过一系列非常突出的优势在大量的同类书中脱颖而出,成为该领域的标准读物. PL/SQL本身涉及的知识点浩瀚.庞杂,初学者根本无法依靠自身能力理清头绪,学习成本极高.本书对知识点进行了体系化的梳理,化繁杂为有序,突出重点,直指核

掰碎了讲中文编码

  电脑用0和1存储数据,而存储的数据主要有两种:数字和字符(还有运算符什么的暂时不讨论),数字存储的方法比较简单,没什么问题,这里要说的是如何存储字符. 1编码方式的大历史 1.1  ASCII 最早对于发明计算机的美国人来说,字符只有大小写的字母,于是他们使用一种简单的编码方式——ASCII,一个字母对应一个8位二进制码(ASCII码),或者说数字0-255,或者说8比特,或者说1个字节.存储的内容其实就是这组8位01码,当使用ASCII编码方式的软件被告知用字符的方式显示这组8位01码时,

【转】《从入门到精通云服务器》第七讲—IAAS、PAAS、SAAS

Saas.Paas.IaaS这三个词,一直困扰众人很久.就拿字面意思来说,分别是:软件即服务,平台即服务,设施即服务.小编表示这个不往深了讲,真心看不懂,还容易弄混淆.今天我们就来扒一扒这三者的深层含义,让您立刻看出区别. IaaS独领风骚 aaS = "as a Service",翻译过来就是:你出钱,我服务你. SaaS 卖软件的.你什么也不用干,只要出钱,我直接给你能用的软件.比如Gmail:给你邮件软件直接用,http://github.com:给你版本控制软件直接用,Offi

每周一书-编写高质量代码:改善C程序代码的125个建议

首先说明,本周活动有效时间为2016年8月28日到2016年9月4日.本周为大家送出的书是由机械工业出版社出版,马伟编著的<编写高质量代码:改善C程序代码的125个建议>. 编辑推荐 10余年开发经验的资深C语言专家全面从C语法和C11标准两大方面深入探讨编写高质量C代码的技巧.禁忌和实践 C语言因为既具有高级语言特性,又具有汇编语言特性,所以它是近二十几年来使用较为广泛.生命力较强的编程语言.无论是操作系统.嵌入式系统.普通应用软件,还是移动智能设备开发,它都能够很好地胜任,是公认的强大的语

小何讲Linux: 基本文件操作和实例

文件操作的基本概念参见博客: 小何讲Linux: 底层文件I/O操作 1.  函数说明 open()函数:是用于打开或创建文件,在打开或创建文件时可以指定文件的属性及用户的权限等各种参数. 所谓打开文件实质上是在进程与文件之间建立起一种连接,而"文件描述符"唯一地标识着这样一个连接 close()函数:是用于关闭一个被打开的文件.当一个进程终止时,所有被它打开的文件都由内核自动关闭,很多程序都使用这一功能而不显示地关闭一个文件. read()函数:是用于将从指定的文件描述符中读出的数据

DT大数据 梦工厂57讲

今日[DT大数据梦工厂视频]<第57讲:Scala中Dependency Injection实战详解> 土豆:http://www.tudou.com/programs/view/5LnLNDBKvi8/ 百度网盘:http://pan.baidu.com/s/1c0no8yk (DT大数据梦工厂scala的所有视频.PPT和代码在百度云盘的链接地址:http://pan.baidu.com/share/home?uk=4013289088#category/type=0&qq-pf-