寫在前面 本文包括瀏覽器調試，不包括web移動端調試。 本文調試均在chrome瀏覽器進行html
alert
這個不用多說了，不言自明node
console
基本輸出
想必你們都在用console.log在控制檯輸出點東西，其實console還有其它的方法：c++
-
console.log("打印字符串");//在控制檯打印自定義字符串web -
console.error("我是個錯誤");//在控制檯打印自定義錯誤信息正則表達式 -
console.info("我是個信息");//在控制檯打印自定義信息chrome -
console.warn("我是個警告");//在控制檯打印自定義警告信息數組 -
console.debug("我是個調試");//在控制檯打印自定義調試信息瀏覽器 -
cosole.clear();//清空控制檯（這個下方截圖中沒有）異步
注意上面輸出的error和throw出的error不同，前者只是輸出錯誤信息，沒法捕獲，不會冒泡，更不會停止程序運行。編輯器
格式化輸出
除此之外，console還支持自定義樣式和相似c語言的printf形式
-
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輸出
下面幾個比較簡單的，就不舉例子了，簡單說一下：
-
var ul = document.getElementsByTagName("ul"); -
console.dirxml(ul); //樹形輸出table節點，即<table>和它的innerHTML，因爲document.getElementsByTagName是動態的，因此這個獲得的結果確定是動態的
對象輸出
-
var o = { -
name:"Lily", -
age: 18 -
}; -
console.dir(obj);//顯示對象自有屬性和方法
對於多個對象的集合，你能夠這樣，輸出更清晰：
-
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);
成組輸出
-
//創建一個參數組 -
console.group("start"); //引號裏是組名，本身起 -
console.log("sub1"); -
console.log("sub1"); -
console.log("sub1"); -
console.groupEnd("end");
函數計數和跟蹤
-
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表達式下面顯示調用棧。
計時
-
console.time() //計時開始 -
fib(100); //用上述函數計算100個斐波那契數 -
console.timeEnd() //計時結束並輸出時長
斷言語句，這個c++調試裏面也常常用到。js中，當第一個表達式或參數爲true時候什麼也不發生，爲false時終止程序並報錯
-
console.assert(true, "我錯了"); -
console.assert(false, "我真的錯了");
性能分析
-
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選擇符或者類選擇符就能夠定位到元素啦
調試過程注意事項
1.避免記錄引用類型 當記錄對象或數組時，永遠記得你在記錄什麼。記錄原始類型時，使用帶斷點的watch表達式。若是是異步代碼，避免記錄引用類型。
-
var arr = [{ num: 0 }]; -
setInterval(function(){ -
console.log(arr); -
arr[0].num += 1; -
}, 1000);
這裏，第一個屬性中對象引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，num的值就已經肯定了。以後不管你對同一個引用從新打開多少次都不會變化。
2.儘量使用 source map。有時生產代碼不能使用source map，但無論怎樣，你都不該該直接對生產代碼進行調試。