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ì)錄中。
如:

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,'-');
}