關(guān)于JS調(diào)試的小tips記錄

1 debugger
將debugger加入代碼之后,chrome會(huì)自動(dòng)在插入它的地方停止
如:

if(thisThing){ debugger;}

2 將對(duì)象Object以表格形式展示
看一些復(fù)雜的對(duì)象的詳細(xì)信息,最簡(jiǎn)單的方法就是console.log,不過(guò),用console.table展示成列表會(huì)更好
如:

var animals={
  {animal : 'Horse0' , name : 'jill0' , age : 180 },
  {animal : 'Horse1' , name : 'jill1' , age : 181 },
  {animal : 'Horse2' , name : 'jill2' , age : 182 }
};
console.table(animals);

3 多屏幕尺寸測(cè)試
個(gè)人建議還是真機(jī)調(diào)試,特別是iphone,有一些官方的,蘋果自帶的設(shè)置在谷歌這里是測(cè)試不出來(lái)的,有很大的區(qū)別,但如果僅僅是適配分辨率的話,這個(gè)是個(gè)不錯(cuò)的調(diào)試方式

4 在console快速選定DOM元素
在Elements選擇 面板中選擇某個(gè)DOM元素然后再console中使用該元素也是非常常見(jiàn)的一個(gè)操作,chrome Inspector會(huì)緩存5DOM元素在它的歷史紀(jì)錄中。
如:


QQ圖片20160604163407.jpg

5 獲取某個(gè)函數(shù)的調(diào)用追蹤記錄
JS帶來(lái)的大量預(yù)定義函數(shù),譬如創(chuàng)建view的,綁定事件的等等,我們不容易追蹤到我們自定義函數(shù)的調(diào)用過(guò)程,這個(gè)時(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();
![Uploading QQ圖片20160604165843_780114.png . . .]

car.funcX();
}
  
var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;
 
this.funcX = function() {
this.funcY();
}

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

6 格式化被壓縮的代碼

![Uploading QQ圖片20160604165843_786904.png . . .]

7 快速定位調(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)的行,比較麻煩
    介紹個(gè)相對(duì)快捷的方法:就是在console中使用debug(funcName)然后腳本會(huì)在指定到對(duì)應(yīng)函數(shù)的地方自動(dòng)停止。這種方法有個(gè)缺陷就是無(wú)法在私有函數(shù)或者匿名函數(shù)處停止

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

9 在較復(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í)候我們還是希望能夠自定義顯示樣式,在console.log()中你可以使用%s來(lái)代表一個(gè)字符串,%c來(lái)代表自定義的樣式

console.improtant=function(msg){
  console.log('%c%s%s%s','color:red;','-',msg,'-');
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容