卡卡網(wǎng)

調(diào)試JavaScript有什么好工具嗎？其實如果你有使用Chrome或firefox瀏覽器，那么這些瀏覽器都可以調(diào)試JavaScript，而不用另外安裝工具，既方便又有效率。本文介紹如何在Chrome瀏覽器中調(diào)試JavaScript，其他瀏覽器也具有類似的操作方法。

“Sources”面板

1. 在Chrome中打開要調(diào)試的頁面。
2. 使用F12打開開發(fā)人員工具。
3. 選擇Sources面板。

Sources面板的樣子大概這樣：

Sources面板（點擊圖片放大）

點擊切換按鈕    打開帶有文件的標(biāo)簽。

我們單擊它，然后選擇樹視圖中的hello.js，顯示其中的內(nèi)容：

選擇要調(diào)試的js文件（點擊圖片放大）

“Sources”面板包含3個部分：

1. “文件瀏覽器”窗格列出了HTML，JavaScript，CSS和其他文件，包括附加到頁面的圖像。Chrome擴展程序也可能會出現(xiàn)在這里。
2. “代碼編輯器”窗格顯示源代碼。
3. “ JavaScript調(diào)試”面板用于調(diào)試。

現(xiàn)在您可以單擊相同的切換器  再次隱藏資源列表，并給代碼留一些空間。

Console（控制臺）

如果按Esc，則會在下面打開一個控制臺。我們可以在那里鍵入命令，然后按Enter執(zhí)行。

執(zhí)行一條語句后，其結(jié)果如下所示。

例如，這里的1+2結(jié)果為3，hello("debugger")不返回任何內(nèi)容，因此結(jié)果為undefined。

Console執(zhí)行js代碼（點擊圖片放大）

Breakpoints（斷點）

我們檢查示例頁面的代碼發(fā)生了什么，在hello.js中，單擊行號4，注意，就在4數(shù)字上，而不是在代碼上。這樣你就設(shè)置了一個斷點，也請單擊行號8。

它看起來應(yīng)該像這樣（藍(lán)色是您單擊的位置）：

設(shè)置斷點執(zhí)行js代碼（點擊圖片放大）

在代碼的斷點處，調(diào)試器將自動暫停JavaScript的執(zhí)行。

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

我們可以在右側(cè)面板中找到斷點列表，當(dāng)我們在各種文件中有很多斷點時，這很有用。它使我們能夠：

1. 快速跳至代碼中的斷點處（在右側(cè)面板中單擊）。
2. 通過取消選中，禁用臨時斷點。
3. 通過右鍵單擊并選擇“刪除”來刪除斷點。
4. …等等。

條件斷點

右鍵單擊行號可以創(chuàng)建條件斷點，僅在給定表達(dá)式為真時觸發(fā)。

當(dāng)我們只需要停止某個變量值或某些函數(shù)參數(shù)時，這很方便。

Debugger command（調(diào)試器命令）

我們還可以通過使用其中的debugger命令來暫停代碼，如下所示：

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

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

  say(phrase);
}

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

Pause（暫停調(diào)試）

在我們的示例中，hello()在頁面加載期間調(diào)用，因此激活調(diào)試器（設(shè)置斷點后）的最簡單方法是重新加載頁面。因此，請按F5（Windows，Linux）或Cmd+R（Mac）。設(shè)置斷點后，執(zhí)行將在第四行暫停：

 
暫停調(diào)試 （點擊圖片放大）

請打開右側(cè)的信息性下拉列表（標(biāo)有箭頭）。它們使你可以檢查當(dāng)前的代碼狀態(tài)：

• Watch –顯示任何表達(dá)式的當(dāng)前值。
  你可以單擊加號+并輸入表達(dá)式，調(diào)試器將隨時顯示其值，并在執(zhí)行過程中自動對其進(jìn)行重新計算。
• Call Stack –顯示嵌套的調(diào)用鏈。
  當(dāng)前，調(diào)試器在hello()里內(nèi)部調(diào)同，由index.html的腳本調(diào)用（其中沒有函數(shù)，因此稱為“anonymous（匿名）”）。
  如果單擊堆棧項（例如“anonymous（匿名）”），調(diào)試器將跳轉(zhuǎn)到相應(yīng)的代碼，并且還可以檢查其所有變量。
