前端开发工具

1.Fiddler相对其他调试工具的优势

HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉，但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据，但无法修改返回的数据；尽管Firebug可以修改 HTML和CSS，但是在调试CGI接口时无法干预HTTP请求的参数值和CGI返回的数据。而 Fiddler作一个 HTTP 调试代理，不但能够记录客户端同服务器之间的所有 HTTP 通讯数据，还能够修改请求数据和返回数据，也叫做“构造请求”和“模拟响应”。除此之外，添加了willow插件的Fiddler 还可以：统计数据包、修改Host、请求重定向、编码转换、低网速模拟、断点调试以及过滤HTTP请求…Fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。相信你已经迫不及待安装它了。

2.Fiddler安装和FireFox配置

Fiddler2官方下载地址：http://www.fiddler2.com/Fiddler2/version.asp，安装程序600KB左右，目前一直都免费。Fiddler安装非常简单，双击.exe文件然后直接下一步就可以，如果首次运行报错那很可能是因为当前计算机没有与之匹配的.NetFrameWork，由于Fiddler是由C#语言编写而C#软件的运行环境就是微软的.NetFrameWork，所以还要下载安装，下载地址仍然为：http://www.fiddler2.com/Fiddler2/version.asp，如果首次运行Fiddler没有报错，那么很幸运你的计算机之前就已经有.NetFrameWork。

如果平时习惯用IE浏览器那么现在就可以开始用Fiddler进行调试了，如果平时习惯用FireFox那么还需要手动设置代理才能支持 Fiddler。配置方式——FireFox主菜单：选项 -> 高级 -> 网络 -> 设置(如下图)，选择“手动配置代理”输入HTTP代理为127.0.0.1，然后“确定”。此时开启的Fiddler就支持FireFox了，当关闭 Fiddler后为使FireFox能正常连接网络应该取消上面设置的代理。

3.Fiddler中各种图标的含义

4. Fiddler使用细则

① 数据包统计

运行Fiddler并开启左下角的“Capturing”，在浏览器地址栏或者Fiddler命令行处随便输入一个网址：http://tid.tenpay.com 如图：

回车后Fiddler就会把客户端同服务器之间所有的数据包都记录下来，此时选择多条请求后点击“Statistics”即可查看到详尽的数据报统计信息：

(1) 请求总数、请求包大小、响应包大小；

(2) 请求起始时间、响应结束时间、握手时间、等待时间、路由时间、TCP/IP传输时间；(3) HTTP状态码统计；(4) 返回的各种类型数据的大小统计以及饼图展现。

②监听范围设置

Fiddler 不仅能监听HTTP请求而且默认情况下也能捕获到HTTPS请求，但如果要进一步了解客户端同服务器之间的HTTPS通信细节还要到Tool -> Fiddler Option -> HTTPS下面进行设置，勾选上“Decrypt HTTPS traffic”，如果不必监听服务器端得证书错误可以勾上“Ignore server certification errors”，也可以跳过几个指定的HOST来缩小或者扩大监听范围。

③ HOST 修改

安装了willow插件的Fiddler使用起来会方便很多。比如Host的修改不必再去系统盘寻找host文件了，我们只需在willow窗口下，新建一个项目，然后在里面加入该项目涉及到的所有host。具体方法：右键选择“Add Project”，右键单击这个新建的project选择“add host”，在弹出的对话框中分别填入IP和对应的Domain即可。

建好后的Host对以后的调试使用十分方便，需要使用时勾上对勾，不需要时取消，而且控制之分灵活，Host的修改可以域名(单个Host)为单位也可以具体项目为单位。上图：

④ 请求重定向（模拟响应）

所谓请求无非就是需要调用到的一些资源(包括JS、CGI、CSS和图片等)，所谓重定向就是将页面原本需要调用的资源指向其他资源(你能够控制的资源或者可以引用到的资源)。

你可以将前台服务器的诸多或者某个CGI在本地做个副本，如果正常网络访问环境下该CGI出现了BUG而导致开发环境崩溃时，可以先将这个CGI的请求重定向到本地副本，这样就可以继续进行开发调试你的页面，从而大量节省CGI维护的等待时间。
你也可以将多人同时维护的某个JS文件复制一份出来在本地，当你的开发调试收到他人调试代码干扰时，可以将这个JS的调用重定向到本地无干扰的JS文件，进行无干扰开发，功能开发完成并调试OK之后再将你的代码小心合入到开发环境中，这样就可以避免受到他人干扰专心搞你的模块开发，也就是说能够将JS文件脱离开发环境却不影响线上调试。
你还可以将样式文件或者图片指向本地如果需要的话。开发过程中的很多页面其实都是惨不忍睹的，究其原因很大程度上是因为缺少对应的样式文件或者没有图片资源，所以样式文件和图片的重定向会对美感稍有要求的开发人员带来福音。

此外，你还可以借此神器搞些有取的事，比如换换百度主页的图片欢乐一下。

具体方法：在AutoResponser窗口下，点击“Add”添加一个新的重定向规则在打开的规则对话框的“If URL matches”一栏填入百度主页的主图片资源地址：http://www.baidu.com/img/baidu_sylogo1.gif，在对应的“then respond with”一栏填入你所希望看到的本地图片地址（或者网络图片地址）C:\Users\xxx\Desktop\111111.BMP （这图是我本地图片有我签名，你也可以换成你心爱的女友的美图，给她一个惊喜，说你是花了大价钱才展示一天…）。然后刷新百度主页, 你会惊喜的发现百度和Google原来是可以这样更换节日图片的啊！上图：

