JavaScript 偵錯參考資料

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

參考這項 Chrome 開發人員工具偵錯功能的完整參考資料，探索新的偵錯工作流程。

請參閱「開始在 Chrome 開發人員工具中為 JavaScript 偵錯」一文，瞭解偵錯的基本概念。

使用中斷點暫停程式碼

設定中斷點，以便在程式碼執行作業期間暫停。如要瞭解如何設定中斷點，請參閱「使用中斷點暫停程式碼」。

在暫停時檢查值

執行暫停時，偵錯工具會評估目前函式到中斷點之間的所有變數、常數和物件。偵錯工具會在對應的宣告旁邊顯示目前的值。

宣告旁邊會顯示內嵌評估。

您可以使用主控台查詢已評估的變數、常數和物件。

使用主控台查詢已評估的變數、常數和物件。

懸停時預覽類別/函式屬性

執行暫停時，將滑鼠遊標懸停在類別或函式名稱上，即可預覽其屬性。

懸停時預覽類別/函式屬性

逐步執行程式碼

程式碼暫停後，逐一執行每個運算式，逐一調查控制流程及屬性值。

逐步執行程式碼

當程式碼行時，如果其中的函式與您要偵錯的問題無關，請按一下「Step over」跳過 來執行函式，而不必進入。

選取「Step Over」。

舉例來說，假設您要對下列程式碼進行偵錯：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

你在 A暫停，按下「Step over」時，開發人員工具會執行您要前往的函式中的所有程式碼，也就是 B 和 C。然後開發人員工具會在 D 暫停。

逐步執行程式碼

如果程式碼的那行暫停了與偵錯問題相關的函式呼叫，請按一下「Step to」逐步執行 進一步調查該函式。

選取「進站」。

舉例來說，假設您要對下列程式碼進行偵錯：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

你在 A暫停，如果按下「Step into」，開發人員工具就會執行這行程式碼，然後在 B 上暫停。

跳脫程式碼行列

當在與偵錯問題無關的函式中暫停時，按一下「Stepout」圖示 跳出 來執行函式的其餘程式碼。

選取「Step out」(跳出)。

舉例來說，假設您要對下列程式碼進行偵錯：

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

你在 A暫停，如果按下「Step out」，開發人員工具就會執行 getName() 中的其餘程式碼 (在本例中僅為 B)，然後在 C 上暫停。

最多可在特定行內執行所有程式碼

對長函式進行偵錯時，可能會有許多程式碼與您要偵錯的問題無關。

你「可以」逐行瀏覽，但可能會很枯燥乏味。您可以在想看的行上設定一行程式碼中斷點，然後按下 Resume Script Execution 繼續執行指令碼，但還有更快的方法。

對您感興趣的程式碼行按一下滑鼠右鍵，然後選取「前往這裡」。開發人員工具到該時間點為止都會執行所有程式碼，並在該行暫停。

選取「繼續前往此處」。

繼續執行指令碼

如要在指令碼暫停後繼續執行指令碼，請按一下「Resume Script Execution」圖示 繼續執行指令碼。開發人員工具會執行指令碼，直到下一個中斷點 (如果有的話) 為止。

選取「繼續執行指令碼執行」。

強制執行指令碼

如要忽略所有中斷點並強制讓指令碼繼續執行，請按住「Resume Script Execution」圖示 繼續執行指令碼，然後選取「Force Script 執行」強制執行指令碼。

選取「強制執行指令碼」。

變更討論串內容

使用網路工作站或 Service Worker 時，按一下「Threads」窗格中列出的背景資訊，即可切換至該結構定義。藍色箭頭圖示代表目前選取的內容。

「Threads」窗格。

上方螢幕截圖中的「Threads」窗格以藍色外框顯示。

舉例來說，假設您在主要指令碼和服務工作站指令碼中暫停了中斷點。您想要查看 Service Worker 結構定義的本機和全域屬性，但「來源」面板顯示主要指令碼內容。按一下「Threads」窗格中的 Service Worker 項目，即可切換至該結構定義。

逐步檢查以半形逗號分隔的運算式

逐一處理以半形逗號分隔的運算式，就能對壓縮的程式碼進行偵錯。以下列程式碼為例：

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

壓縮時會包含以半形逗號分隔的 foo(),foo(),42 運算式：

