上一節：JavaScript除錯：使用Google Chrome Debugger【簡潔；高效；易學】

一共兩節（基本上除錯JavaScript夠用了）

使用斷點暫停JavaScript程式碼。本指南介紹了DevTools中可用的每種型別的斷點，以及何時使用以及如何設定每種型別。有關除錯過程的動手教程，請參閱Chrome DevTools中的除錯JavaScript入門。

何時使用每個斷點型別的概述

最著名的斷點型別是程式碼行。但是程式碼行斷點的設定效率很低，特別是如果您不確切地知道要查詢的位置，或者您正在使用大型程式碼庫。通過了解如何以及何時使用其他型別的斷點，您可以在除錯時節省時間。

程式碼行斷點

當您知道需要調查的確切程式碼區域時，請使用程式碼行斷點。在執行這行程式碼之前，DevTools 總是暫停。

在DevTools中設定程式碼行斷點：

1. 單擊“ Sources ”選項卡。
2. 開啟包含要中斷的程式碼行的檔案。
3. 去程式碼行。
4. 程式碼行的左側是行號列。點選它。行號列頂部會顯示一個藍色圖示。

圖1

程式碼中的程式碼行斷點

debugger從您的程式碼呼叫以暫停該行。這相當於程式碼行斷點，除了斷點是在程式碼中設定的，而不是在DevTools UI中。

console.log('a');
console.log('b');
debugger;
console.log('c');

條件行程式碼斷點

當您知道需要調查的確切程式碼區域時，請使用條件行程式碼斷點，但只有在其他條件為真時才要暫停。

設定條件行程式碼斷點：

1. 單擊“ Sources ”選項卡。
2. 開啟包含要中斷的程式碼行的檔案。
3. 去程式碼行。
4. 程式碼行的左側是行號列。右鍵單擊它。
5. 選擇Add conditional breakpoint。程式碼行下方會顯示一個對話方塊。
6. 在對話方塊中輸入您的條件。
7. 按Enter以啟用斷點。行號列頂部會顯示橙色圖示。

圖2：第32行設定的條件行程式碼斷點

管理程式碼行斷點

使用“ 斷點”窗格可以從單個位置禁用或刪除程式碼行斷點。

圖3：Breakpoints窗格顯示兩個程式碼行斷點：一個在第15行get-started.js，另一個在第32行

• 選中條目旁邊的複選框以禁用該斷點。
• 右鍵單擊某個條目以刪除該斷點。
• 右鍵單擊“ Breakpoints”窗格中的任意位置以取消啟用所有斷點，禁用所有斷點或刪除所有斷點。禁用所有斷點等同於取消選中每個斷點。取消啟用所有斷點會指示DevTools忽略所有程式碼行斷點，但也要保持其啟用狀態，以便它們在重新啟用它們時處於與之前相同的狀態。

圖4：“ 斷點”窗格中的已停用斷點已禁用且透明

DOM改變斷點

如果要暫停更改DOM節點或其子節點的程式碼，請使用DOM更改斷點。

設定DOM更改斷點：

1. 單擊“ Elements”選項卡。
2. 轉到要設定斷點的元素。
3. 右鍵單擊該元素。
4. 將滑鼠懸停在“ Break on”上，然後選擇“子樹修改Subtree modifications”，“ 屬性修改Attribute modifications ”或“ 節點刪除Node removal”。

圖5：用於建立DOM更改斷點的上下文選單

DOM的型別更改斷點

• 子樹修改。當刪除或添加當前所選節點的子節點或更改子節點的內容時觸發。未在子節點屬性更改或當前所選節點的任何更改上觸發。

• 屬性修改：在當前選定的節點上新增或刪除屬性時或屬性值更改時觸發。

• 節點刪除：刪除當前選定的節點時觸發。

XHR / Fetch斷點

如果要在XHR的請求URL包含指定字串時中斷，請使用XHR斷點。DevTools暫停XHR呼叫的程式碼行send()。

注意：此功能也適用於獲取請求。

這有用的一個示例是，當您看到頁面請求的URL不正確，並且您希望快速找到導致錯誤請求的AJAX或Fetch原始碼時。

要設定XHR斷點：

1. 單擊“ Sources”選項卡。
2. 展開“ XHR Breakpoints”窗格。
3. 單擊“ Add breakpoint”。
4. 輸入要中斷的字串。當此字串出現在XHR的請求URL中的任何位置時，DevTools會暫停。
5. 按Enter確認。

圖6：在XHR Breakpoints 為orgURL 中包含的任何請求建立XHR斷點

事件監聽器斷點

如果要暫停事件觸發後執行的事件偵聽器程式碼，請使用事件偵聽器斷點。您可以選擇特定事件，例如事件click類別，例如所有滑鼠事件。

1. 單擊“ Sources”選項卡。
2. 展開“ Event Listener Breakpoints”窗格。DevTools顯示事件類別列表，例如Animation。
3. 檢查其中一個類別，以便在觸發該類別的任何事件時暫停，或者展開類別並檢查特定事件。

圖7：為。建立事件偵聽器斷點 deviceorientation

異常斷點

如果要在丟擲捕獲或未捕獲的異常的程式碼行上暫停，請使用異常斷點。

1. 單擊“ Sources”選項卡。
2. 單擊Pause on exceptions 。啟用後會變為藍色。
3. （可選）如果除了未捕獲的異常之外還要暫停捕獲的異常，請選中“ Pause On Caught Exceptions”複選框。

圖7：暫停未捕獲的異常

功能斷點

當您想要在呼叫特定函式時暫停時，呼叫debug(functionName)，functionName您要除錯的函式在哪裡。您可以插入debug()程式碼（如console.log()語句）或從DevTools控制檯呼叫它。debug()相當於在函式的第一行設定 程式碼行斷點。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

確保目標函式在範圍內

ReferenceError如果要除錯的函式不在範圍內，DevTools會丟擲一個。

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

如果您debug()從DevTools控制檯呼叫，確保目標函式在範圍內可能會非常棘手。這是一個策略：

1. 在函式作為範圍的某處設定 line-of-code breakpoint。
2. 觸發斷點。
3. debug()在程式碼仍然在程式碼行斷點處暫停時，在DevTools控制檯中呼叫。

open content licenses：

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work.