[[357752]]

 一、在 Chrome 中調(diào)試

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

在這里我們將會使用 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ù)什么也不返回，因此結(jié)果是 undefined：

四、斷點(Breakpoints)

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

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

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

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

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

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

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

條件斷點 Conditional breakpoints

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

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

五、Debugger 命令

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

function hello(name) { 
  let phrase = `Hello, ${name}!`; 
 
  debugger;  // <-- 調(diào)試器會在這停止 
 
  say(phrase); 
} 

 當(dāng)我們在一個代碼編輯器中并且不想切換到瀏覽器在開發(fā)者工具中查找腳本來設(shè)置斷點時，這非常方便。

六、暫停并查看

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

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

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

1. 察看（Watch）(—— 顯示任意表達(dá)式的當(dāng)前值。你可以點擊加號 + 然后輸入一個表達(dá)式。調(diào)試器將隨時顯示它的值，并在執(zhí)行過程中自動重新計算該表達(dá)式。
2. 調(diào)用棧(Call Stack) —— 顯示嵌套的調(diào)用鏈。此時，調(diào)試器正在 hello() 的調(diào)用鏈中，被 index.html 中的一個腳本調(diào)用(這里沒有函數(shù)，因此顯示 “anonymous”)如果你點擊了一個堆棧項，調(diào)試器將跳到對應(yīng)的代碼處，并且還可以查看其所有變量。
3. 作用域(Scope) —— 顯示當(dāng)前的變量。Local 顯示當(dāng)前函數(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)”：運行下一條指令，但 不會進(jìn)入到一個函數(shù)中，快捷鍵 F10。

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

“下一步(Step)”命令進(jìn)入函數(shù)內(nèi)部并在第一行暫停執(zhí)行，而“跨步(Step over)”在無形中執(zhí)行函數(shù)調(diào)用，跳過了函數(shù)的內(nèi)部。

執(zhí)行會在該函數(shù)執(zhí)行后立即暫停。

如果我們對該函數(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)”會進(jìn)入到代碼中并等待(如果需要)。詳見 DevTools 手冊。

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

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

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

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

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

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

Continue to here

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

當(dāng)你想要向前移動很多步到某一行為止，但是又懶得設(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. 一個錯誤(如果開發(fā)者工具是打開狀態(tài)，并且按鈕 是開啟的狀態(tài))。

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

開發(fā)人員工具中的選項比本文介紹的多得多。完整的手冊，請搜索chrome-devtools。

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

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

 【編輯推薦】