function foo(){}function bar(){return foo(),foo(),42}bar();

Debugger 步驟透過這類運算式執行相同步驟。

逐一查看以半形逗號分隔的運算式。

因此，步驟的行為都相同：

  • 介於經過壓縮與編寫的程式碼之間。
  • 使用來源對應，針對原始程式碼對經過壓縮的程式碼進行偵錯。換句話說，當您看到半形分號時，即使要偵錯的來源已壓縮實際來源，您還是可以順利通過這些分號。

查看及編輯地方房源、封閉和全球資產

當程式碼行暫停時，您可以透過「Scope」窗格查看及編輯本機、封閉和全域範圍內的屬性和變數值。

  • 按兩下屬性值即可進行變更。
  • 不可列舉的屬性會以灰色顯示。

「Scope」窗格。

上方螢幕截圖中的「Scope」窗格為藍色外框。

查看目前的呼叫堆疊

在程式碼行暫停時，使用「Call Stack」窗格查看到達此點的呼叫堆疊。

按一下所需項目，即可跳至呼叫該函式的程式碼行。藍色箭頭圖示代表開發人員工具目前醒目顯示的函式。

「Call Stack」窗格。

上方螢幕截圖中的「Call Stack」窗格以藍色外框顯示。

重新啟動呼叫堆疊中的函式 (頁框)

如要觀察函式的行為，並在不重新啟動整個偵錯流程的情況下重新執行函式，您可以在暫停此函式時重新啟動單一函式的執行作業。換句話說，您可以在呼叫堆疊中重新啟動函式的框架。

如何重新啟動影格：

  1. 在中斷點暫停函式執行。「Call Stack」窗格會記錄函式呼叫的順序。

  2. 在「Call Stack」窗格中的函式上按一下滑鼠右鍵，然後從下拉式選單中選取「Restart frame」。

    從下拉式選單中選取「重新啟動頁框」。

如要瞭解「重新啟動頁框」的運作方式，請考慮使用下列程式碼：

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() 函式使用 0 做為引數，然後記錄並呼叫 bar() 函式。bar() 函式會反向遞增引數。

請嘗試透過下列方式重新啟動這兩個函式的影格：

  1. 將上述程式碼複製到新的程式碼片段，然後執行。執行作業會在 debugger 程式碼行中斷點停止。
  2. 請注意，偵錯工具會在函式宣告旁邊顯示目前的值：value = 1。 函式宣告旁的目前值。
  3. 重新啟動 bar() 頁框。重新啟動 bar() 框架。
  4. 按下 F9，逐步執行值增量陳述式。 正在遞增目前的值。 請注意，目前的值會增加：value = 2。
  5. (選用) 在「Scope」(範圍) 窗格中，按兩下值即可進行編輯，並設定所需的值。在「Scopes」窗格中編輯值。

  6. 請嘗試重新啟動 bar() 影格，並多次執行漸進式陳述式。值也會持續增加。 再次重新啟動 bar() 框架。

影格重新啟動後，不會重設引數。換句話說，重新啟動不會還原函式呼叫時的初始狀態。而是將執行指標移至函式的開頭。

因此，在您重新啟動同一個函式時，目前的引數值會在記憶體中保留。

  1. 現在，重新啟動「Call Stack」中的 foo() 框架。重新啟動 foo() 頁框。 請注意，這個值再次為 0。 ALT_TEXT_HERE

在 JavaScript 中，除了函式外，無法看到 (反映) 的引數變更。巢狀函式會接收值，而不是其在記憶體中的位置。1. 繼續執行指令碼執行作業 (F8) 以完成本教學課程。

顯示忽略清單中的頁框

根據預設，「Call Stack」窗格只會顯示與程式碼相關的頁框，並省略任何新增至 [設定]。「設定」 >「忽略清單」的指令碼。

呼叫堆疊。

如要查看完整的呼叫堆疊 (包括第三方框架)，請在「Call Stack」部分啟用「顯示忽略清單中的框架」。

顯示忽略清單中的頁框。

歡迎在這個示範頁面試用這項功能：

  1. 在「Sources」面板中，開啟 src > app > app.component.ts 檔案。
  2. 在 increment() 函式設定中斷點。
  3. 在「Call Stack」部分，勾選或取消勾選「Show ignore-listed frames」核取方塊，然後觀察呼叫堆疊中相關或完整的影格清單。

