在網站開發中，我們難免會遇到各種bug，這時，我們就需要去調試我們的JavaScript腳本找出問題，然後去修改代碼。那我們如何去調試呢？
1 2 3 4 5 6 | function check(){ var i=0; debugger; alert(1); } check(); |
可以看到，程序會運行到debugger處就會停住，並沒有執行後面，你可以按F8來繼續執行。
2. 直接在瀏覽器上斷點，同樣是打開控制檯的source，找到你要調試的代碼，然後點擊你要斷點的那一行代碼的左側行碼處，如下圖：
第三種就是我最喜歡的console。
最常用的就是console.log()，在控制檯中打印信息，它可以接受任何字符串、數字和JavaScript對象，也可以接受換行符n以及製表符t。
|
1
2
3
4
5
6
7
8
|
var
i=0;
var
name="我是console";
var
json={
"key":"console"
};
console.log(i);
console.log(name);
console.log(json);
|
你可以按紅箭頭所指的按鈕清除控制檯，也可以直接用console.clear()清除。
當然console可不止這一個方法，它還有：
console.info 用於輸出提示性信息
console.error用於輸出錯誤信息
console.warn用於輸出警示信息
console.debug用於輸出調試信息
console.info(“提醒”); console.error(“報錯了”); console.warn(“警告”); console.debug(“調試信息”);
console對象的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。
1 2 3 4 | console.log("%s年",2016); console.log("%d年%d月",2016,6); console.log("%f",3.1415); console.log("%o",json); |
如果你覺得上面的輸出信息太單調了，我們還可以這樣：
|
1
2
|
console.log("%c自定義樣式","font-size:20px;color:green");
console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-weight:bold;color:red");
|
console.dirxml用來顯示網頁的某個節點（node）所包含的html/xml代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script> var table=document.querySelector("table"); console.dirxml(table); </script> |
console.group輸出一組信息的開頭
console.groupEnd結束一組輸出信息
|
1
2
3
4
|
console.group("start");
console.log("子項");
console.groupEnd("end");
console.log("aa");
|
console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯
1 2 3 4 | var isTrue=true; console.assert(isTrue,"我是錯誤"); isTrue=false; console.assert(isTrue,"我是錯誤2"); |
console.count 當你想統計代碼被執行的次數，這個方法很有用
|
1
2
3
4
5
6
|
function
play(){
console.count("執行次數：");
}
play();
play();
play();
|
console.dir 直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查對象的方法發展等等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> var table=document.querySelector("table"); console.dir(table); |
console.timeEnd 計時結束console.time 計時開始
|
1
2
3
4
5
6
|
console.time("array");
var
a=0;
for(var
i=0;i<100000;i++){
a
+=
i;
}
console.timeEnd("array");
|
console.profile和console.profileEnd配合一起使用來查看CPU使用相關信息
console.timeLine和console.timeLineEnd配合一起記錄一段時間軸