Fiddler Web调试工具

Httpwatch是比较常用的http抓包工具,但是只支持IE和firefox浏览器(其他浏览器可能会有相应的插件),对于想要调试chrome浏览器的http请求,似乎稍显无力,而Fiddler 4 是一个使用本地 127.0.0.1:8888 的 HTTP 代理,任何能够设置 HTTP 代理为 127.0.0.1:8888 的浏览器和应用程序都可以使用 Fiddler。

1、简介

Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一。 它能够记录客户端和服务器之间的所有HTTP请求,可以针对特定的HTTP请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据,功能非常强大,是web调试的利器。既然是代理,也就是说:客户端的所有请求都要先经过Fiddler,然后转发到相应的服务器,反之,服务器端的所有响应,也都会先经过Fiddler然后发送到客户端,基于这个原因,Fiddler支持所有可以设置http代理为127.0.0.1:8888的浏览器和应用程序。使用了Fiddler之后,web客户端和服务器的请求如下所示:

Fiddler Web调试工具_第1张图片

         教程的意思在于,当你对某一新事物不熟悉的时候,帮助你了解一下而已。所以这里就挑一些足够使用的tab来解释一下。

2、Fiddler使用界面及其相关功能介绍

Fiddler Web调试工具_第2张图片

         会话(web session)主要由以下几种请求:

Fiddler Web调试工具_第3张图片

QuickExec命令行的使用:

Fiddler的左下角有一个命令行工具叫做QuickExec,允许你直接输入命令。

常见得命令有:

help 打开官方的使用页面介绍,所有的命令都会列出来

cls 清屏 (Ctrl+x 也可以清屏)

select 选择会话的命令

?.png 用来选择png后缀的图片

bpu 截获request

Fiddler Web调试工具_第4张图片

监听开关 - 只有两种状态,用的时候就开着,不用就关闭。capturing表示捕捉状态

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

HTTP统计面板(Statistics

通过陈列出所有的HTTP通信量,Fiddler可以很容易的向您展示哪些文件生成了您当前请求的页面。使用Statistics页签,用户可以通过选择多个会话来得来这几个会话的总的信息统计,比如多个请求和传输的字节数。

选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间。从条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化。

还可以看出一些基本性能数据:如DNS解析的时间消耗,建立TCP/IP连接的时间消耗等等信息。

Fiddler Web调试工具_第5张图片

检查器(Inspectors)

分为上下两个部分,上半部分是请求头部分,下半部分是响应头部分。对于每一部分,提供了多种不同格式查看每个请求和响应的内容。JPG格式使用ImageView就可以看到图片,HTML/JS/CSS使用TextView可以看到响应的内容。Raw标签可以查看原始的符合HTTP标准的请求和响应头。Auth则可以查看授权Proxy-Authorization和 Authorization的相关信息。Cookies标签可以看到请求的cookie和响应的set-cookie头信息。

Fiddler Web调试工具_第6张图片

Fiddler Web调试工具_第7张图片

AutoResponder

可用于拦截某一请求,并重定向到本地的资源,或者使用Fiddler的内置响应。可用于调试服务器端代码而无需修改服务器端的代码和配置,因为拦截和重定向后,实际上访问的是本地的文件或者得到的是Fiddler的内置响应。有些时候在测试环境和线上环境的不同,导致在线系统的js难易跟踪调试特别是一些动态js脚本,该功能可以大大减少了在线调试的困难。

勾选Enable rulesUnmatched requestpassthroughAdd Rule是创建规则(为了方便可以直接将左边的url拖拽到右边列表中)。下面第一个文本框是当前选择的url,在第二个文本框中选择Find a file...,选择本地保存后的文件。两者就建立了一一对应关系。

Fiddler Web调试工具_第8张图片

例子如下:

本地js中增加了alert

使用AutoResponder后,调试10.33.30.219服务器代码

Fiddler Web调试工具_第9张图片

这刚好是本地js的内容,说明请求已经成功被拦截到本地.当然也可以使用Fiddler的内置响应。下图是Fiddler支持的拦截重定向的方式:

Fiddler Web调试工具_第10张图片

前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改。利用Fiddler的可以修改HTTP数据的特性,就能用本地文件替换线上css/javascript文件,基于生产环境修改并验证,确认后再发布。

Filter

Fiddler提供了多维度的过滤规则,足以满足日常开发调试的需求。host和zone过滤。可以过滤只显示intranet或则internet的HTTP请求也可以选择特定域名的HTTP请求; client process:可以捕获指定进程的请求

Fiddler Web调试工具_第11张图片

 

3、使用Fiddler进行HTTP断点调试

Fiddler Web调试工具_第12张图片

Fiddler Web调试工具_第13张图片

 

通过设置断点,Fiddler可以做到:

1. 修改HTTP请求头信息。例如修改请求头的UA, Cookie, Referer 信息,通过“伪造”相应信息达到达到相应的目的(调试,模拟用户真实请求等)。

2. 构造请求数据,突破表单的限制,随意提交数据。避免页面js和表单限制影响相关调试。

3. 拦截响应数据,修改响应实体。

假设js前端程序员和服务器程序员是分工合作的,js程序员想要调试Ajax请求的功能,这样便不必等待服务器端程序员开发好所有接口之后再开始开发js端的ajax请求功能,因为通过“模拟”真实的服务器端的响应,便可以保证功能的正确性,而服务器端开发程序员,只要保证最终的响应是符合规定的即可。这大大简化了程序开发的效率。

有两种方法设置断点:

1.fiddler菜单栏->rules->automatic Breakpoints->选择断点方式,这种方式下设定的断点会对之后的所有HTTP请求有效。

有两个断点位置:

a. before response。也就是发送请求之后,但是Fiddler代理中转之前,这时可以修改请求的数据。

b.after response。也就是服务器响应之后,但是在Fiddler将响应中转给客户端之前。这时可以修改响应的结果。

终止断点:在rules->auto breakpoint中disabled断点即可。

2.命令行下输入。Bpafter xxx或者bpv,bpu,bpm等设置断点。这种断点只针对特定类型的请求。

Bpu xxx,拦截请求数据并能进行修改。

Fiddler Web调试工具_第14张图片

web再次访问文件,通过Fiddlerweb session界面可以看到,请求已经被挂起来了,而web浏览器也一直处于加载的状态。

修改请求参数value值后,点击 “run to complete“,便可回送修改后的响应。

Fiddler Web调试工具_第15张图片

终止断点:只需输入命令“bpu”。

Fiddler Web调试工具_第16张图片

Bpafter xxx,拦截响应数据并能进行修改用法跟bpu命令一样。

你可能感兴趣的