查看非同步影格

如果您使用的架構支援，開發人員工具即可連結非同步程式碼的兩個部分，以便追蹤非同步作業。

在這種情況下，「Call Stack」會顯示完整的通話記錄，包括非同步呼叫框。

非同步呼叫框架。

複製堆疊追蹤

在「Call Stack」窗格中的任一處按一下滑鼠右鍵，然後選取「Copy stack trace」，將目前的呼叫堆疊複製到剪貼簿。

選取「複製堆疊追蹤」。

輸出內容範例如下：

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

瀏覽檔案樹狀結構

使用「Page」(頁面) 窗格瀏覽檔案樹狀結構。

在檔案樹狀結構中為已編寫和部署的檔案分組

使用 React 或 Angular 等架構開發網頁應用程式時，由於建構工具會產生壓縮檔案 (例如 webpack 或 Vite)，可能會難以瀏覽來源。

為方便您瀏覽來源，「來源」 >「頁面」窗格可以將檔案分為以下兩類：

  • 程式碼圖示。 編寫。類似您在 IDE 中查看的來源檔案。開發人員工具會根據建構工具提供的來源對應產生這些檔案。
  • 「已部署」圖示。 已部署。瀏覽器讀取的實際檔案。這些檔案通常會經過壓縮。

如要啟用分組功能，請在檔案樹狀結構頂端的三點圖示選單中，啟用 三點圖示選單。 >「按照已編寫/部署的檔案分組」實驗版。 選項。

依「已編寫 / 已部署」分組檔案。

在檔案樹狀結構中隱藏忽略清單中的來源

為了讓您只專注於建立的程式碼，「來源」 >「網頁」窗格預設會灰色所有新增至 [設定]。「設定」 >「忽略清單」的指令碼或目錄。

如要完全隱藏這類指令碼，請依序選取「來源」 >「網頁」 >「三點圖示選單。」>「隱藏忽略清單中的來源」圖示 實驗版。。

隱藏忽略清單中的來源前後。

忽略指令碼的指令碼或模式

忽略指令碼，在偵錯時略過該指令碼。忽略時，指令碼會在「Call Stack」窗格中遮蔽，因此當您逐步執行程式碼時，絕不會進入指令碼的函式。

舉例來說，假設您正在逐步執行下列程式碼：

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

「A」是你信任的第三方程式庫。如果您確信要偵錯的問題與第三方程式庫無關，請忽略該指令碼。

忽略檔案樹狀結構中的指令碼或目錄

如何忽略個別指令碼或整個目錄：

  1. 在「來源」 >「網頁」中，在目錄或指令碼檔案上按一下滑鼠右鍵。
  2. 選取「新增目錄/指令碼以忽略清單」。

忽略目錄或指令碼檔案的選項。

如果您並未隱藏忽略清單中的來源，可以在檔案樹狀結構中選取這類來源，然後在 警告。 警告橫幅中，按一下「從忽略清單中移除」或「設定」。

所選忽略的檔案會顯示「移除」和「設定」按鈕。

或者，您也可以依序前往 [設定]。「設定」 >「忽略清單」，將隱藏和忽略的目錄和指令碼從清單中移除。

在編輯器窗格中忽略指令碼

如要在「Editor」窗格中忽略指令碼，請按照下列步驟操作：

  1. 開啟檔案。
  2. 在任何地方按一下滑鼠右鍵。
  3. 選取「將指令碼新增到忽略清單」。

從編輯器窗格中忽略指令碼。

如要將指令碼從已忽略的清單中移除，請前往 [設定]。 >「忽略清單」。

忽略「Call Stack」窗格中的指令碼

如要忽略「Call Stack」窗格中的指令碼，請按照下列步驟操作：

  1. 在指令碼中的函式上按一下滑鼠右鍵。
  2. 選取「將指令碼新增到忽略清單」。

從呼叫堆疊窗格中忽略指令碼。

如要將指令碼從已忽略的清單中移除，請前往 [設定]。 >「忽略清單」。

在「設定」中忽略指令碼

請依序前往 [設定]。「設定」>「忽略清單」。

從任何網頁執行偵錯程式碼片段

