前言 :
通常，我們在編寫一個新的JavaScript代碼過程中經(jīng)常會發(fā)生錯誤插勤，可能是語法錯誤，可能是邏輯錯誤革骨，如果沒有一個調試工具幫助我們的話，相信你怕是頭都要炸了析恋。
由于JS是執(zhí)行在瀏覽器的良哲，所以我們可以直接在瀏覽器中進行調試。在所有的瀏覽器中助隧，建議大家使用谷歌瀏覽器進行調試筑凫，體驗非常的棒。當然所有的都一樣并村，需要我們打開控制臺輸出窗口巍实，即 Console面板。
Console 調試
我主要總結了一些在 Console 面板里的調試技巧, 記錄自己學習過程中用到的方法哩牍。
- 設置斷點調試
首先打開開發(fā)工具棚潦，選擇 Elements，選擇頁面中的某個標簽膝昆，右鍵 → Break on → Attributes modifications丸边。即可為該元素添加斷點叠必，當它的屬性發(fā)生改變時，會自動定位到頁面代碼中的對應行妹窖。
右鍵 → Break on可以設置三種不同情況的斷點：
- subtree modifications 子節(jié)點修改
- attribute modifications 自身屬性修改
- node removal 自身節(jié)點被刪除
該方法與在程序代碼中直接使用 debugger關鍵字的效果是一樣的纬朝。
- 輸出信息
調試過程中console.log()是再常用不過的了，我們用它來輸出信息骄呼。
直接先輸出查看一下console有哪些方法：
一般輸出信息我們常用的就幾個：
console.log 用于輸出普通信息
console.info 用于輸出提示性信息
console.warn 用于輸出警示信息
console.error 用于輸出錯誤信息
console.debug 用于輸出調試信息
- log 的更多輸出
.log() 是最常用的共苛，它的輸出結果的形式也有很多種
%s 字符串
%d 整數(shù)
%f 浮點值
%o Object
%c 設定輸出的樣式，在之后的文字將按照第二個參數(shù)里的設置顯示
- 打印輸出DOM元素
當我們獲取到DOM元素之后蜓萄，也可以把他們打印出來俄讹，有兩種輸出的形式，log 輸出這個DOM元素的HTML標簽绕德，dir 輸出這個DOM元素的屬性列表患膛。
- 換種更清晰的形式輸出
除了以上的輸出，我們還可以以表格的形式或分組將信息輸出出來：
以表格形式輸出耻蛇，還可以加上參數(shù)輸出具體的某一列
另外一種就是我們還可以分組展示數(shù)據(jù)信息
- assert 方法進行測試
該方法接收一個表達式作為參數(shù)踪蹬，如果斷言為false，則將一個錯誤消息寫入控制臺臣咖；如果斷言是true跃捣，沒有任何反應。
console.assert(1 ===1, "（斷言為真）"); // 無結果輸出
console.assert(1 ===0, "斷言為假"); // 輸出錯誤信息夺蛇，內容為 斷言為假
- count 計數(shù)
對輸出的對象進行計數(shù)疚漆。但需要注意的是這里的計數(shù)對象僅限于由 count() 輸出的內容，并非所有 console 中的輸出刁赦。
- time 計時
用 time("name") 和 timeEnd("name") 分別控制開始點和結束點娶聘，它們兩的參數(shù)表示當前計時的名稱，可以自定義但需要保持相同甚脉。所以如果想看異步獲取數(shù)據(jù)花了多場時間丸升，可以這樣寫：
- 清空 console 面板輸出內容
好了，說了那么多牺氨，是時候把之前輸出的內容清一下了狡耻，這個時候就用到了 console.clear() 。
console.clear();
這些調試技巧對我們的開發(fā)有很大幫助猴凹，就先總結這些夷狰，開發(fā)過程中都用的到。
該文章同步在 :
CSDN Blog： http://blog.csdn.net/levinhax/article/details/76862440
GitHub Page : https://levinhax.github.io/
