【每周一讲】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、其实官方文档都很详细

Java、PHP、Python等应用如何使用Fiddler

使用检测https

因为是.NET程序，Linux、Mac如何使用虚拟机辅助，其实有个Alpha Build Need a Linux or Mac build?

居然不支持localhost或者127.0.0.1的监听，用机器名或者域名IP加“.”支持

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

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