本教學課程會說明在開發人員工具中偵錯 JavaScript 問題的基本工作流程。請繼續閱讀,或觀看本教學課程的影片版本。
重現錯誤
尋找一系列持續重現錯誤的動作,都是偵錯的第一步。
- 在新分頁中開啟示範,
- 在「數字 1」方塊中輸入
5
。 - 在「數字 2」方塊中輸入
1
。 - 按一下「新增數字 1 和數字 2」。按鈕下方的標籤顯示「
5 + 1 = 51
」。結果應為6
。也就是要修正的錯誤。
在本例中,5 + 1 的結果為 51。應為 6。
熟悉「來源」面板 UI
開發人員工具為不同工作提供許多不同的工具,例如變更 CSS、剖析頁面載入效能,以及監控網路要求。「Sources」面板是您為 JavaScript 偵錯的地方。
開啟開發人員工具並前往「Sources」面板。
「來源」面板有三個部分:
- 帶有檔案樹狀結構的「Page」分頁。這裡會列出該網頁要求的每一個檔案。
- 程式碼編輯器區段。在「Page」分頁中選取檔案後,該檔案的內容會顯示在這裡。
「Debugger」部分。使用各種工具檢查網頁 JavaScript。
如果開發人員工具視窗是寬幅,根據預設,「Debugger」位於「程式碼編輯器」的右側。在這個情況下,「Scope」和「Watch」分頁會彙整「Breakpoints」、「Call stack」等可收合的部分。
透過中斷點暫停程式碼
這類問題的常見偵錯方法,就是在程式碼中插入許多 console.log()
陳述式,以便在指令碼執行時檢查值。例如:
function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}
console.log()
方法可能會完成工作,但中斷點能更快完成。中斷點可讓您在程式碼執行期間暫停程式碼,並在該時間點檢查所有值。與 console.log()
方法相比,中斷點具有以下優點:
- 使用
console.log()
時,您必須手動開啟原始碼、尋找相關程式碼、插入console.log()
陳述式,然後重新載入頁面,才能在主控台中查看訊息。透過中斷點,您可以暫停相關程式碼,完全不必瞭解程式碼的結構。 - 在
console.log()
陳述式中,您必須明確指定每個要檢查的值。透過中斷點,開發人員工具會顯示當下所有變數的值。有時候,有些變數甚至影響了程式碼,但您甚至沒注意到這些變數。
簡單來說,中斷點會比 console.log()
方法更快找出並修正錯誤。
先退一步並思考應用程式的運作方式,就可以合理推測出錯誤總和 (5 + 1 = 51
) 是透過與「Add Number 1 and Number 2」按鈕相關聯的 click
事件監聽器計算。因此,建議您在 click
事件監聽器執行前後暫停程式碼。事件監聽器中斷點可讓您進行以下操作:
- 在「Debugger」部分中,按一下「Event Listener Breakpoints」展開該部分。開發人員工具會顯示展開事件類別清單,例如「Animation」和「Clipboard」。
- 按一下「滑鼠」事件類別旁邊的 arrow_right「展開」。 開發人員工具會顯示滑鼠事件清單,例如「click」和「mousedown」。每個活動旁都有一個核取方塊。
勾選「點選」核取方塊。開發人員工具現已設定為在執行任何
click
事件監聽器時自動暫停。返回示範模式,再次點選「Add Number 1 and Number 2」,開發人員工具會暫停示範,並醒目顯示「Sources」面板中的一行程式碼。該行程式碼應暫停開發人員工具:
function onClick() {
如果您暫停了另一行程式碼,請按下繼續「繼續執行指令碼執行」,直到您暫停在正確的行上。
事件監聽器中斷點只是開發人員工具提供的許多中斷點類型之一。建議您探索所有不同的類型,因為每種類型最終都能協助您盡快針對不同的情境進行偵錯。如要瞭解各種類型的使用時機和方式,請參閱「使用中斷點暫停程式碼」。
逐步檢查程式碼
發生錯誤的其中一個常見原因是指令碼以錯誤的順序執行。逐步執行程式碼可讓您逐步瞭解程式碼的執行情況,一次逐行執行,並以與您預期的不同順序找出確切的執行位置。立即試用:
在開發人員工具的「來源」面板中,按一下 step_into「進入下一個函式呼叫」,逐步執行
onClick()
函式 (一次一行)。開發人員工具會醒目顯示下列這行程式碼:if (inputsAreEmpty()) {
按一下「Step_over」step_over「Step over next 函式呼叫」。
開發人員工具會在不登入的情況下執行
inputsAreEmpty()
。請注意,開發人員工具會如何略過幾行程式碼。這是因為inputsAreEmpty()
評估為 false,所以if
陳述式的程式碼區塊未執行。
這是逐步執行程式碼的基本概念。查看 get-started.js
中的程式碼,可以看到錯誤可能位於 updateLabel()
函式的某個位置。與其逐行執行程式碼,您可以使用另一種類型的中斷點,將程式碼暫停至更靠近錯誤可能位置的位置。
設定程式碼行中斷點
程式碼行中斷點是最常見的中斷點類型。如要暫停某一行程式碼,請使用程式碼中斷點:
查看
updateLabel()
中的最後一行:label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
程式碼左側會顯示該行程式碼的行數,也就是 32。按一下「32」。開發人員工具會在 32 頂端加上藍色圖示。這表示這一行上有程式碼行中斷點。開發人員工具現在一律會在執行這行程式碼前暫停。
按一下「繼續執行指令碼」。指令碼會持續執行,直到達到第 32 行為止。在第 29、30 和 31 行中,開發人員工具會在宣告內容旁以內嵌方式顯示
addend1
、addend2
和sum
的值。
在這個範例中,開發人員工具在第 32 行的程式碼行中斷點暫停。
檢查變數值
addend1
、addend2
和 sum
的值看起來很可疑。前後加上引號
代表這些是字串這麼做可以解釋錯誤原因。接著來收集更多資訊。開發人員工具提供許多可用來檢查變數值的工具,
方法 1:檢查範圍
當您暫停某一行的程式碼時,「Scope」(範圍) 分頁會顯示目前執行時所定義的本機和全域變數,以及每個變數的值。視情況顯示關閉變數當您未暫停某行程式碼時,「範圍」分頁會呈現空白。
按兩下變數值即可進行編輯。
方法 2:觀察運算式
「Watch」分頁可讓您監控一段時間內的變數值。手錶不只是變數,您可以在「Watch」分頁中儲存任何有效的 JavaScript 運算式。
立即試用:
- 按一下「觀看」分頁標籤。
- 按一下「新增 新增觀察運算式」。
- 輸入
typeof sum
。 - 按下 Enter 鍵。開發人員工具會顯示
typeof sum: "string"
。冒號右側的值是運算式的結果。
此螢幕截圖顯示建立 typeof sum
監控運算式後的「Watch」分頁 (右下方)。
如上所述,系統會將 sum
評估為字串,但現在應為數字。現在您已確認這是錯誤的原因。
方法 3:控制台
除了查看 console.log()
訊息之外,您也可以使用主控台評估任意 JavaScript 陳述式。在偵錯方面,您可以使用主控台測試可能的錯誤修正方法。立即試用:
- 如果沒有開啟主控台導覽匣,請按下 Escape 鍵開啟導覽匣。即可在開發人員工具視窗底部開啟。
- 在控制台中輸入
parseInt(addend1) + parseInt(addend2)
。這個陳述式之所以有效,是因為您在addend1
和addend2
位於範圍內的程式碼行中暫停。 - 按下 Enter 鍵。開發人員工具會評估陳述式並輸出
6
,也就是您預期示範產生的結果。
這張螢幕截圖顯示評估 parseInt(addend1) + parseInt(addend2)
後的「Console」導覽匣。
套用修正建議
您已找到該錯誤的修正程式。剩下的工作就是嘗試修正程式碼,方法是編輯程式碼,然後重新執行示範。您不需要退出開發人員工具即可套用修正。您可以直接在開發人員工具 UI 中編輯 JavaScript 程式碼。立即試用:
- 按一下「繼續執行指令碼」。
- 在程式碼編輯器中,將第 31 行
var sum = addend1 + addend2
替換為var sum = parseInt(addend1) + parseInt(addend2)
。 - 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux) 即可儲存變更。
- 按一下「label_off」停用中斷點。 指示燈會變為藍色,表示目前正在放送。設定完畢後,開發人員工具會忽略您設定的所有中斷點。
- 試用設定不同值的試用版。示範現已正確計算。
後續步驟
本教學課程只說明兩種設定中斷點的方法。開發人員工具還提供許多其他方法,包括:
- 只有在您提供的條件為 true 時,才會觸發條件中斷點。
- 偵測到或未擷取到例外狀況的中斷點。
- 當要求的網址與您提供的子字串相符時,就會觸發 XHR 中斷點。
如要瞭解各種類型的使用時機和方式,請參閱「使用中斷點暫停程式碼」。
本教學課程沒有說明幾個程式碼步驟控制項。詳情請參閱「逐行程式碼」。