寫在前面
本文包括瀏覽器除錯，不包括web移動端除錯。
本文除錯均在chrome瀏覽器進行
alert
這個不用多說了，不言自明
console
基本輸出
想必大家都在用console.log在控制檯輸出點東西，其實console還有其它的方法：
|
1 2 3 4 5 6 |
console.log("列印字串");//在控制檯列印自定義字串 console.error("我是個錯誤");//在控制檯列印自定義錯誤資訊 console.info("我是個資訊");//在控制檯列印自定義資訊 console.warn("我是個警告");//在控制檯列印自定義警告資訊 console.debug("我是個除錯");//在控制檯列印自定義除錯資訊 cosole.clear();//清空控制檯（這個下方截圖中沒有） |
注意上面輸出的error和throw出的error不一樣，前者只是輸出錯誤資訊，無法捕獲，不會冒泡，更不會中止程式執行。
格式化輸出
除此以外，console還支援自定義樣式和類似c語言的printf形式
|
1 2 3 4 5 6 7 8 |
console.log("%s年",2016);//%s表示字串 console.log("%d年%d月",2016,11);//%d表示整數 console.log("%f",3.1415926);//%f小數 console.log("%o",console);//%o表示物件 console.log("%c自定義樣式","font-size:30px;color:#00f"); console.log("%c我是%c自定義樣式","font-size:20px;color:green","font-size:10px;color:red"); |
DOM輸出
下面幾個比較簡單的，就不舉例子了，簡單說一下：
|
1 2 |
var ul = document.getElementsByTagName("ul"); console.dirxml(ul); //樹形輸出table節點，即<table>和它的innerHTML，由於document.getElementsByTagName是動態的，所以這個得到的結果肯定是動態的 |
和它的innerHTML，由於document.getElementsByTagName是動態的，所以這個得到的結果肯定是動態的
物件輸出
|
1 2 3 4 5 |
var o = { name:"Lily", age: 18 }; console.dir(obj);//顯示物件自有屬性和方法 |
對於多個物件的集合，你可以這樣，輸出更清晰：
|
1 2 3 |
var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}]; console.log(stu); console.table(stu); |
成組輸出
|
1 2 3 4 5 6 |
//建立一個引數組 console.group("start"); //引號裡是組名，自己起 console.log("sub1"); console.log("sub1"); console.log("sub1"); console.groupEnd("end"); |
函式計數和跟蹤
|
1 2 3 4 5 6 7 8 9 10 11 |
function fib(n){ //輸出前n個斐波那契數列值 if(n == 0) return; console.count("呼叫次數");//放在函式裡，每當這句程式碼執行輸出所在函式執行次數 console.trace();//顯示函式呼叫軌跡(訪問呼叫棧） var a = arguments[1] || 1; var b = arguments[2] || 1; console.log("fib=" + a); [a, b] = [b, a + b]; fib(--n, a, b); } fib(6); |
注：Chrome開發者工具中的Sources標籤頁也在Watch表示式下面顯示呼叫棧。
計時
|
1 2 3 |
console.time() //計時開始 fib(100); //用上述函式計算100個斐波那契數 console.timeEnd() //計時結束並輸出時長 |
斷言語句，這個c++除錯裡面也經常用到。js中，當第一個表示式或引數為true時候什麼也不發生，為false時終止程式並報錯
|
1 2 |
console.assert(true, "我錯了"); console.assert(false, "我真的錯了"); |
效能分析
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function F(){ var i = 0; function f(){ while(i++ == 1000); } function g(){ while(i++ == 100000); } f(); g(); } console.profile(); F(); console.profileEnd(); |
注：Chrome開發者工具中的Audits標籤頁也可以實現效能分析。
debugger
這個重量級的是博主最常用的，可能是c++出身，對於單步除錯由衷的熱愛。單步除錯就是點一下，執行一句程式，並且可以檢視當前作用域可見的所有變數和值。而debugger就是告訴程式在那裡停下來進行單步除錯，俗稱斷點。
右邊按鈕如下：
- Pause/Resume script execution：暫停/恢復指令碼執行（程式執行到下一斷點停止）。
- Step over next function call：執行到下一步的函式呼叫（跳到下一行）。
- Step into next function call：進入當前函式。
- Step out of current function：跳出當前執行函式。
- Deactive/Active all breakpoints：關閉/開啟所有斷點（不會取消）。
- Pause on exceptions：異常情況自動斷點設定。
其實右側還有很多強大的功能
- Watch：Watch表示式
- Call Stack: 棧中變數的呼叫，這裡是遞迴呼叫，肯定是在記憶體棧部分呼叫。
- Scope：當前作用域變數觀察。
- BreakPoints：當前斷點變數觀察。
- XHR BreakPoints：面向Ajax，專為非同步而生的斷點除錯功能。
- DOM BreakPoints：主要包括下列DOM斷點，註冊方式見下圖
- 當節點屬性發生變化時斷點（Break on attributes modifications）
- 當節點內部子節點變化時斷點（Break on subtree modifications）
- 當節點被移除時斷點（Break on node removal）
- Global Listeners：全域性事件監聽
- Event Listener Breakpoints：事件監聽器斷點，列出了所有頁面及指令碼事件，包括：滑鼠、鍵盤、動畫、定時器、XHR等等。
chrome中的除錯技巧
- DOM元素的控制檯書籤Chrome開發者工具和Firebug都提供了書籤功能，用於顯示你在元素標籤頁（Chrome）或HTML標籤頁（Firebug）中最後點選的DOM元素。如果你依次選擇了A元素、B元素和C元素，那麼$0 表示C元素，$1 表示B元素，$2 表示A元素。（這個和正規表示式的$符號類似，不過順序不同）
- 如果你想除錯f函式，用debug(f)語句可以增加這種斷點。
- Sources標籤頁左側皮膚上有一個程式碼片段（Snippet）子標籤頁，可用於儲存程式碼片段，幫你除錯程式碼。
- 可以用Chrome開發者工具Sources標籤頁中的格式化按鈕（Pretty Print Button）格式化壓縮後的程式碼。
- 在Network皮膚，選擇一個資原始檔，右鍵Copy Response可快速複製響應內容。
- 利用媒體查詢，這個主要是在Device Mode調節不同的解析度顯示。
- 選擇Elements，按 Esc > Emulation > Sensors進行感測器模擬。
- 點選漸入效果樣式圖示（紫色圖示），可以預覽動畫效果，並可對相應的貝塞爾曲線(cubic-bezier)進行調節動畫效果。
- 在Source中按住Alt鍵並拖動滑鼠進行多列內容選擇。
- Elements皮膚右鍵執行DOM元素節點，選擇Force Element State或者點選右側Toggle Element State圖示可以出發偽類。
- Network皮膚中選擇一張圖片，在右側圖片上滑鼠右鍵選擇copy it as a Data URI,就可以獲取圖片的Data URL (base64編碼)。
- 通過按住Ctrl鍵可以新增多個編輯游標，同時對多處進行編輯。按下Ctrl + U可以撤銷編輯。
- Elements皮膚右側的Style編輯器中，點選顏色十六進位制編碼前的小色塊，會彈出一個調色盤。
- 按下Alt鍵並且滑鼠雙擊選擇DOM元素前面的箭頭，就會展開該DOM元素下的所有位元組點元素.
- 快捷鍵：
- 快速定位到行：快捷鍵
Ctrl+O(Mac:CMD+O),輸入：行號:列號 來進行定位 - 元素搜尋：快捷鍵
Ctrl+F(Mac:CMD+F),試試在搜尋欄輸入ID選擇符或者類選擇符就可以定位到元素啦
除錯過程注意事項
- 避免記錄引用型別
當記錄物件或陣列時，永遠記得你在記錄什麼。記錄原始型別時，使用帶斷點的watch表示式。如果是非同步程式碼，避免記錄引用型別。
|
1 2 3 4 5 |
var arr = [{ num: 0 }]; setInterval(function(){ console.log(arr); arr[0].num += 1; }, 1000); |
這裡，第一個屬性中物件引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，num的值就已經確定了。之後無論你對同一個引用重新開啟多少次都不會變化。
2. 儘可能使用 source map。
有時生產程式碼不能使用source map，但不管怎樣，你都不應該直接對生產程式碼進行除錯。