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客户端和服务器的请求如下所示：

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

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

会话（web session）主要有以下几种请求：

QuickExec命令行的使用:

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

常见的命令有：

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

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

select 选择会话的命令

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

bpu 截获request

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

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

HTTP统计面板（Statistics）：

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

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

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

检查器(Inspectors)：

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

AutoResponder：

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

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

例子如下：

本地js中增加了alert

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

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

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

Filter：

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

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

通过设置断点，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，拦截请求数据并能进行修改。

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

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

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

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