本教學課程將說明在開發人員工具中針對任何 JavaScript 問題進行偵錯的基本工作流程。已讀 ,或觀看本教學課程的影片版本
重現錯誤
找出一連串可持續重現錯誤的動作,一定是第一步 以及偵錯
- 在新分頁中開啟示範影片。
- 在「數字 1」方塊中輸入
5
。 - 在「數字 2」方塊中輸入
1
。 - 按一下「新增數字 1」和「編號 2」。按鈕下方的標籤顯示
5 + 1 = 51
。成果 應為6
。這是您要修正的錯誤。
在此範例中,5 + 1 的結果是 51。值應為 6。
熟悉「來源」面板 UI
開發人員工具提供多種不同工作適用的工具,例如變更 CSS、剖析頁面 工作負載負荷效能,以及監控網路要求。「Sources」面板是您偵錯的地方 JavaScript。
開啟開發人員工具並前往「Sources」面板。
「來源」面板分為三個部分:
- 含有檔案樹狀結構的「頁面」分頁。這裡會列出網頁要求的所有檔案。
- 「Code Editor」區段。在「頁面」分頁中選取檔案後,系統會將 檔案會顯示在這裡
「Debugger」區段。各種可用來檢查網頁 JavaScript 的工具。
如果開發人員工具視窗寬度預設為寬,「Debugger」預設為「Code Editor」。在這種情況下,「範圍」和「手錶」分頁會將「中斷點」、「呼叫堆疊」等分頁彙整為可收合的部分。
使用中斷點暫停程式碼
對這類問題進行偵錯的常見方法是插入大量 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()
方法或許可以完成工作,但中斷點可更快完成工作。A 罩杯
中斷點可讓您在程式碼執行作業期間暫停程式碼,並檢查該程式碼的所有值
時刻。與 console.log()
方法相比,中斷點有一些優點:
- 使用
console.log()
時,您需要手動開啟原始碼、尋找相關程式碼,然後插入console.log()
陳述式,然後重新載入頁面,這樣就能查看 控制台。透過中斷點,即使不知道程式碼是如何 結構 - 您需要在
console.log()
陳述式中明確指定要每個需要的值 透過中斷點,開發人員工具會顯示當下所有變數的值。 有時候,您甚至不知道有變數會影響程式碼。
簡單來說,中斷點可協助您更快找出及修正錯誤,比 console.log()
方法更快。
退一步
回想應用程式的運作方式後
不正確總和 (5 + 1 = 51
) 會在與click
新增數字 1 和數字 2 按鈕。因此,您可能會想要在這段時間內暫停程式碼
click
事件監聽器會執行的函式。事件監聽器中斷點可讓您確切執行以下操作:
- 在「偵錯工具」部分,按一下「事件監聽器中斷點」,即可展開 專區。開發人員工具會顯示可展開事件類別清單,例如 Animation 和 剪貼簿。
- 按一下「滑鼠」事件類別旁邊的 arrow_right 展開。 開發人員工具會顯示滑鼠事件的清單,例如 click 和 mousedown。每項事件旁邊都會顯示核取方塊。
勾選「點擊」核取方塊。開發人員工具現已設為在任何
click
時自動暫停 會執行這個事件。返回示範畫面,再次點選「新增數字 1 和數字 2」。開發人員工具會暫停示範 醒目顯示「Sources」(來源) 面板中的一行程式碼。開發人員工具必須在以下這一行暫停: 程式碼:
function onClick() {
如果程式碼已暫停在另一行程式碼上,請按下 繼續執行「Resume Script Execution」,直到在正確的行暫停為止。
事件監聽器中斷點只是開發人員工具中可用的眾多中斷點之一。是 建議您探索各種類型,因為每種類型最後都能協助您針對 盡快模擬預測結果如要瞭解何時可暫停程式碼,請參閱「使用中斷點暫停程式碼」一文 每種類型
逐步執行程式碼
導致錯誤的常見原因之一,就是指令碼執行順序有誤。逐步執行程式碼 能讓您逐步瞭解程式碼的執行狀況 (一次一行文字),並找出確切執行位置 執行順序與預期不同立即試用:
在開發人員工具的「Sources」面板中,點選「step_into」step_into「Step to next function call」,逐步執行
onClick()
函式 (一次一行)。開發人員工具會醒目顯示下列程式碼:if (inputsAreEmpty()) {
按一下「step_over」step_over。
開發人員工具會執行
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:檢查範圍
在程式碼行暫停時,「範圍」分頁會顯示本機和全域變數 ,以及每個變數的值。也會顯示閉包變數 如未在某一行程式碼上暫停,「範圍」分頁會是空白的。
按兩下變數值即可加以編輯。
方法 2:監控運算式
「手錶」分頁可讓您監控變數值的變化。手錶不限於變數。您可以儲存任何有效的 JavaScript 運算式位於「Watch」分頁中。
立即試用:
- 按一下「觀看」分頁標籤。
- 按一下「新增觀察運算式」。
- 請輸入
typeof sum
。 - 按下 Enter 鍵。開發人員工具會顯示
typeof sum: "string"
。冒號右側的值是 運算式的結果
建立 typeof sum
智慧手錶後,下方螢幕截圖顯示「Watch」分頁 (右下方)
運算式。
與先前一樣,系統會將 sum
評估為字串,但它應該是數字。您已確認
這是錯誤原因
方法 3:主控台
除了查看 console.log()
訊息之外,您也可以透過控制台評估任意情況
JavaScript 陳述式。就偵錯而言,您可以透過控制台測試可能的修正方式
以便偵測昆蟲立即試用:
- 如果您未開啟主控台導覽匣,請按下 Esc 鍵開啟。該目錄會在 「開發人員工具」視窗。
- 在控制台中輸入
parseInt(addend1) + parseInt(addend2)
。這個陳述式有效,是因為您 如果addend1
和addend2
位於該行程式碼的範圍,該行程式碼就會暫停。 - 按下 Enter 鍵。開發人員工具會評估陳述式並輸出
6
,這就是您預期的結果 示範步驟
這張螢幕截圖顯示評估 parseInt(addend1) + parseInt(addend2)
後的「Console」導覽匣。
套用修正
您已找到此問題的修正程式,最後,請編輯程式碼並嘗試修正相關問題, 請重新執行示範您不需要離開開發人員工具,即可套用修正。您可以編輯 JavaScript 程式碼 直接在開發人員工具 UI 中存取立即試用:
- 按一下「繼續」「繼續執行指令碼」。
- 在程式碼編輯器中,將第 31 行
var sum = addend1 + addend2
替換成var sum = parseInt(addend1) + parseInt(addend2)
。 - 按下 Command + S 鍵 (Mac) 或 Control + S 鍵 (Windows、Linux) 儲存變更。
- 按一下 label_off「停用中斷點」。 而是變成藍色,表示目前有效。設定這項設定時,開發人員工具會忽略 設定新的中斷點
- 以不同的價值進行示範。示範現已正確計算。
後續步驟
本教學課程僅說明設定中斷點的兩種方式。開發人員工具還提供許多其他方式 包括:
- 只有在您提供的條件為 true 時,才會觸發條件中斷點。
- 遭擷取或未擷取的例外狀況中斷點。
- 要求的網址與您提供的子字串相符時觸發的 XHR 中斷點。
如要瞭解每種類型的使用時機和方式,請參閱「使用中斷點暫停程式碼」。
本教學課程中並未說明幾個程式碼步行控制項。請參閱這篇文章 程式碼。