用fiddler进行debug

fiddler是一枚前端利器，大家用得都应该挺多的。

昨晚在家里调试一个页面，弄了好一会，fiddler都没有抓到数据。最后Google之，才发现因为我等都装了SwitchySharp这类自动访问外国网站插件。导致Chrome的流量没有走系统代理，而Fiddler是对系统代理进行了转发，故而fiddler没有抓到Chrome的流量。

知道原因之后，设置Chrome走系统代理，Fiddler即可正常工作。

带会话态调试

有一个站点，里面的页面要登陆态才能调试，也就是HTTP请求的header里面，需要带上一些额外的信息。

首先用fiddler抓取正常带有登陆态的HTTP请求，我这边用的是Cookie，具体哪个我也不清楚，就把整个Cookie都复制一下。

之前，有款Willow的插件，最新版支持自定义HTTP头，可以方便做这种带会话态的测试。可惜，昨晚在家里，怎么都没有搜索到最新版的Willow，就只能研究下Fiddler自身是如果修改请求的。

Fiddler面板左侧是数据流，右侧是控制面板。其中，有一个Filters的Tab选项，里面有Request Headers和Response Header等配置信息。

我是希望给请求带上会话态，则勾上Request Headers => Set request header选项，并第一个空填入‘Cookie’，第二个空填入刚才复制下来的Cookie的值。

勾选控制面板左上角的‘use filter’，并点击右边Actions => Run Filterset now，即可生效。

之后，再看左侧的数据流，你会发现，你的请求都已经带上了Cookie属性，你可以很方便的调试任何带有会话态的站点。

跨域调试

正常情况下，JS执行跨域操作，将会被浏览器禁止。

但是开发过程中，时不时需要跨域去获取某些数据。

这里不讲各种跨域手法，仅仅介绍一些，通过使用Fiddler来添加请求的CORS响应头，欺骗浏览器允许跨域执行JS。

同样是在Filters选项中，拉到最底下，有一个Response Headers的表单域，勾上Set Response header，并在第一个空填上“Access-Control-Allow-Origin”，第二个空填上“*”，此时你浏览器再执行跨域JS操作，将会畅通无阻。

此跨域方法，仅仅用于开发调试阶段，线上部署的时候，还是老老实实让后台筒靴们给配上Acces-Control-Allow-Origin头，又或者部署在同域的情况下。关于JS详细的跨域问题，可以看以前的内容：《各种kill跨域Boss的方法》。

最后

附上Fiddler监听Win8 Metro界面APP的方法：

打开Fiddler => 点击 Win8 Config =》 给你需要Fiddler监听的APP前面打上勾，保存即可。