• Scope –當(dāng)前變量。
  Local 顯示局部函數(shù)變量，你可以在源代碼的正上方看到其值突出顯示。
  Global 具有全局變量（任何功能之外）。 

Tracing the execution（追蹤執(zhí)行）

右面板頂部有相應(yīng)的按鈕 “恢復(fù)”：繼續(xù)執(zhí)行，熱鍵F8。

恢復(fù)執(zhí)行，如果沒有其他斷點，則執(zhí)行將繼續(xù)，調(diào)試器將失去控制。

單擊后，我們可以看到以下內(nèi)容：

追蹤執(zhí)行（點擊圖片放大）

執(zhí)行已恢復(fù)，到達(dá)另一個斷點say()里面并在那里暫停?？匆幌掠覀?cè)的“Call Stack(調(diào)用堆棧)，它增加了一個調(diào)用say，我們現(xiàn)在在say()里面了。

 –“步驟”：運行下一個命令，熱鍵F9。

運行下一條語句。如果我們現(xiàn)在單擊它，alert將顯示。

一次又一次地單擊此按鈕將一步一步地瀏覽所有腳本語句。

 –“跳過”：運行下一條命令，但不要進(jìn)入函數(shù)hotkey F10。

與上一個“步驟”命令相似，但是如果下一個語句是一個函數(shù)調(diào)用，則其行為會有所不同。那就是：不是像那樣的內(nèi)置alert函數(shù)，而是我們自己的函數(shù)。

“ 步驟”命令進(jìn)入其中并在其第一行暫停執(zhí)行，而“ 跳過”則無形地執(zhí)行嵌套函數(shù)調(diào)用，從而跳過了函數(shù)內(nèi)部，然后在該函數(shù)之后立即暫停執(zhí)行。

如果我們不希望看到函數(shù)調(diào)用中發(fā)生的事情，那就使用“跳過”。

 –“進(jìn)入”：熱鍵F11。

這類似于“ 步驟”，但是在異步函數(shù)調(diào)用的情況下行為不同。如果你只是開始學(xué)習(xí)JavaScript，那么你可以忽略兩者之間的區(qū)別，因為我們還沒有異步調(diào)用。

對于將來，只需注意“ 步驟”命令將忽略setTimeout稍后執(zhí)行的異步動作，例如（預(yù)定的函數(shù)調(diào)用），“進(jìn)入”進(jìn)入他們的代碼，并在必要時等待他們。

 –“退出”：繼續(xù)執(zhí)行直到當(dāng)前功能結(jié)束，熱鍵Shift+F11。

繼續(xù)執(zhí)行并將其停止在當(dāng)前函數(shù)的最后一行。當(dāng)我們不小心使用進(jìn)入嵌套調(diào)用時，這很方便，但我們對此并不感興趣，我們希望盡快將其結(jié)束。

 – 啟用/禁用所有斷點。

該按鈕不會移動執(zhí)行。只是大量的開/關(guān)斷點。

 – 啟用/禁用發(fā)生錯誤時的自動暫停。

啟用后，當(dāng)開發(fā)人員工具打開時，腳本錯誤將自動暫停執(zhí)行。然后，我們可以分析變量以查看出了什么問題。因此，如果我們的腳本因錯誤而死，我們可以打開調(diào)試器，啟用此選項，然后重新加載頁面以查看死于何處。

記錄

要從我們的代碼輸出一些內(nèi)容到控制臺，有console.log功能。

舉例來說，如下代碼可以輸出值0到4到控制臺：

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

trying >>

普通用戶看不到該輸出，它在控制臺中。要查看它，請打開開發(fā)人員工具的Console(控制臺)面板。

如果我們在代碼中記錄了足夠的日志，則無需調(diào)試器就可以查看記錄中發(fā)生了什么。

概括

本章提供的信息足以調(diào)試JavaScript了。

如我們所見，有三種主要方法可以暫停腳本：

1. 斷點。
2. 該debugger聲明。
3. 錯誤（如果開發(fā)工具已打開，并且按鈕是“開啟”）。

暫停后，我們可以調(diào)試–檢查變量并跟蹤代碼以查看執(zhí)行錯誤的地方。

標(biāo)簽: 調(diào)試  瀏覽器