前端开发利器—FIDDLER

前端开发利器—fiddler1.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->fiddleroption->https下面进行设置，勾选上“decrypthttpstraffic”，如果不必监听服务器端得证书错误可以勾上“ignoreservercertificationerrors”，也可以跳过几个指定的host来缩小或者扩大监听范围。③host修改安装了willow插件的fiddler使用起来会方便很多。比如host的修改不必再去系统盘寻找host文件了，我们只需在willow窗口下，新建一个项目，然后在里面加入该项目涉及到的所有host。具体方法：右键选择“addproject”，右键单击这个新建的project选择“addhost”，在弹出的对话框中分别填入ip和对应的domain即可。建好后的host对以后的调试使用十分方便，需要使用时勾上对勾，不需要时取消，而且控制之分灵活，host的修改可以域名(单个host)为单位也可以具体项目为单位。上图：④请求重定向(模拟响应)所谓请求无非就是需要调用到的一些资源(包括js、cgi、css和图片等)，所谓重定向就是将页面原本需要调用的资源指向其他资源(你能够控制的资源或者可以引用到的资源)。你可以将前台服务器的诸多或者某个cgi在本地做个副本，如果正常网络访问环境下该cgi出现了bug而导致开发环境崩溃时，可以先将这个cgi的请求重定向到本地副本，这样就可以继续进行开发调试你的页面，从而大量节省cgi维护的等待时间。你也可以将多人同时维护的某个js文件复制一份出来在本地，当你的开发调试收到他人调试代码干扰时，可以将这个js的调用重定向到本地无干扰的js文件，进行无干扰开发，功能开发完成并调试ok之后再将你的代码小心合入到开发环境中，这样就可以避免受到他人干扰专心搞你的模块开发，也就是说能够将js文件脱离开发环境却不影响线上调试。你还可以将样式文件或者图片指向本地如果需要的话。开发过程中的很多页面其实都是惨不忍睹的，究其原因很大程度上是因为缺少对应的样式文件或者没有图片资源，所以样式文件和图片的重定向会对美感稍有要求的开发人员带来福音。此外，你还可以借此神器搞些有取的事，比如换换百度主页的图片欢乐一下。具体方法：在autoresponser窗口下，点击“add”添加一个新的重定向规则在打开的规则对话框的“ifurlmatches”一栏填入百度主页的主图片资源地址：http://www.baidu.com/img/baidu_sylogo1.gif，在对应的“thenrespondwith”一栏填入你所希望看到的本地图片地址(或者网络图片地址)c:usersxxxdesktop111111.bmp(这图是我本地图片有我签名，你也可以换成你心爱的女友的美图，给她一个惊喜，说你是花了大价钱才展示一天…)。然后刷新百度主页,你会惊喜的发现百度和google原来是可以这样更换节日图片的啊!⑤请求构造请求构造顾名思义就是我们可以模拟请求，也就是说我们可以借助fiddler的requestbuilder在不改动开发环境实际代码的情况下修改请求中的参数值并且方便的重新调用一次该请求，然后双击这次新调用的请求包查看cgi的返回和上次调用相比较有何具体不同。任何一个请求参数只要是合法的取值再次调用后cgi都会有相应的响应，那么你想要的任意一个合法请求组合自然也能够按照你的意愿构造出来，然后再次调用以及查看返回数据，十分方便!下面我举一个交易查询请求构造的例子。首先进入交易查询页面抓包找到目标请求https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi?outputtype=json，双击该包在inspectors标签下查看返回数据为json格式，而xml格式一栏为空：将该请求鼠标左键单击拖入fiddler右侧requestbuilder标签内并修改原请求参数outputtype=json为outputtype=xml，然后点击execute按钮再次触发调用请求，双击这次请求包在inspectors标签下查看返回数据为xml格式，而json格式一栏为空：另外你还可以点击左下方的expandall和collapse按钮将返回数据全部展开或收缩。⑥请求过滤对一个重新载入的页面进行抓包，如果包的条目过多而你需要关注的就那么几项的话，可以使用fiddler的过滤器filters进行抓包，那么抓包时只会抓取你希望抓到的那些包。切换到filters标签勾选usefilter以便激活过滤器，这样下面的各种过滤方式就可以进行选择了。(1)可以只抓取最近的n个sessions，如果选中此项默认为200个sessions。(2)可以根据host是内网还是外网类型进行过滤，也可指定特定的多个host，并且定义是抓取还是隐藏这些特定的host，也可对其进行标记。(3)可以只抓取浏览器通信包，也可只抓取和服务器进行通信的包。(4)可以根据请求头部进行过滤(5)还可根据响应的状态码以及类型和大小进行过滤。⑦编码转换前端开发人员的编码查看、验证、转换、对比等操作也是经常性的，fiddler还提供了多种编码转换集成的一个功能，用起来也是相当方便。在”tools”的“textencode/decode”下面可以将编码转换打开：⑧低网速模拟有时出于兼容性考虑或者对某处进行性能优化，在低网速下往往能较快发现问题所在也容易发现性能瓶颈，可惜其他调试工具没能提供低网速环境，而强大的fiddler考虑到了这一点，能够进行低网速模拟设置rules>performance>stimulatemodemspeeds。⑨命令行命令行的使用往往能够事半功倍，那么看下面这些实用命令是如何具体使用：(1)?sometext输入过程中，fiddler会高亮包含输入内容的url，回车可以选中这些会话。eg：?searchtext(2)>size选中返回字节数大于输入数的会话。eg：>40000<–selectresponsesover40kb(3)选中返回字节数小于输入数的会话。eg：<5k<–selectresponsesunder5kb(4)=statu或=method选中responsestatus=status或者requestmethod=method的会话。eg：=301<–select301redirectresponseseg：=post<–selectpostrequests(5)@host选择主机名包含输入内容的会话，回车选中。eg：@msn.com<–selectwww.msn.com,login.msn.com(6)bold将后面出现的包含输入字符的url标记为粗体。eg：bold/bar.aspxbold<–callwithnoparametertoclear(7)bpafter将所有requestuti中包含输入字符的response截断。eg：bpafter/favicon.icobpafter<–callwithnoparametertoclear(8)bps将所有response返回码与输入相同的请求截断。eg：bps404bps<–callwithnoparametertoclear(9)bpvorbpm在相应的http请求method上设置断点，设置这个命令会清空之前的设置，不加参数取消断点。eg：bpvpostbpv<–callwithnoparametertoclear(10)bpu在包含参数的request上设置断点，设置这个命令会清空之前的设置，不加参数取消断点。eg：bpu/myservice.asmxbpu<–callwithnoparametertoclear(11)clsorclear清空会话列表cls。(12)dump打包所有会话为zip文件并放于c:dump。(13)gorgo恢复所有中断的会话g。(14)help显示帮助页面help。(15)hide最小化到系统托盘hide。(16)urlreplace将url请求中的字符串替换成其他，设置这个命令会清除前面的设置eg：urlreplaceseekstrreplacewithstrurlreplace(17)start注册为系统代理，抓取http协议(18)stop关闭抓取stop(19)show从系统托盘中恢复，在脚本命令中比较有用show(20)selectmime选中responsecontent-typeheader包含输入参数的会话。eg：selectimageselectcsseg：selecthtmeg：selectui-bold*<–unlessprecededbyaslash,*meansanyvalueeg：selectui-comments*<–findcommentswitha*eg：select@request.accepthtml<–findrequestswithaccept:htmleg：select@response.set-cookiedomain<-findresponsesthatset-cookieonadomain(21)allbutorkeeponly隐藏除了content-typeheader包含输入参数的其他会话。eg：allbutxmlallbutjavatags:前端开发，调试工具，fiddler，神器