在編寫更復(fù)雜的代碼前，讓我們先來聊聊調(diào)試吧。

調(diào)試 是指在一個腳本中找出并修復(fù)錯誤的過程。所有的現(xiàn)代瀏覽器和大多數(shù)其他環(huán)境都支持調(diào)試工具 —— 開發(fā)者工具中的一個令調(diào)試更加容易的特殊用戶界面。它也可以讓我們一步步地跟蹤代碼以查看當前實際運行情況。

在這里我們將會使用 Chrome（谷歌瀏覽器），因為它擁有足夠多的功能，其他大部分瀏覽器的功能也與之類似。

“資源（Sources）”面板

你的 Chrome 版本可能看起來有一點不同，但是它應(yīng)該還是處于很明顯的位置。

• 在 Chrome 中打開 示例頁面。
• 使用快捷鍵 ?F12?（Mac：?Cmd+Opt+I?）打開開發(fā)者工具。
• 選擇 ?Sources（資源）? 面板。

如果你是第一次這么做，那你應(yīng)該會看到下面這個樣子：

切換按鈕 會打開文件列表的選項卡。

讓我們在預(yù)覽樹中點擊和選擇 hello.js。這里應(yīng)該會如下圖所示：

資源（Sources）面板包含三個部分：

1. 文件導(dǎo)航（File Navigator） 區(qū)域列出了 HTML、JavaScript、CSS 和包括圖片在內(nèi)的其他依附于此頁面的文件。Chrome 擴展程序也會顯示在這。
2. 代碼編輯（Code Editor） 區(qū)域展示源碼。
3. JavaScript 調(diào)試（JavaScript Debugging） 區(qū)域是用于調(diào)試的，我們很快就會來探索它。

現(xiàn)在你可以再次點擊切換按鈕 隱藏資源列表來給代碼騰出一些空間。

控制臺（Console）

如果我們按下 ?Esc?，下面會出現(xiàn)一個控制臺，我們可以輸入一些命令然后按下 ?Enter ?來執(zhí)行。

語句執(zhí)行完畢之后，其執(zhí)行結(jié)果會顯示在下面。

例如，1+2 將會返回 3，而 hello("debugger") 函數(shù)調(diào)用什么也沒返回，所以結(jié)果是 undefined：

斷點（Breakpoints）

我們來看看 示例頁面 發(fā)生了什么。在 hello.js 中，點擊第 4 行。是的，就點擊數(shù)字 "4" 上，不是點擊代碼。

恭喜你！你已經(jīng)設(shè)置了一個斷點?，F(xiàn)在，請在第 8 行的數(shù)字上也點擊一下。

看起來應(yīng)該是這樣的（藍色是你應(yīng)該點擊的地方）：

斷點 是調(diào)試器會自動暫停 JavaScript 執(zhí)行的地方。

當代碼被暫停時，我們可以檢查當前的變量，在控制臺執(zhí)行命令等等。換句話說，我們可以調(diào)試它。

我們總是可以在右側(cè)的面板中找到斷點的列表。當我們在數(shù)個文件中有許多斷點時，這是非常有用的。它允許我們：

• 快速跳轉(zhuǎn)至代碼中的斷點（通過點擊右側(cè)面板中的對應(yīng)的斷點）。
• 通過取消選中斷點來臨時禁用對應(yīng)的斷點。
• 通過右鍵單擊并選擇移除來刪除一個斷點。
• ……等等。

條件斷點

在行號上 右鍵單擊 允許你創(chuàng)建一個 條件 斷點。只有當給定的表達式（你創(chuàng)建條件斷點時提供的表達式）為真時才會被觸發(fā)。

當我們需要在特定的變量值或參數(shù)的情況下暫停程序執(zhí)行時，這種調(diào)試方法就很有用了。

“debugger” 命令

我們也可以使用 debugger 命令來暫停代碼，像這樣：

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- 調(diào)試器會在這停止

  say(phrase);
}

這樣的命令只有在開發(fā)者工具打開時才有效，否則瀏覽器會忽略它。

暫停并查看

在我們的例子中，hello() 函數(shù)在頁面加載期間被調(diào)用，因此激活調(diào)試器的最簡單的方法（在我們已經(jīng)設(shè)置了斷點后）就是 —— 重新加載頁面。因此讓我們按下 ?F5?（Windows，Linux）或 ?Cmd+R?（Mac）吧。

設(shè)置斷點之后，程序會在第 4 行暫停執(zhí)行：

請打開右側(cè)的信息下拉列表（箭頭指示出的地方）。這里允許你查看當前的代碼狀態(tài)：

1. 察看（Watch） —— 顯示任意表達式的當前值。

你可以點擊加號 + 然后輸入一個表達式。調(diào)試器將顯示它的值，并在執(zhí)行過程中自動重新計算該表達式。


2. 調(diào)用棧（Call Stack） —— 顯示嵌套的調(diào)用鏈。

此時，調(diào)試器正在 hello() 的調(diào)用鏈中，被 index.html 中的一個腳本調(diào)用（這里沒有函數(shù)，因此顯示 “anonymous”）


如果你點擊了一個堆棧項，調(diào)試器將跳到對應(yīng)的代碼處，并且還可以查看其所有變量。


3. 作用域（Scope） —— 顯示當前的變量。

Local 顯示當前函數(shù)中的變量，你還可以在源代碼中看到它們的值高亮顯示了出來。


Global 顯示全局變量（不在任何函數(shù)中）。


這里還有一個 this 關(guān)鍵字，目前我們還沒有學(xué)到它，不過我們很快就會學(xué)習(xí)它了。

跟蹤執(zhí)行

現(xiàn)在是 跟蹤 腳本的時候了。

