在網站開發中，我們難免會遇到各種bug，這時，我們就需要去除錯我們的JavaScript指令碼找出問題，然後去修改程式碼。那我們如何去除錯呢？

最簡單的就是alert()方法，不過，alert 彈出視窗會中斷程式， 而且如果要在迴圈中顯示資訊，就會彈出多個彈窗，你不點選alert框的確定按鈕下一個alert就不會出現，另外alert 顯示物件永遠顯示為[object ]，所以alert()方法只適合小程式。 第二種是斷點除錯 1.在原始碼上使用debugger 例如： JavaScript function check(){ var i=0; debugger; alert(1); } check();

123456

functioncheck(){vari=0;debugger;alert(1);}check();

可以看到，程式會執行到debugger處就會停住，並沒有執行後面，你可以按F8來繼續執行。

2. 直接在瀏覽器上斷點，同樣是開啟控制檯的source，找到你要除錯的程式碼，然後點選你要斷點的那一行程式碼的左側行碼處，如下圖：

第三種就是我最喜歡的console。

最常用的就是console.log()，在控制檯中列印資訊，它可以接受任何字串、數字和JavaScript物件，也可以接受換行符n以及製表符t。

JavaScript var i=0; var name="我是console"; var json={ "key":"console" }; console.log(i); console.log(name); console.log(json);

12345678

vari=0;varname="我是console";varjson={"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）四種。

JavaScript console.log("%s年",2016); console.log("%d年%d月",2016,6); console.log("%f",3.1415); console.log("%o",json);

1234	console.log("%s年",2016);console.log("%d年%d月",2016,6);console.log("%f",3.1415);console.log("%o",json);

如果你覺得上面的輸出資訊太單調了，我們還可以這樣：

JavaScript console.log("%c自定義樣式","font-size:20px;color:green"); console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-weight:bold;color:red");

12	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程式碼

<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>

123456789101112131415

<table><thead><tr><th></th><th></th><th></th><th></th><th></th></tr></thead></table><script>vartable=document.querySelector("table");console.dirxml(table);</script>

console.group輸出一組資訊的開頭

console.groupEnd結束一組輸出資訊

JavaScript console.group("start"); console.log("子項"); console.groupEnd("end"); console.log("aa");

1234	console.group("start");console.log("子項");console.groupEnd("end");console.log("aa");

console.assert對輸入的表示式進行斷言，只有表示式為false時，才輸出相應的資訊到控制檯

JavaScript var isTrue=true; console.assert(isTrue,"我是錯誤"); isTrue=false; console.assert(isTrue,"我是錯誤2");

1234	varisTrue=true;console.assert(isTrue,"我是錯誤");isTrue=false;console.assert(isTrue,"我是錯誤2");

console.count  當你想統計程式碼被執行的次數，這個方法很有用

JavaScript function play(){ console.count("執行次數："); } play(); play(); play();

123456

functionplay(){console.count("執行次數：");}play();play();play();

console.dir  直接將該DOM結點以DOM樹的結構進行輸出，可以詳細查物件的方法發展等等

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> var table=document.querySelector("table"); console.dir(table);

1234567891011121314

<table><thead><tr><th></th><th></th><th></th><th></th><th></th></tr></thead></table>vartable=document.querySelector("table");console.dir(table);

console.time 計時開始

console.timeEnd 計時結束

JavaScript console.time("array"); var a=0; for(var i=0;i<100000;i++){ a += i; } console.timeEnd("array");

123456

console.time("array");vara=0;for(vari=0;i<100000;i++){a+=i;}console.timeEnd("array");

console.profile和console.profileEnd配合一起使用來檢視CPU使用相關資訊

console.timeLine和console.timeLineEnd配合一起記錄一段時間軸

打賞支援我寫出更多好文章，謝謝！

打賞作者

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式