前言

創(chuàng)新互聯(lián)公司專注于東河網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供東河營銷型網(wǎng)站建設(shè)，東河網(wǎng)站制作、東河網(wǎng)頁設(shè)計(jì)、東河網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造東河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供東河網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

調(diào)試技巧，在任何一項(xiàng)技術(shù)研發(fā)中都可謂是必不可少的技能。掌握各種調(diào)試技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。而在互聯(lián)網(wǎng)前端開發(fā)越來越重要的今天，如何在前端開發(fā)中降低開發(fā)成本，提升工作效率，掌握前端開發(fā)調(diào)試技巧尤為重要。

本文將一一講解各種前端JS調(diào)試技巧，也許你已經(jīng)熟練掌握，那讓我們一起來溫習(xí)，也許有你沒見過的方法，不妨一起來學(xué)習(xí)，也許你尚不知如何調(diào)試，趕緊趁此機(jī)會填補(bǔ)空白。

一、‘debugger;'

除了console.log，debugger就是另一個我很喜歡的快速調(diào)試的工具，將debugger加入代碼之后，Chrome會自動在插入它的地方停止，很像C或者Java里面打斷點(diǎn)。你也可以在一些條件控制中插入該調(diào)試語句，譬如：

if (thisThing) {
 debugger;
}

二、將Objects以表格形式展示

有時候我們需要看一些復(fù)雜的對象的詳細(xì)信息，最簡單的方法就是用console.log然后展示成一個列表狀，上下滾動進(jìn)行瀏覽。不過似乎用console.table展示成列表會更好呦，大概是介個樣子：

var animals = [
 { animal: 'Horse', name: 'Henry', age: 43 },
 { animal: 'Dog', name: 'Fred', age: 13 },
 { animal: 'Cat', name: 'Frodo', age: 18 }
];
 
console.table(animals);

三、多屏幕尺寸測試

Chrome有一個非常誘人的功能就是能夠模擬不同設(shè)備的尺寸，在Chrome的Inspector中點(diǎn)擊toggle device mode按鈕，然后就可以在不同的設(shè)備屏幕尺寸下進(jìn)行調(diào)試咯：

四、在Console快速選定DOM元素

在Elements選擇面板中選擇某個DOM元素然后在Console中使用該元素也是非常常見的一個操作，Chrome Inspector會緩存最后5個DOM元素在它的歷史記錄中，你可以用類似于Shell中的$0等方式來快速關(guān)聯(lián)到元素。譬如下圖的列表中有‘item-4′, ‘item-3', ‘item-2', ‘item-1', ‘item-0'這幾個元素，你可以這么使用：

五、獲取某個函數(shù)的調(diào)用追蹤記錄

JavaScript框架極大方便了我們的開發(fā)，但是也會帶來大量的預(yù)定義的函數(shù)，譬如創(chuàng)建View的、綁定事件的等等，這樣我們就不容易追蹤我們自定義函數(shù)的調(diào)用過程了。雖然JavaScript不是一個非常嚴(yán)謹(jǐn)?shù)恼Z言，有時候很難搞清楚到底發(fā)生了啥，特別是當(dāng)你需要審閱其他人的代碼的時候。這時候console.trace就要起作用咯，它可以幫你進(jìn)行函數(shù)調(diào)用的追蹤。譬如下面的代碼中我們要追蹤出car對象中對于funcZ的調(diào)用過程：

var car;
 
var func1 = function() {
func2();
}
 
var func2 = function() {
func4();
}
 
var func3 = function() {
 
}
 
var func4 = function() {
car = new Car();
car.funcX();
}
 
