Fiddler抓包调试前端脚本代码

0、写在前面的话

以前看了阮一峰老师关于互联网协议入门的博客，受益不浅，接着再去体会了下HTTP协议，就想着看实际网络访问中的那些HTTP请求头和响应是什么样的。Chrome的调试工具的Network选项其实已经够用了，可是其格式为了方便观看作了调整，我想看原生的，就从网友处得知了比较专业的抓包工具：Fiddler。

基本使用仍是比较简单的，能够直接参考博客《 Fiddler 教程》。这里想要吐槽的是，本人电脑的不知道什么环境致使的Fiddler没法抓取网页的https请求，这个设置是能够直接在软件上打开的，然而个人电脑始终开启后不生效，各类谷歌各类调鼓捣了超过4h仍然无果！如今那么多网站都开始用https，不能抓取https的抓包工具岂不是逐渐成为一只咸鱼了。而我在同事一样的win10 x64电脑同版本Fiddler设置抓取https，只按照普通设置花了大概3min不到就OK了，个人心态是崩溃的，谢谢。

另外，本文涉及的如何让手机端也能在电脑上经过Fiddler抓包分析，请参考连接《 fiddler 手机 https 抓包》，主要参考文中的代理设置部分，若是不是抓取https，其余的如证书安装能够略过。

一、背景介绍

以前看到一篇博客关于Fiddler的好处在于能够在实际线上环境调整脚本代码，即拦截脚本，本地修改后返回，在真实的环境下去调试，从而最大限度的减小bug发生的可能性。没想到，昨天晚上就给我遇到了，老大问我公众号的微信绑定为何点击肯定按钮以后没有反应，最终定位发现绑定在后台是生效了，Ajax反馈前端的响应前端也收到了，问题在于回调函数。

$(function(){  
    //绑定
    $("#bound").click(function() {
        var username = $("#username").val();
        var password = $("#password").val();
        if(username.trim() == "" || password.trim() == "") {
            weui.topTips('用户名或密码不得为空', 1500);
            return;
        }
        $().invoke("/weChat/grading/do/checkDepartment.q", {username:username, password:password}, function(re) {
            if(re == 'error') {
                weui.topTips('用户名或密码错误', 1500);
            } else {
                weui.confirm('绑定考级点:' + re,
                        //肯定
                        function() {
                            $().invoke("/weChat/grading/do/bound.q", {username:username, password:password}, function(re) {
                                if('success' == re) {
                                    weui.alert('绑定成功', function() {
                                        wx.closeWindow();
                                    });
                                } else {
                                    weui.alert(re);
                                }
                            });
                        },
                        //取消
                        function() {
                            //none
                        });
            }
        });
    });
});

 

1

$(function(){  

2

    //绑定

3

    $("#bound").click(function() {

4

        var username = $("#username").val();

5

        var password = $("#password").val();

6

        if(username.trim() == "" || password.trim() == "") {

7

            weui.topTips('用户名或密码不得为空', 1500);

8

            return;

9

        }

10

        $().invoke("/weChat/grading/do/checkDepartment.q", {username:username, password:password}, function(re) {

11

            if(re == 'error') {

12

                weui.topTips('用户名或密码错误', 1500);

13

            } else {

14

                weui.confirm('绑定考级点:' + re,

15

                        //肯定

16

                        function() {

17

                            $().invoke("/weChat/grading/do/bound.q", {username:username, password:password}, function(re) {

18

                                if('success' == re) {

19

                                    weui.alert('绑定成功', function() {

20

                                        wx.closeWindow();

21

                                    });

22

                                } else {

23

                                    weui.alert(re);

24

                                }

25

                            });

26

                        },

27

                        //取消

28

                        function() {

29

                            //none

30

                        });

31

            }

32

        });

33

    });

34

});

二、方法1：Fiddler断点抓包改响应

既然大概知道是回调函数出了问题，那么先来判断是回调函数没有调用，仍是回调函数中的方法没生效，仍是条件进入出现了问题。

Fiddler能够在响应返回以前的“ 请求以前”和“ 请求以后”两种状态进行断点，分别 能够修改即将发送出去的请求和即将返回的响应，两种方式在命令行的表示分别为：

• bpu
• bpafter

咱们要改返回的脚本，因此也就是“请求以后”，则在命令行输入 bpafter {url}：

 

在进入绑定页面的时候，能够看到已经对该部分进行了拦截：

 

咱们直接在响应中修改代码，增长两行alert用以断定函数失效的位置，修改完成后，直接点击Run to Completion便可：

 

结果两个alert都触发了，那么问题出在哪呢，显然就是weui.alert的问题了：

weui.alert方法是微信官方提供的js文件，并且我在本地运行，经过微信测试号进行测试时是ok的，客户的公众号正式上线以后，也测试是ok的，如今忽然莫名其妙就不生效了，你说气不气？关键是我再次用测试号进行测试，仍是有效的，就是在正式环境不行，我不懂，不知道是服务器环境问题，仍是正式公众号和测试公众号有什么区别。因此这就是能在所谓真实线上环境调试才能尽量减小bug的缘由吧，谜，得烧香。 

接下来其实能够继续使用这个方法进行调试修改，为了介绍另外一种方式，接下来的修改就采用自动拦截的方式，不过记得先清除以前的断点拦截，输入bpafter不带url便可清除：

 

三、方法2：Fiddler自动拦截改响应

Fiddler能够设置规则，自动对符合条件的url请求进行拦截，并返回指定的响应。这意味着咱们能够把内容直接写在本地的一个文件里，自动拦截设置为返回该文件，因此咱们每次调试代码只须要修改本地文件便可，这样一来：

• 环境仍然是真实的服务器环境
• 本地修改不会影响服务器的文件，也不会影响其余人的请求
• 本地能够修改存储，比断点修改调试要方便不少

先把代码写在本地的一个txt文件中，由于是做为响应返回，因此不能单纯是文件内容，还应该加上响应头，文件内容只是做为响应内容体：

 

接下来设置自动拦截响应：

• 找到AutoResponder页面
• 点击Add Rule添加拦截规则
• 编辑拦截规则，分别对应拦截的url和返回的响应内容
• 选择启用规则Enable rules

好了，接下来咱们直接修改本地文件的内容。既然weui.alert在线上有问题，那么咱们用它其余的api，好比weui.toast：

 

保存好文件，再次访问页面，能够看到fiddler的响应中，确实返回的是咱们本地文件的内容：

 

发现weui.toast在线上能够正常运行：

 

那么调试ok之后，直接把服务器上的内容按调试后的代码进行修改从新部署，就好了。

fiddler的两种方式修改响应，是否是很方便呢？