資訊專欄INFORMATION COLUMN
摘要：第四行是為了保存當(dāng)前語境下的，事實上在瀏覽器的調(diào)試工具中直接運(yùn)行這些代碼的時候，這個指向的就是全局對象，所以去掉這一行，將下面的改成，程序的運(yùn)行結(jié)果是一模一樣的。
在騰訊的AlloyTeam的Blog上發(fā)現(xiàn)了這樣的一款工具：AlloyLever（原blog地址：http://www.alloyteam.com/2016...），覺得非常有趣且實用。尤其是其實現(xiàn)的原理也并不復(fù)雜，卻可以給平常的調(diào)試工作帶來巨大的便利，不得不讓人感嘆凡事就怕認(rèn)真啊。
這個就是這款工具的樣子，它整合了web調(diào)試中幾個非常頻繁的剛需：看log、看error、看AJAX發(fā)包與回包。同時還附有查看timeline、cookie和localStorage的這些功能。雖然這些信息在chrome的調(diào)試工具里面也是觸手可及，可是由于涉及的原因，他們被放在跟原web頁面不相關(guān)的一個窗口里，還分了很多的標(biāo)簽頁，在實際工作中，一個web頁面+F12的調(diào)試窗口經(jīng)常就占滿了整個屏幕，著實是有些不太方便。這也是這個工具最初被制造出來，想要解決的問題吧。
這個工具的實現(xiàn)原理，是很簡單的函數(shù)劫持。有關(guān)于函數(shù)劫持的相關(guān)知識，可參見這篇文章（https://segmentfault.com/a/11...），其大概原理是創(chuàng)建一個和現(xiàn)有函數(shù)同名的函數(shù)（當(dāng)然首先要把原來的函數(shù)給保存下來），以覆蓋掉他原本的引用，然后在函數(shù)體內(nèi)先針對參數(shù)做一些自己想要實現(xiàn)的功能，最后再調(diào)用之前保存的原函數(shù)，實現(xiàn)原本的功能。
這個思路也很像redux里面有關(guān)于middleware的設(shè)計，只不過redux運(yùn)用的思想更為先進(jìn)，通過一系列結(jié)構(gòu)將各個中間件解耦，互不干擾。而本文的目的不是為了靈活的使用各種中間件，只是為了想做一個調(diào)試信息的自主整合頁面，所以使用這種強(qiáng)聯(lián)系的耦合方式也沒有什么大問題。
原文中的關(guān)鍵源碼如下：
window.console = {
wc: window.console
}; //將原本console的引用指向console的一個成員變量wc，以便在后面擴(kuò)充的函數(shù)中使用。
var self = this; //保存當(dāng)前語境中的this
["log", "error", "warn", "debug", "info"].forEach(function (item) { //針對console的五種方法
console[item] = function (msg) {
this.wc[item](msg);
self.log(msg, item);
}
});
代碼選自原網(wǎng)頁，注釋是我加的。
在JavaScript中，函數(shù)也是對象的一種，也能像對象一樣擁有自己的變量。所以程序的前三行就是講console這個對象換了一個別名wc保存在console本身內(nèi)。
第四行是為了保存當(dāng)前語境下的this，事實上在瀏覽器的調(diào)試工具中直接運(yùn)行這些代碼的時候，這個this指向的就是全局對象window，所以去掉這一行，將下面的self.log改成window.log，程序的運(yùn)行結(jié)果是一模一樣的。
保存完了所有需要的變量后，下面的事情就簡單了，遍歷console下的log, error, warn, debug和info這五個方法，把他們都修改成先執(zhí)行本身，然后再執(zhí)行我們自定義的log方法，在這個自定義的log方法內(nèi)，我們能訪問到傳入的參數(shù)msg和訪問的原生函數(shù)名item，然后就可以通過這個鉤子，去獲取數(shù)據(jù)，并做一些處理，顯示到AlloyLever的控制臺上啦。
而ajax的截獲跟這個原理也差不多，代碼如下：
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ū)別就是因為ajax是異步請求，所以在函數(shù)內(nèi)部內(nèi)置了一個setTimeout循環(huán)，如果請求未完成則一直循環(huán)，直到請求完成，內(nèi)容被捕獲為止。
這個工具還有個移動端的版本：https://github.com/WechatFE/v...
對于做微信開發(fā)的小伙伴們，以后的測試就方便多啦！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/91248.html
摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....
摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...
摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系...
閱讀 3729·2023-04-25 23:32
閱讀 2104·2019-08-30 15:55
閱讀 2711·2019-08-30 15:52
閱讀 3173·2019-08-30 10:54
閱讀 900·2019-08-29 16:16
閱讀 712·2019-08-29 15:09
閱讀 3716·2019-08-26 14:05
閱讀 1692·2019-08-26 13:22
