# 前后端分离的利器:fiddler的实用功能举例

##what's fiddler
fiddler是一款代理软件,对于前后端分离开发非常重要。可以说,如果前端开发没有用上fiddler或类似软件,那还不能算是真正的前端开发。fiddler有三大实用功能:做代理,造响应(反向代理),造请求。 下载安装请自行用搜索引擎查找。安装完之后要把相应的软件代理设置为fiddler,默认的代理为http://127.0.0.1:8888/。可以在fiddler Options中修改端口。 ![fiddler Options](https://images0.cnblogs.com/blog/84053/201409/132352189349400.jpg)。 ##原理
`代理`功能是fiddler所有功能的来源。 ![fiddler代理图解](https://images0.cnblogs.com/blog/84053/201409/132339020434823.jpg) 如图所示,fiddler在客户端跟服务端之前架设了一层代理,所有的请求经过fiddler转发,所有的响应也是。于是,fiddler在得到这些数据之后,就能提供一系列的功能:**捕获并监控本机所有的http请求,显示或修改其内容**。(左下角有捕获开关)并且提供针对JSON,XML,图片,二进制等的详细查看,或者其中的认证、cookies等等,以及其中的时间分析,对于http熟悉的人都知道请求的组成部分,不啰嗦了。对于响应也会有相应的功能。简而言之,通过http传送的数据,都会被记录并分析,甚至改造。 ##做代理
时下移动设备流行的时代,要调试其上面的http请求不容易,狭小的屏幕一般提供给用户去使用,很少留下开发的位置,此时可以利用fiddler对其进行监控。要想让移动设备走fiddler代理(也就是图2所示的通道,而不是直接访问服务端),需要在fiddler中开启相应的选项,如图 ![fiddler远程连接开关](https://images0.cnblogs.com/blog/84053/201409/132352189349400.jpg) 记下端口,勾上**Allow remote computers to connect**,再在移动设备的wifi里面,找到其高级设置(一般是按住具体的wifi连接),设置代理,填好ip和端口即可。此时在移动设备上的所有请求及其响应会显示在fiddler的主窗口里面。 ##造响应
fiddler在得到服务端的响应后,如果只是乖乖地按原样响应回来,那就太单调了,其非常实用的功能是对响应进行加工处理,改成你想要的模样。通常在开发中我们需要的是把响应改成本地文件(在后台接口未完成之前) ![造响应的一般方式](https://images0.cnblogs.com/blog/84053/201409/140018287935834.jpg) 如图,在被监控的http请求/响应中拖放一条到`AutoResponder`页面,则可对其“动手动脚”,可以利用正则表达式匹配多个请求,把`EXACT`改成`regex`即可。具体的操作可以自己摸索一下。 这一点功能的意义非常重大 * 前端的开发能与后台接口开发并行,只需要在本地造一些实验数据,把请求的响应指向该数据文件,即可进行大多数的代码开发。
* 有时候线上的应用有bug,我们不可能对其频繁进行修改提交,则可以利用此功能进行本地调试(把线上代码指向本地),OK了才上线。 ##反向代理
同样在`AutoResponder`的页面,还能进行反向代理的功能。通俗地理解为对请求进行转发。应用情景如下:我有开发环境http://A/wsdl/,另外有测试环境http://B/wsdl/,这两个环境明显区别是数据不一样,有时候开发好的代码,想换一个环境测试一下能不能跑正确?怎么处理?费很大的劲部署到B上吗?,其实不需要,只需要加一条规则 |if request matches...|then repond with...|
|--|--|
|regex:http://A/wsdl/|http://B/wsdl/|
要注意url最后的`/`不能略去,这属于http基础。那么指向A的请求自动变成B的请求,并且不会引起跨域。这对于前端调试接口(**url固定,参数不一定**)非常有用,开发、测试、生产环境可以随时切换,本人实践起来非常好用。 ##造请求
调试接口有时候还需要直接发送数据,此时我们可以造请求。跟造响应类似,切换到`Composer`页面,把一个请求拖放过来,即可对其内容进行任意修改,修改完之后再`Execute`发送回去即可。可以立马造出自己想要的数据格式对接口发出请求。 ##其他功能
* 对于参数格式,我们还可以用其自带的`TextWizard`进行格式转化,base64,url编码(%形式),html编码(&#开头),js unicode(\u开头)等等,可以自行探索一下。
* 可以自行用脚本的方式定制fiddler的规则,首先要安装SyntaxView插件。参考:http://kb.cnblogs.com/page/130367/#script
* 打断点调试等高级功能目前还没涉及到。 ##
归根到底,fiddler作为代理,能对http数据进行显示分析,也能进行修改,并配套相关的辅助功能。
05-11 22:35