關(guān)于JavaScript調(diào)試的十來(lái)個(gè)小Tips

Dongjie_Liu 發(fā)布于2019-08-19 18:26 / 3142人閱讀

摘要：系列文章的人懶事多，最近翻多寫(xiě)少啊。不過(guò)當(dāng)我們調(diào)試我們自己的腳本的時(shí)候也會(huì)一不小心跳到這些文件中，引發(fā)額外的調(diào)試任務(wù)。

系列文章的Github Repo
人懶事多，最近翻多寫(xiě)少啊。原文地址這里

‘debugger;’

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

if (thisThing) {
    debugger;
}

將Objects以表格形式展示

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

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

多屏幕尺寸測(cè)試

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

在Console快速選定DOM元素

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

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

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

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。

格式化被壓縮的代碼

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

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

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

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

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

不過(guò)這兩種方法都存在一個(gè)小問(wèn)題就是都要到對(duì)應(yīng)的腳本文件中然后再找到對(duì)應(yīng)的行，這樣會(huì)比較麻煩。這邊介紹一個(gè)相對(duì)快捷點(diǎn)的方法，就是在console中使用debug(funcName)然后腳本會(huì)在指定到對(duì)應(yīng)函數(shù)的地方自動(dòng)停止。這種方法有個(gè)缺陷就是無(wú)法在私有函數(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)我們開(kāi)發(fā)現(xiàn)代網(wǎng)頁(yè)的時(shí)候都會(huì)用一些第三方的框架或者庫(kù)，它們幾乎都是經(jīng)過(guò)測(cè)試并且相對(duì)而言Bug較少的。不過(guò)當(dāng)我們調(diào)試我們自己的腳本的時(shí)候也會(huì)一不小心跳到這些文件中，引發(fā)額外的調(diào)試任務(wù)。解決方案呢就是禁止這部分不需要調(diào)試的腳本運(yùn)行，詳情可見(jiàn)這篇文章：: javascript-debugging-with-black-box。

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

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

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來(lái)代表一個(gè)字符串 , %i 來(lái)代表數(shù)字，以及 %c 來(lái)代表自定義的樣式。

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

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

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

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

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

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

Postman

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

DOM變化檢測(cè)

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

Further Reading

Speed up your markup with zen coding emmet

Emmet and css the forgotten part

Chrome command line api

Chrome developer tools tips and tricks

Firefox edit and resend a request

云服務(wù)器 GPU云服務(wù)器關(guān)于javascript的問(wèn)題 javascript調(diào)試調(diào)試javascript javascript斷點(diǎn)調(diào)試

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79615.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Dongjie_Liu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

iFog：$11/半年/256MB內(nèi)存/5GB空間/不限流量/100Mbps-1Gbps端口/KVM

閱讀 2325·2021-08-26 14:14
20170808- css 居中

閱讀 2688·2019-08-29 13:07
數(shù)據(jù)結(jié)構(gòu)與算法（排序） --javascript語(yǔ)言描述

閱讀 2093·2019-08-26 11:44
call,apply,bind

閱讀 685·2019-08-26 10:11
每日 30 秒 ? 根據(jù)條件將數(shù)組分成兩個(gè)集合

閱讀 2422·2019-08-23 15:43
上百道最新前端面試題

閱讀 3085·2019-08-23 14:17
echarts花樣作死的坑

閱讀 393·2019-08-23 12:36
JavaScript 進(jìn)階知識(shí) - Ajax篇

閱讀 2099·2019-08-22 15:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

關(guān)于JavaScript調(diào)試的十來(lái)個(gè)小Tips

相關(guān)文章

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

**五種前端開(kāi)發(fā)必備的調(diào)試技術(shù)**

[無(wú)心插柳]簡(jiǎn)單實(shí)現(xiàn)常用的表單校驗(yàn)函數(shù)

[無(wú)心插柳]簡(jiǎn)單實(shí)現(xiàn)常用的表單校驗(yàn)函數(shù)

[無(wú)心插柳]簡(jiǎn)單實(shí)現(xiàn)常用的表單校驗(yàn)函數(shù)

發(fā)表評(píng)論

0條評(píng)論

Dongjie_Liu

男|高級(jí)講師

TA的文章

iFog：$11/半年/256MB內(nèi)存/5GB空間/不限流量/100Mbps-1Gbps端口/KVM

20170808- css 居中

數(shù)據(jù)結(jié)構(gòu)與算法（排序） --javascript語(yǔ)言描述

call,apply,bind

每日 30 秒 ? 根據(jù)條件將數(shù)組分成兩個(gè)集合

上百道最新前端面試題

echarts花樣作死的坑

JavaScript 進(jìn)階知識(shí) - Ajax篇

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

關(guān)于JavaScript調(diào)試的十來(lái)個(gè)小Tips

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！