如何使用Fiddler调试线上JS代码

打开fiddler,找到“aggsite.js”的请求.

这里有个技巧,可以通过 “select”命令来筛选js请求. 在命令框输入“select script”回车即可.

接着把这个请求拖动到“AutoResponder”面板.

拖动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.

然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save.

这里比如用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”.

“test fiddler.js”内容如下. 就是向body追加一段红色文字.

$(function(){

var p=$("<p/>").text("这是fiddler加上的JS").css("text-align","center").css("color","red")

$("body").prepend(p)

})

接下来,刷新博客园首页看看效果，然后就可以在本地使用顺手的编辑器来写JS代码了,

本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样

总之一点就是利用线上的环境来测试代码,但又不对线上产生影响.

要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧.

在Wifi环境下：

1. 在PC端装个fiddler，开启代理功能。

2. 手机连接wifi,并将代理设为PC的IP地址。

3. 再利用fidder中的AutoResponder功能，针对特定的网页来插入自己的脚本

关于fiddler的下载和使用，自己可以百度一下

首先要确保手机和安装有Fiddler的计算机处在同一个局域网中，可以使用路由器，或者使用笔记本发送热点给手机使用。在这里本人是使用手机USB共享功能让笔记本联网的。进入cmd输入ipconfig/all。查看IPv4地址，如下图。下面设置代理需要用到该地址。

打开Fiddler。在Tools中选择【Fiddler Options】。选择选项卡【HTTPS】在apture HTTPS CONNECTs前打钩。

选择选项卡Connections，按下图钩选相应的项。注意到Fiddler listens on port:8888。这是Fiddler默认的监听地址。也就是我们在设置代理时使用的端口号。一般保持不变就好。

下载证书。可以在电脑中输入本机的回传地址，端口号是8888如下图所示，点击最下面的【FiddlerRoot certificate】即可下载，发送到手机安装证书，具体证书的安装方法自己百度。或者在手机浏览器中输入第一步得到的IPv4地址：8888也行。

手机端的配置。手机进入wifi配置界面，如下图。这里的主机名就是第一步的IPv4地址。端口号为8888。前面已经多次提到。配置成功后点击【确定】。然后断开wifi，关闭Fiddler。重新连接wifi在打开Fiddler。

经过以上的配置后，就可以用Fiddler监控到手机的上网行为了。以下是在手机UC中打开sina的捕获图。可以看到有很多与其他站点的通讯，可以使用过滤或者关闭一些后台程序来净化。

---