在Windows 8.1上使用Fiddler重定向http请求进行前端调试

介绍：

fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改）。 fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。目前fiddler支持全浏览器，全操作系统，全平台。

原理：
fiddler本质就是做为web代理服务器(127.0.0.1:8888)存在 ，在启动时自动设置HTTP代理为自身地址监听所有通过的数据。
注意：
Firefox需手动设代理为127.0.0.1:8888，或者启用安装fiddler时自动安装的插件fiddler hook。
使用本机localhost测试时加"."（如：http://localhost.:2391/view/ ）。

下载和安装
fiddler的官网是http://www.telerik.com/fiddler
在Windows 8.1上面我选择fiddler4下载，双击exe文件并直接安装

安装完成后，在浏览器窗口中输入

http://127.0.0.1:8888/

如果输出结果如下，说明安装成功：

查看相应的版本号为

自动重定向示例
自动重定向功能是fiddler最实用的功能，这里的Rule可以自由地设定，可以使用搜索（默认）、精确匹配（EXACT）、正则表达式匹配（REGEX）。处理方式可以选择使用文件，也可以选择合适的时间暂停数据流（*bpu、*bpafter），人工干预。通过以下几个步骤，我们演示了怎样将HTTP请求重定向到本地的文件，进行web调试。这种调试方式不需要发布到线上再验证，避免了修改不成功、对用户造成影响的风险，而且不需要搭建复杂的开发服务器等开发环境，非常适合快速web调试。

首先打开fiddler，接着打开任意浏览器，我这里以maxthon为例，让它访问

http://www.ifeng.com/

我们会看到许多http交互在左上部窗口中闪动，这里每个http请求，在fiddler里面称为一个session会话。

1.将文件保存到本地并修改
我现在想修改凤凰网的图标
http://y1.ifengimg.com/a/2015_09/1d8401937113fd3.gif
先在左下命令行窗口中搜索该文件的session

?1d8401937113fd3.gif

按回车选中，我们看到选中的session是蓝色显示的，在该session上点击右键保存为本地文件

2.开启Fiddler自动重定向，创建新规则，将Http请求重定向到本地文件，保存好规则.

 注意勾选这三个方框，再点击“Add Rule”来添加规则

3.刷新一下浏览器页面，同时在命令行窗口中clear清除所有的会话，如果像下面这样，这个session的底色是灰色的，已经成功将这个请求重定向到本地文件了！

4.修改本地文件，进行测试
比如修改该文件，加上我的网名“tao_627”，刷新maxthon浏览器后，我们看到如下效果

另一个重定向例子

现在我打算修改如下跟广告相关的js文件

http://h0.ifengimg.com/ifeng/sources/yingguang-20140307.js 

也可以按照上面的方法进行，先保存成本地文件，再创建如下规则

我们看到这个特定的会话已经变成灰色

下面的工作我们只需修改本地js并调试就可以了。

当然我也可以将指定的js文件重定向到互联网上去的其他任意文件(包括后台服务器上的js)，比如我将上面的网址重定向到(注意勾选那三个框，否则不会有效果)

http://h0.ifengimg.com/ifeng/sources/yingguang-20140307.js  ==> http://www.xxdao.com/dsp/js/ifengads.js

我们就可以看到它的实际效果，参见下面的截图

通过这种方法，我们可以很方便地进行我们的js文件的修改和调试了。

在调试的过程中，我发现从浏览器中的调试工具中，被重定向的请求中不会出现302的过程，而直接是我们修改后的内容，这个想想也应该是这样的。

参考文献
[1].http://blog.sina.com.cn/s/blog_0ee72b3701013g58.html
[2].http://jingyan.baidu.com/article/63acb44ae6122e61fcc17e33.html
[3].http://www.tuicool.com/articles/I7FVNr    超详细