var Car = function() {
this.brand = ‘volvo';
this.color = ‘red';
 
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
 
this.funcZ = function() {
console.trace(‘trace car')
}
}
 
func1();

這邊就可以清晰地看出func1調(diào)用了func2，然后調(diào)用了func4，func4創(chuàng)建了Car的實(shí)例然后調(diào)用了car.funcX。

六、格式化被壓縮的代碼

有時候在生產(chǎn)環(huán)境下我們發(fā)現(xiàn)了一些莫名奇妙的問題，然后忘了把sourcemaps放到這臺服務(wù)器上，或者在看別人家的網(wǎng)站的源代碼的時候，結(jié)果就看到了一坨不知道講什么的代碼，就像下圖。Chrome為我們提供了一個很人性化的反壓縮工具來增強(qiáng)代碼的可讀性，大概這么用：

七、快速定位調(diào)試函數(shù)

當(dāng)我們想在函數(shù)里加個斷點(diǎn)的時候，一般會選擇這么做：

     1.在Inspector中找到指定行，然后添加一個斷點(diǎn)

     2.在腳本中添加一個debugger調(diào)用

不過這兩種方法都存在一個小問題就是都要到對應(yīng)的腳本文件中然后再找到對應(yīng)的行，這樣會比較麻煩。這邊介紹一個相對快捷點(diǎn)的方法，就是在console中使用debug(funcName)然后腳本會在指定到對應(yīng)函數(shù)的地方自動停止。這種方法有個缺陷就是無法在私有函數(shù)或者匿名函數(shù)處停止，所以還是要因時而異：

var func1 = function() {
func2();
};
 
var Car = function() {
this.funcX = function() {
this.funcY();
}
 
this.funcY = function() {
this.funcZ();
}
}
 
var car = new Car();

八、禁止不相關(guān)的腳本運(yùn)行

當(dāng)我們開發(fā)現(xiàn)代網(wǎng)頁的時候都會用一些第三方的框架或者庫，它們幾乎都是經(jīng)過測試并且相對而言Bug較少的。不過當(dāng)我們調(diào)試我們自己的腳本的時候也會一不小心跳到這些文件中，引發(fā)額外的調(diào)試任務(wù)。解決方案呢就是禁止這部分不需要調(diào)試的腳本運(yùn)行，詳情可見這篇文章：: javascript-debugging-with-black-box。

在較復(fù)雜的調(diào)試情況下發(fā)現(xiàn)關(guān)鍵元素 在一些復(fù)雜的調(diào)試環(huán)境下我們可能要輸出很多行的內(nèi)容，這時候我們習(xí)慣性的會用console.log, console.debug, console.warn, console.info, console.error這些來進(jìn)行區(qū)分，然后就可以在Inspector中進(jìn)行過濾。不過有時候我們還是希望能夠自定義顯示樣式，你可以用CSS來定義個性化的信息樣式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;', ‘–‘, msg, ‘–‘);
}
 
console.important = function(msg) {
console.log(‘ % c % s % s % s', ‘color: brown; font - weight: bold; text - decoration: underline;', ‘–‘, msg, ‘–‘);
}
 
console.todo(“This is something that' s need to be fixed”);
console.important(‘This is an important message');

在console.log()中你可以使用%s來代表一個字符串 , %i 來代表數(shù)字， 以及 %c 來代表自定義的樣式。

九、監(jiān)測指定函數(shù)的調(diào)用與參數(shù)

在Chrome中可以監(jiān)測指定函數(shù)的調(diào)用情況以及參數(shù)：

var func1 = function(x, y, z) {
};

這種方式能夠讓你實(shí)時監(jiān)控到底啥參數(shù)被傳入到了指定函數(shù)中。

十、Console中使用$進(jìn)行元素查詢

在Console中也可以使用來進(jìn)行類似于querySelector那樣基于CSS選擇器的查詢，(‘css-selector') 會返回滿足匹配的第一個元素，而$$(‘css-selector') 會返回全部匹配元素。注意，如果你會多次使用到元素，那么別忘了將它們存入變量中。

十一、Postman

很多人習(xí)慣用Postman進(jìn)行API調(diào)試或者發(fā)起Ajax請求，不過別忘了你瀏覽器自帶的也能做這個，并且你也不需要擔(dān)心啥認(rèn)證啊這些，因?yàn)镃ookie都是自帶幫你傳送的，這些只要在network這個tab里就能進(jìn)行，大概這樣子：

十二、DOM變化檢測

DOM有時候還是很操蛋的，有時候壓根不知道啥時候就變了，不過Chrome提供了一個小的功能就是當(dāng)DOM發(fā)生變化的時候它會提醒你，你可以監(jiān)測屬性變化等等：

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Javascript能帶來一定的幫助，如果有疑問大家可以留言交流。