通常，我們在編寫一個新的JavaScript代碼過程中經(jīng)常會發(fā)生錯誤，可能是語法錯誤，可能是邏輯錯誤，如果沒有一個調(diào)試工具幫助我們的話，相信你怕是頭都要炸了。

由于JS是執(zhí)行在瀏覽器的，所以我們可以直接在瀏覽器中進(jìn)行調(diào)試。在所有的瀏覽器中，建議大家使用谷歌瀏覽器進(jìn)行調(diào)試，體驗(yàn)非常的棒。當(dāng)然所有的都一樣，需要我們打開控制臺輸出窗口，即 Console面板。

Console 調(diào)試

我主要總結(jié)了一些在 Console 面板里的調(diào)試技巧, 記錄自己學(xué)習(xí)過程中用到的方法。

• 設(shè)置斷點(diǎn)調(diào)試

首先打開開發(fā)工具，選擇 Elements，選擇頁面中的某個標(biāo)簽，右鍵 → Break on → Attributes modifications。即可為該元素添加斷點(diǎn)，當(dāng)它的屬性發(fā)生改變時，會自動定位到頁面代碼中的對應(yīng)行。

右鍵 → Break on可以設(shè)置三種不同情況的斷點(diǎn)：
1. subtree modifications 子節(jié)點(diǎn)修改
2. attribute modifications 自身屬性修改
3. node removal 自身節(jié)點(diǎn)被刪除

該方法與在程序代碼中直接使用 debugger關(guān)鍵字的效果是一樣的。

• 輸出信息

調(diào)試過程中console.log()是再常用不過的了，我們用它來輸出信息。
直接先輸出查看一下console有哪些方法：

一般輸出信息我們常用的就幾個：

1. console.log 用于輸出普通信息

2. console.info 用于輸出提示性信息

3. console.warn 用于輸出警示信息

4. console.error 用于輸出錯誤信息

5. console.debug 用于輸出調(diào)試信息

• log 的更多輸出

.log() 是最常用的，它的輸出結(jié)果的形式也有很多種

• %s 字符串

• %d 整數(shù)

• %f 浮點(diǎn)值

• %o Object

• %c 設(shè)定輸出的樣式，在之后的文字將按照第二個參數(shù)里的設(shè)置顯示

• 打印輸出DOM元素

當(dāng)我們獲取到DOM元素之后，也可以把他們打印出來，有兩種輸出的形式，log 輸出這個DOM元素的HTML標(biāo)簽，dir 輸出這個DOM元素的屬性列表。

• 換種更清晰的形式輸出

除了以上的輸出，我們還可以以表格的形式或分組將信息輸出出來：

以表格形式輸出，還可以加上參數(shù)輸出具體的某一列

另外一種就是我們還可以分組展示數(shù)據(jù)信息

• assert 方法進(jìn)行測試

該方法接收一個表達(dá)式作為參數(shù)，如果斷言為false，則將一個錯誤消息寫入控制臺；如果斷言是true，沒有任何反應(yīng)。

console.assert(1 ===1, "（斷言為真）");   // 無結(jié)果輸出
console.assert(1 ===0, "斷言為假");     // 輸出錯誤信息，內(nèi)容為 斷言為假

• count 計數(shù)

對輸出的對象進(jìn)行計數(shù)。但需要注意的是這里的計數(shù)對象僅限于由 count() 輸出的內(nèi)容，并非所有 console 中的輸出。

• time 計時

用 time(“name”) 和 timeEnd(“name”) 分別控制開始點(diǎn)和結(jié)束點(diǎn)，它們兩的參數(shù)表示當(dāng)前計時的名稱，可以自定義但需要保持相同。所以如果想看異步獲取數(shù)據(jù)花了多場時間，可以這樣寫：

• 清空 console 面板輸出內(nèi)容

好了，說了那么多，是時候把之前輸出的內(nèi)容清一下了，這個時候就用到了 console.clear() 。

console.clear();

這些調(diào)試技巧對我們的開發(fā)有很大幫助，就先總結(jié)這些，開發(fā)過程中都用的到。