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

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

##what's fiddler
fiddler是一款代理软件，对于前后端分离开发非常重要。可以说，如果前端开发没有用上fiddler或类似软件，那还不能算是真正的前端开发。fiddler有三大实用功能：做代理，造响应（反向代理），造请求。

下载安装请自行用搜索引擎查找。安装完之后要把相应的软件代理设置为fiddler，默认的代理为http://127.0.0.1:8888/。可以在fiddler Options中修改端口。

![fiddler Options](//images0.cnblogs.com/blog/84053/201409/132352189349400.jpg)。


##原理
`代理`功能是fiddler所有功能的来源。

![fiddler代理图解](//images0.cnblogs.com/blog/84053/201409/132339020434823.jpg)

如图所示，fiddler在客户端跟服务端之前架设了一层代理，所有的请求经过fiddler转发，所有的响应也是。于是，fiddler在得到这些数据之后，就能提供一系列的功能：**捕获并监控本机所有的http请求，显示或修改其内容**。（左下角有捕获开关）并且提供针对JSON,XML,图片,二进制等的详细查看，或者其中的认证、cookies等等，以及其中的时间分析，对于http熟悉的人都知道请求的组成部分，不啰嗦了。对于响应也会有相应的功能。简而言之，通过http传送的数据，都会被记录并分析，甚至改造。


##做代理
时下移动设备流行的时代，要调试其上面的http请求不容易，狭小的屏幕一般提供给用户去使用，很少留下开发的位置，此时可以利用fiddler对其进行监控。要想让移动设备走fiddler代理（也就是图2所示的通道，而不是直接访问服务端），需要在fiddler中开启相应的选项，如图

![fiddler远程连接开关](//images0.cnblogs.com/blog/84053/201409/132352189349400.jpg)

记下端口，勾上**Allow remote computers to connect**，再在移动设备的wifi里面，找到其高级设置（一般是按住具体的wifi连接），设置代理，填好ip和端口即可。此时在移动设备上的所有请求及其响应会显示在fiddler的主窗口里面。


##造响应
fiddler在得到服务端的响应后，如果只是乖乖地按原样响应回来，那就太单调了，其非常实用的功能是对响应进行加工处理，改成你想要的模样。通常在开发中我们需要的是把响应改成本地文件（在后台接口未完成之前）

![造响应的一般方式](//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数据进行显示分析，也能进行修改，并配套相关的辅助功能。

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

what's fiddler

fiddler是一款代理软件，对于前后端分离开发非常重要。可以说，如果前端开发没有用上fiddler或类似软件，那还不能算是真正的前端开发。fiddler有三大实用功能：做代理，造响应（反向代理），造请求。

下载安装请自行用搜索引擎查找。安装完之后要把相应的软件代理设置为fiddler，默认的代理为http://127.0.0.1:8888/。可以在fiddler Options中修改端口。

。

原理

代理功能是fiddler所有功能的来源。

如图所示，fiddler在客户端跟服务端之前架设了一层代理，所有的请求经过fiddler转发，所有的响应也是。于是，fiddler在得到这些数据之后，就能提供一系列的功能：捕获并监控本机所有的http请求，显示或修改其内容。（左下角有捕获开关）并且提供针对JSON,XML,图片,二进制等的详细查看，或者其中的认证、cookies等等，以及其中的时间分析，对于http熟悉的人都知道请求的组成部分，不啰嗦了。对于响应也会有相应的功能。简而言之，通过http传送的数据，都会被记录并分析，甚至改造。

做代理

时下移动设备流行的时代，要调试其上面的http请求不容易，狭小的屏幕一般提供给用户去使用，很少留下开发的位置，此时可以利用fiddler对其进行监控。要想让移动设备走fiddler代理（也就是图2所示的通道，而不是直接访问服务端），需要在fiddler中开启相应的选项，如图

记下端口，勾上Allow remote computers to connect，再在移动设备的wifi里面，找到其高级设置（一般是按住具体的wifi连接），设置代理，填好ip和端口即可。此时在移动设备上的所有请求及其响应会显示在fiddler的主窗口里面。

造响应

fiddler在得到服务端的响应后，如果只是乖乖地按原样响应回来，那就太单调了，其非常实用的功能是对响应进行加工处理，改成你想要的模样。通常在开发中我们需要的是把响应改成本地文件（在后台接口未完成之前）

如图，在被监控的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数据进行显示分析，也能进行修改，并配套相关的辅助功能。