如果您發現自己在 Play 管理中心中一再執行相同的偵錯程式碼，可以考慮使用程式碼片段。程式碼片段是您在開發人員工具中編寫、儲存和執行的指令碼。

詳情請參閱「從任何網頁執行程式碼片段」。

觀察自訂 JavaScript 運算式的值

您可以利用「Watch」窗格查看自訂運算式的值。您可以監控任何有效的 JavaScript 運算式。

「Watch」窗格。

  • 按一下「Add Expression」圖示 新增運算式 來建立新的觀察運算式。
  • 按一下「Refresh」圖示 重新整理，即可重新整理所有現有運算式的值。執行程式碼時，系統會自動重新整理值。
  • 將滑鼠遊標懸停在運算式上，然後按一下「Delete Expression」圖示 刪除運算式 即可刪除運算式。

檢查及編輯指令碼

在「Page」窗格中開啟指令碼時，開發人員工具會在「Editor」窗格中顯示指令碼內容。在「Editor」窗格中，您可以瀏覽及編輯程式碼。

此外，您可以在本機覆寫內容，或建立工作區，並將您在開發人員工具中所做的變更直接儲存到本機來源。

將壓縮的檔案設為可讀取

根據預設，「來源」面板會計算美化檔案。妥善列印時，Editor 可能會分行顯示一行長程式碼，並使用 - 表示這是行接續。

多行顯示了美化的長程式碼行，「-」表示線條連續。

如要查看檔案載入時的壓縮結果，請按一下「編輯器」左下角的 { }。

折疊程式碼區塊

如要收合程式碼區塊，請將滑鼠遊標懸停在左欄中的行號上，然後按一下 收合。「收合」。

如要展開程式碼區塊，請按一下該程式碼區塊旁邊的 {...}。

如要設定這項行為，請參閱 [設定]。「設定」 >「偏好設定」 >「來源」。

編輯指令碼

修正錯誤時，您通常會想測試對 JavaScript 程式碼所做的一些變更。您不需要在外部瀏覽器中進行變更，然後重新載入頁面。您可以在開發人員工具中編輯指令碼。

如何編輯指令碼：

  1. 在「Sources」面板的「Editor」窗格中開啟檔案。
  2. 在「Editor」窗格中進行變更。

  3. 按下 Command + S 鍵 (Mac) 或 Ctrl + S 鍵 (Windows、Linux) 即可儲存。開發人員工具會將整個 JS 檔案修補至 Chrome 的 JavaScript 引擎。

    「Editor」窗格。

    上方螢幕截圖中的「Editor」窗格會以藍色外框標示。

即時編輯已暫停的函式

執行暫停時，您可以編輯目前的函式並即時套用變更，但有下列限制：

  • 您只能編輯呼叫堆疊中最頂層的函式。
  • 堆疊後方的相同函式不得反覆呼叫。

如何即時編輯函式：

  1. 使用中斷點暫停執行。
  2. 編輯已暫停的函式。
  3. 按下 Command / Control + S 鍵套用變更。偵錯工具會自動重新啟動函式。
  4. 繼續執行。

如要瞭解此工作流程，請觀看下方影片。

在這個範例中，addend1 和 addend2 變數一開始的 string 類型不正確。因此，系統會將字串串連起來，而非新增數字。為修正這個問題，系統會在即時編輯期間新增 parseInt() 函式。

如何搜尋指令碼中的文字：

  1. 在「Sources」面板的「Editor」窗格中開啟檔案。
  2. 如要開啟內建的搜尋列，請按下 Command + F 鍵 (Mac) 或 Ctrl + F 鍵 (Windows、Linux)。
  3. 在搜尋列中輸入查詢內容。 。 您也可以選擇採取以下做法：
    • 按一下「大小寫需相符。大小寫相符」，讓查詢區分大小寫。
    • 按一下「使用規則運算式」圖示 規則運算式按鈕。，即可使用規則運算式進行搜尋。
  4. 按下 Enter 鍵。如要跳到上一個或下一個搜尋結果，請使用向上或向下鍵。

如何取代找到的文字：

  1. 在搜尋列中，按一下「取代。」(取代) 按鈕。 取代。
  2. 輸入要取代的文字，然後按一下「取代」或「全部取代」。

停用 JavaScript

請參閱「使用 Chrome 開發人員工具停用 JavaScript」。