首頁技術(shù)文章正文

Web前端開發(fā)培訓之實用的 JavaScript 調(diào)試小技巧

更新時間:2017-05-31 來源:黑馬程序員web前端開發(fā)培訓學院 瀏覽量:

除了console.log,debugger就是另一個我很喜歡的快速調(diào)試的工具,將debugger加入代碼之后,Chrome會自動在插入它的地方停止,很像C或者Java里面打斷點。你也可以在一些條件控制中插入該調(diào)試語句,譬如:
[JavaScript] 純文本查看 復制代碼
1
2
3
if (thisThing) {
    debugger;
}
將Objects以表格形式展示
有時候我們需要看一些復雜的對象的詳細信息,最簡單的方法就是用console.log然后展示成一個列表狀,上下滾動進行瀏覽。不過似乎用console.table展示成列表會更好呦,大概是介個樣子
[JavaScript] 純文本查看 復制代碼
1
2
3
4
5
6
7
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中點擊toggle device mode按鈕,然后就可以在不同的設(shè)備屏幕尺寸下進行調(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ā),但是也會帶來大量的預定義的函數(shù),譬如創(chuàng)建View的、綁定事件的等等,這樣我們就不容易追蹤我們自定義函數(shù)的調(diào)用過程了。雖然JavaScript不是一個非常嚴謹?shù)恼Z言,有時候很難搞清楚到底發(fā)生了啥,特別是當你需要審閱其他人的代碼的時候。這時候console.trace就要起作用咯,它可以幫你進行函數(shù)調(diào)用的追蹤。譬如下面的代碼中我們要追蹤出car對象中對于funcZ的調(diào)用過程:
[JavaScript] 純文本查看 復制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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的實例然后調(diào)用了car.funcX。

格式化被壓縮的代碼

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

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

當我們想在函數(shù)里加個斷點的時候,一般會選擇這么做:

  • 在Inspector中找到指定行,然后添加一個斷點
  • 在腳本中添加一個debugger調(diào)用
不過這兩種方法都存在一個小問題就是都要到對應的腳本文件中然后再找到對應的行,這樣會比較麻煩。這邊介紹一個相對快捷點的方法,就是在console中使用debug(funcName)然后腳本會在指定到對應函數(shù)的地方自動停止。這種方法有個缺陷就是無法在私有函數(shù)或者匿名函數(shù)處停止,所以還是要因時而異:
[JavaScript] 純文本查看 復制代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
var func1 = function() {
func2();
};
  
var Car = function() {
this.funcX = function() {
this.funcY();
}
  
this.funcY = function() {
this.funcZ();
}
}
  
var car = new Car();

禁止不相關(guān)的腳本運行

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


在較復雜的調(diào)試情況下發(fā)現(xiàn)關(guān)鍵元素

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

[JavaScript] 純文本查看 復制代碼
01
02
03
04
05
06
07
08
09
10
<font style="color:rgb(51, 51, 51)"><font size="3">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’);</font></font>

console.log()中你可以使用%s來代表一個字符串 ,?%i?來代表數(shù)字, 以及?%c?來代表自定義的樣式。
監(jiān)測指定函數(shù)的調(diào)用與參數(shù)

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

[JavaScript] 純文本查看 復制代碼
1
2
<font style="color:rgb(51, 51, 51)"><font size="3">var func1 = function(x, y, z) {
};</font></font>

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

Console中使用$進行元素查詢

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

Postman

很多人習慣用Postman進行API調(diào)試或者發(fā)起Ajax請求,不過別忘了你瀏覽器自帶的也能做這個,并且你也不需要擔心啥認證啊這些,因為Cookie都是自帶幫你傳送的,這些只要在network這個tab里就能進行,大概這樣子:

DOM變化檢測

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




本文版權(quán)歸黑馬程序員web前端開發(fā)學院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓學院;
首發(fā):http://web.itheima.com/ 
分享到:
在線咨詢 我要報名
和我們在線交談!