Fiddler抓包調試前端腳本代碼

本文轉載自查看原文 2018-01-28 15:13 2421 磨刀不誤砍柴工

0、寫在前面的話

之前看了阮一峰老師關於互聯網協議入門的博客，受益匪淺，接着再去體會了下HTTP協議，就想着看實際網絡訪問中的那些HTTP請求頭和響應是什么樣的。Chrome的調試工具的Network選項其實已經夠用了，但是其格式為了方便觀看做了調整，我想看原生的，就從網友處得知了比較專業的抓包工具：Fiddler。

基本使用還是比較簡單的，可以直接參考博客《 Fiddler 教程》。這里想要吐槽的是，本人電腦的不知道什么環境導致的Fiddler無法抓取網頁的https請求，這個設置是可以直接在軟件上打開的，然而我的電腦始終開啟后不生效，各種谷歌各種調鼓搗了超過4h仍然無果！現在那么多網站都開始用https，不能抓取https的抓包工具豈不是逐漸成為一只咸魚了。而我在同事同樣的win10 x64電腦同版本Fiddler設置抓取https，只按照普通設置花了大概3min不到就OK了，我的心態是崩潰的，謝謝。

另外，本文涉及的如何讓手機端也能在電腦上通過Fiddler抓包分析，請參考鏈接《 fiddler 手機 https 抓包》，主要參考文中的代理設置部分，如果不是抓取https，其他的如證書安裝可以略過。

1、背景介紹

之前看到一篇博客關於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
                        });
            }
        });
    });
});

 
               
           

                     
                 
$(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
                        });
            }
        });
    });
});

2、方法1：Fiddler斷點抓包改響應

既然大概知道是回調函數出了問題，那么先來判斷是回調函數沒有調用，還是回調函數中的方法沒生效，還是條件進入出現了問題。

Fiddler可以在響應返回之前的“ 請求之前”和“ 請求之后”兩種狀態進行斷點，分別 可以修改即將發送出去的請求和即將返回的響應，兩種方式在命令行的表示分別為：

bpu
bpafter

我們要改返回的腳本，所以也就是“請求之后”，則在命令行輸入 bpafter {url}：

在進入綁定頁面的時候，可以看到已經對該部分進行了攔截：

我們直接在響應中修改代碼，增加兩行alert用以判定函數失效的位置，修改完成后，直接點擊Run to Completion即可：

結果兩個alert都觸發了，那么問題出在哪呢，顯然就是weui.alert的問題了：

weui.alert方法是微信官方提供的js文件，而且我在本地運行，通過微信測試號進行測試時是ok的，客戶的公眾號正式上線之后，也測試是ok的，現在突然莫名其妙就不生效了，你說氣不氣？關鍵是我再次用測試號進行測試，還是有效的，就是在正式環境不行，我不懂，不知道是服務器環境問題，還是正式公眾號和測試公眾號有什么區別。所以這就是能在所謂真實線上環境調試才能盡可能減少bug的原因吧，謎，得燒香。

接下來其實可以繼續使用這個方法進行調試修改，為了介紹另一種方式，接下來的修改就采用自動攔截的方式，不過記得先清除之前的斷點攔截，輸入bpafter不帶url即可清除：