⑤ 请求构造

请求构造顾名思义就是我们可以模拟请求，也就是说我们可以借助Fiddler的Request Builder 在不改动开发环境实际代码的情况下修改请求中的参数值并且方便的重新调用一次该请求，然后双击这次新调用的请求包查看CGI的返回和上次调用相比较有何具体不同。任何一个请求参数只要是合法的取值再次调用后CGI都会有相应的响应，那么你想要的任意一个合法请求组合自然也能够按照你的意愿构造出来，然后再次调用以及查看返回数据，十分方便！

下面我举一个交易查询请求构造的例子。首先进入交易查询页面抓包找到目标请求https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?OutPutType=JSON，双击该包在Inspectors标签下查看返回数据为JSON格式，而XML格式一栏为空：

将该请求鼠标左键单击拖入Fiddler右侧Request Builder标签内并修改原请求参数OutPutType=JSON为OutPu tType=XML，然后点击Execute按钮再次触发调用请求，

双击这次请求包在Inspectors标签下查看返回数据为XML格式，而JSON格式一栏为空：

另外你还可以点击左下方的Expand All和Collapse按钮将返回数据全部展开或收缩。

⑥请求过滤

对一个重新载入的页面进行抓包，如果包的条目过多而你需要关注的就那么几项的话，可以使用Fiddler的过滤器Filters进行抓包，那么抓包时只会抓取你希望抓到的那些包。切换到Filters标签勾选Use filter 以便激活过滤器，这样下面的各种过滤方式就可以进行选择了。

(1) 可以只抓取最近的N个sessions，如果选中此项默认为200个sessions 。

(2) 可以根据host是内网还是外网类型进行过滤，也可指定特定的多个host，并且定义是抓取还是隐藏这些特定的host，也可对其进行标记。

(3) 可以只抓取浏览器通信包，也可只抓取和服务器进行通信的包。

(4) 可以根据请求头部进行过滤

(5) 还可根据响应的状态码以及类型和大小进行过滤。

⑦编码转换

前端开发人员的编码查看、验证、转换、对比等操作也是经常性的，Fiddler还提供了多种编码转换集成的一个功能，用起来也是相当方便。在”Tools”的“Text Encode/Decode”下面可以将编码转换打开：

⑧ 低网速模拟

有时出于兼容性考虑或者对某处进行性能优化，在低网速下往往能较快发现问题所在也容易发现性能瓶颈，可惜其他调试工具没能提供低网速环境，而强大的 Fiddler考虑到了这一点，能够进行低网速模拟设置Rules > Performance > Stimulate Modem Speeds。

⑨ 命令行

命令行的使用往往能够事半功倍，那么看下面这些实用命令是如何具体使用：

(1) ?sometext

输入过程中，fiddler会高亮包含输入内容的url，回车可以选中这些会话。

Eg：?searchtext

(2) >size

选中返回字节数大于输入数的会话。

Eg：>40000 <– Select responses over 40kb

(3) <size

选中返回字节数小于输入数的会话。

Eg：<5k <– Select responses under 5kb

(4) =statu或=method

选中response status = status 或者 request method = method 的会话。

Eg：=301 <– Select 301 redirect responses

Eg：=POST <– Select POST requests

(5) @host

选择主机名包含输入内容的会话，回车选中。

Eg：@msn.com <– Select www.msn.com, login.msn.com

(6) bold

将后面出现的包含输入字符的url标记为粗体。

Eg：bold /bar.aspxbold <– Call with no parameter to clear

(7) bpafter

将所有RequestUTI中包含输入字符的response 截断。

Eg：bpafter /favicon.icobpafter <– Call with no parameter to clear

(8) bps

将所有response返回码与输入相同的请求截断。

Eg：bps 404bps <– Call with no parameter to clear

(9) bpv or bpm

在相应的HTTP请求 method上设置断点，设置这个命令会清空之前的设置，不加参数取消断点。

Eg：bpv POSTbpv <– Call with no parameter to clear

(10) bpu

在包含参数的request 上设置断点，设置这个命令会清空之前的设置，不加参数取消断点。

Eg：bpu /myservice.asmxbpu <– Call with no parameter to clear

(11) cls or clear 清空会话列表 cls 。

(12) dump 打包所有会话为zip文件并放于C:\ dump 。

(13) g or go 恢复所有中断的会话 g 。

(14) help 显示帮助页面 help 。

(15) hide 最小化到系统托盘 hide 。

(16) urlreplace

将URL请求中的字符串替换成其他，设置这个命令会清除前面的设置

Eg：urlreplace SeekStr ReplaceWithStrurlreplace

(17) start 注册为系统代理，抓取http协议

(18) stop 关闭抓取 stop

(19) show 从系统托盘中恢复，在脚本命令中比较有用 show

(20) select MIME

选中response Content-type header包含输入参数的会话。

Eg：select imageselect cssEg：select htmEg：select ui-bold * <– unless preceded by a slash, * means any valueEg：select ui-comments \* <– Find comments with a *Eg：select @Request.Accept html <– Find requests with Accept: htmlEg：select @Response.Set-Cookie domain <- Find responses that Set-Cookie on a domain

(21) allbut or keeponly

隐藏除了Content-Type header 包含输入参数的其他会话。

（参考 http://tid.tenpay.com/?p=3011）