在右側(cè)面板的頂部是一些關(guān)于跟蹤腳本的按鈕。讓我們來使用它們吧。

—— “恢復(fù)（Resume）”：繼續(xù)執(zhí)行，快捷鍵 ?F8?。

繼續(xù)執(zhí)行。如果沒有其他的斷點，那么程序就會繼續(xù)執(zhí)行，并且調(diào)試器不會再控制程序。

我們點擊它一下之后，我們會看到這樣的情況：

執(zhí)行恢復(fù)了，執(zhí)行到 say() 函數(shù)中的另外一個斷點后暫停在了那里?？匆幌掠疫叺?“Call stack”。它已經(jīng)增加了一個調(diào)用信息。我們現(xiàn)在在 say() 里面。

—— “下一步（Step）”：運行下一條指令，快捷鍵 ?F9?。

運行下一條語句。如果我們現(xiàn)在點擊它，alert 會被顯示出來。

一次接一次地點擊此按鈕，整個腳本的所有語句會被逐個執(zhí)行。

—— “跨步（Step over）”：運行下一條指令，但 不會進入到一個函數(shù)中，快捷鍵 ?F10?。

跟上一條命令“下一步（Step）”類似，但如果下一條語句是函數(shù)調(diào)用則表現(xiàn)不同。這里的函數(shù)指的是：不是內(nèi)建的如 alert 函數(shù)等，而是我們自己寫的函數(shù)。

如果我們對比一下，“下一步（Step）”命令會進入嵌套函數(shù)調(diào)用并在其第一行暫停執(zhí)行，而“跨步（Step over）”對我們不可見地執(zhí)行嵌套函數(shù)調(diào)用，跳過了函數(shù)內(nèi)部。

執(zhí)行會在該函數(shù)調(diào)用后立即暫停。

如果我們對該函數(shù)的內(nèi)部執(zhí)行不感興趣，這命令會很有用。

—— “步入（Step into）”，快捷鍵 ?F11?。

和“下一步（Step）”類似，但在異步函數(shù)調(diào)用情況下表現(xiàn)不同。如果你剛剛才開始學(xué) JavaScript，那么你可以先忽略此差異，因為我們還沒有用到異步調(diào)用。

至于之后，只需要記住“下一步（Step）”命令會忽略異步行為，例如 ?setTimeout?（計劃的函數(shù)調(diào)用），它會過一段時間再執(zhí)行。而“步入（Step into）”會進入到代碼中并等待（如果需要）。詳見 DevTools 手冊。

—— “步出（Step out）”：繼續(xù)執(zhí)行到當前函數(shù)的末尾，快捷鍵 ?Shift+F11?。

繼續(xù)執(zhí)行代碼并停止在當前函數(shù)的最后一行。當我們使用 偶然地進入到一個嵌套調(diào)用，但是我們又對這個函數(shù)不感興趣時，我們想要盡可能的繼續(xù)執(zhí)行到最后的時候是非常方便的。

—— 啟用/禁用所有的斷點。

這個按鈕不會影響程序的執(zhí)行。只是一個批量操作斷點的開/關(guān)。

—— 啟用/禁用出現(xiàn)錯誤時自動暫停腳本執(zhí)行。

當啟動此功能，如果開發(fā)者工具是打開著的時候，任何腳本執(zhí)行錯誤都會導(dǎo)致該腳本執(zhí)行自動暫停。然后我們可以在調(diào)試器中分析變量來看一下什么出錯了。因此如果我們的腳本因為錯誤掛掉的時候，我們可以打開調(diào)試器，啟用這個選項然后重載頁面，查看一下哪里導(dǎo)致它掛掉了和當時的上下文是什么。

Continue to here

在代碼中的某一行上右鍵，在顯示的關(guān)聯(lián)菜單（context menu）中點擊一個非常有用的名為 “Continue to here” 的選項。

當你想要向前移動很多步到某一行為止，但是又懶得設(shè)置一個斷點時非常的方便。

日志記錄

想要輸出一些東西到控制臺上？console.log 函數(shù)可以滿足你。

例如：將從 0 到 4 的值輸出到控制臺上：

// 打開控制臺來查看
for (let i = 0; i < 5; i++) {
  console.log("value", i);
}

普通用戶看不到這個輸出，它是在控制臺里面的。要想看到它 —— 要么打開開發(fā)者工具中的 Console（控制臺）選項卡，要么在一個其他的選項卡中按下 ?Esc?：這會在下方打開一個控制臺。

如果我們在代碼中有足夠的日志記錄，那么我們可以從記錄中看到剛剛發(fā)生了什么，而不需要借助調(diào)試器。

總結(jié)

我們可以看到，這里有 3 種方式來暫停一個腳本：

1. 斷點。
2. ?debugger ?語句。
3. error（如果開發(fā)者工具是打開狀態(tài)，并且按鈕是開啟的狀態(tài)）。

當腳本執(zhí)行暫停時，我們就可以進行調(diào)試：檢查變量，跟蹤代碼來查看執(zhí)行出錯的位置。

開發(fā)人員工具中的選項比本文介紹的多得多。完整的手冊請點擊這個鏈接查看：https://developers.google.com/web/tools/chrome-devtools。

本章節(jié)的內(nèi)容足夠讓你上手代碼調(diào)試了，但是之后，尤其是你做了大量關(guān)于瀏覽器的東西后，推薦你查看上面那個鏈接中講的開發(fā)者工具更高級的功能。

對了，你也可以點擊開發(fā)者工具中的其他地方來看一下會顯示什么。這可能是你學(xué)習(xí)開發(fā)者工具最快的方式了。不要忘了還有右鍵單擊和關(guān)聯(lián)菜單喲。