摘要：第四行是為了保存當(dāng)前語(yǔ)境下的，事實(shí)上在瀏覽器的調(diào)試工具中直接運(yùn)行這些代碼的時(shí)候，這個(gè)指向的就是全局對(duì)象，所以去掉這一行，將下面的改成，程序的運(yùn)行結(jié)果是一模一樣的。

在騰訊的AlloyTeam的Blog上發(fā)現(xiàn)了這樣的一款工具：AlloyLever（原blog地址：http://www.alloyteam.com/2016...），覺得非常有趣且實(shí)用。尤其是其實(shí)現(xiàn)的原理也并不復(fù)雜，卻可以給平常的調(diào)試工作帶來(lái)巨大的便利，不得不讓人感嘆凡事就怕認(rèn)真啊。

這個(gè)就是這款工具的樣子，它整合了web調(diào)試中幾個(gè)非常頻繁的剛需：看log、看error、看AJAX發(fā)包與回包。同時(shí)還附有查看timeline、cookie和localStorage的這些功能。雖然這些信息在chrome的調(diào)試工具里面也是觸手可及，可是由于涉及的原因，他們被放在跟原web頁(yè)面不相關(guān)的一個(gè)窗口里，還分了很多的標(biāo)簽頁(yè)，在實(shí)際工作中，一個(gè)web頁(yè)面+F12的調(diào)試窗口經(jīng)常就占滿了整個(gè)屏幕，著實(shí)是有些不太方便。這也是這個(gè)工具最初被制造出來(lái)，想要解決的問(wèn)題吧。

這個(gè)工具的實(shí)現(xiàn)原理，是很簡(jiǎn)單的函數(shù)劫持。有關(guān)于函數(shù)劫持的相關(guān)知識(shí)，可參見這篇文章（https://segmentfault.com/a/11...），其大概原理是創(chuàng)建一個(gè)和現(xiàn)有函數(shù)同名的函數(shù)（當(dāng)然首先要把原來(lái)的函數(shù)給保存下來(lái)），以覆蓋掉他原本的引用，然后在函數(shù)體內(nèi)先針對(duì)參數(shù)做一些自己想要實(shí)現(xiàn)的功能，最后再調(diào)用之前保存的原函數(shù)，實(shí)現(xiàn)原本的功能。
這個(gè)思路也很像redux里面有關(guān)于middleware的設(shè)計(jì)，只不過(guò)redux運(yùn)用的思想更為先進(jìn)，通過(guò)一系列結(jié)構(gòu)將各個(gè)中間件解耦，互不干擾。而本文的目的不是為了靈活的使用各種中間件，只是為了想做一個(gè)調(diào)試信息的自主整合頁(yè)面，所以使用這種強(qiáng)聯(lián)系的耦合方式也沒(méi)有什么大問(wèn)題。

原文中的關(guān)鍵源碼如下：

window.console = {
    wc: window.console
};    //將原本console的引用指向console的一個(gè)成員變量wc，以便在后面擴(kuò)充的函數(shù)中使用。
var self = this;  //保存當(dāng)前語(yǔ)境中的this
["log", "error", "warn", "debug", "info"].forEach(function (item) {  //針對(duì)console的五種方法
    console[item] = function (msg) {
        this.wc[item](msg);
        self.log(msg, item);
    }
});

代碼選自原網(wǎng)頁(yè)，注釋是我加的。

在JavaScript中，函數(shù)也是對(duì)象的一種，也能像對(duì)象一樣擁有自己的變量。所以程序的前三行就是講console這個(gè)對(duì)象換了一個(gè)別名wc保存在console本身內(nèi)。
第四行是為了保存當(dāng)前語(yǔ)境下的this，事實(shí)上在瀏覽器的調(diào)試工具中直接運(yùn)行這些代碼的時(shí)候，這個(gè)this指向的就是全局對(duì)象window，所以去掉這一行，將下面的self.log改成window.log，程序的運(yùn)行結(jié)果是一模一樣的。
保存完了所有需要的變量后，下面的事情就簡(jiǎn)單了，遍歷console下的log, error, warn, debug和info這五個(gè)方法，把他們都修改成先執(zhí)行本身，然后再執(zhí)行我們自定義的log方法，在這個(gè)自定義的log方法內(nèi)，我們能訪問(wèn)到傳入的參數(shù)msg和訪問(wèn)的原生函數(shù)名item，然后就可以通過(guò)這個(gè)鉤子，去獲取數(shù)據(jù)，并做一些處理，顯示到AlloyLever的控制臺(tái)上啦。

而ajax的截獲跟這個(gè)原理也差不多，代碼如下：

var XHR = window.XMLHttpRequest;
 
window.XMLHttpRequest=function(){
    var xhr = new XHR();
    checkSuccess(xhr);
    return xhr;
};
 
window.XMLHttpRequest.realXHR = XHR;
 
var self=this;
 
function checkSuccess(xhr) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        self.option.xhrs.push({url:xhr.responseURL, json:JSON.stringify(JSON.parse( xhr.responseText), null, "	")})
    }else if(xhr.status>=400) {
        console.error(xhr.responseURL +" "+xhr.status+" ("+xhr.statusText+")")
    }
    else{
        window.setTimeout(function () {
            checkSuccess(xhr);
        }, 0);
    }
}

區(qū)別就是因?yàn)閍jax是異步請(qǐng)求，所以在函數(shù)內(nèi)部?jī)?nèi)置了一個(gè)setTimeout循環(huán)，如果請(qǐng)求未完成則一直循環(huán)，直到請(qǐng)求完成，內(nèi)容被捕獲為止。

這個(gè)工具還有個(gè)移動(dòng)端的版本：https://github.com/WechatFE/v...
對(duì)于做微信開發(fā)的小伙伴們，以后的測(cè)試就方便多啦！