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」後，DevTools 會執行您要逐步檢查的函式中的所有程式碼，也就是 B 和 C。然後開發人員工具會在 D 暫停。

逐步執行程式碼

程式碼在包含與所遇到的問題相關的函式呼叫的行上時當暫停時 如要偵錯，請按一下「Step into」 逐步執行：調查該函式 進一步

選取「進站」。

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

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。

跳脫程式碼行列

如果在暫停的函式中，找不到要偵錯的問題，請按一下「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」。 繼續執行指令碼，但這項資訊更快。

在你感興趣的程式碼行上按一下滑鼠右鍵，然後選取「繼續到這裡」。DevTools 到該點執行的所有程式碼，然後在該行暫停。

選取「繼續前往此處」。

繼續執行指令碼

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

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

強制執行指令碼

如要忽略所有中斷點並強制讓指令碼恢復執行，請按一下並按住「Resume Script」(繼續執行指令碼) 執行作業 繼續執行指令碼 然後選取「強制執行指令碼」 強制執行指令碼。

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

變更執行緒內容

使用網路 worker 或服務 worker 時，請按一下「Threads」窗格中列出的內容，切換至該內容。藍色箭頭圖示代表目前選取的內容。

「Threads」窗格。

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

舉例來說，假設您同時在主指令碼和服務中暫停到中斷點 工作站指令碼。您想查看服務工作者內容的本機和全域屬性，但「來源」面板顯示的是主要指令碼內容。只要按一下「執行緒」窗格中的服務工作者項目，即可切換至該內容。

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

您可以透過檢查以半形逗號分隔的運算式，偵錯經過壓縮的程式碼。以下列程式碼為例：

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」窗格查看協助您前往此項目的呼叫堆疊 點。

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

「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. (選用) 在「範圍」窗格中，按兩下值即可進行編輯，並設定所需的值。 在「Scopes」窗格中編輯值。

  6. 請嘗試重新啟動 bar() 影格，並多次逐步執行遞增陳述式。並持續增加。 再次重新啟動 bar() 框架。

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

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

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

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

顯示忽略清單中的頁框

根據預設，「呼叫堆疊」窗格只會顯示與程式碼相關的框架，並略過任何新增至 。「設定」>「忽略清單」 的指令碼。

呼叫堆疊。

如要查看包含第三方框架的完整呼叫堆疊，請啟用「呼叫堆疊」部分下方的「顯示忽略清單中的頁框」。

顯示忽略清單中的頁框。

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

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

查看非同步影格

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

在這種情況下，「呼叫堆疊」會顯示整個呼叫記錄，包括非同步呼叫框架。

非同步呼叫框架。

複製堆疊追蹤

在「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. 選取「將指令碼新增到忽略清單」。

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

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

在「設定」中忽略指令碼

請參閱 。「設定」>忽略清單：

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

如果您發現自己不斷在控制台中執行相同的偵錯程式碼，建議您使用程式碼片段。程式碼片段是您在開發人員工具中編寫、儲存及執行的可執行指令碼。

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

觀察自訂 JavaScript 運算式的值

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

「Watch」窗格。

  • 按一下「新增運算式」 新增運算式 建立新的監控運算式
  • 按一下「重新整理」圖示 重新整理 即可重新整理 所有現有運算式的值。逐步執行程式碼時，值會自動重新整理。
  • 將滑鼠游標懸停在運算式上，然後點選「刪除運算式」圖示 刪除運算式 即可刪除。

檢查及編輯腳本

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

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

將壓縮的檔案設為可讀取

根據預設，「來源」面板會針對經過壓縮的檔案套用美化排版。在精美顯示模式下，編輯器可能會將單一長程式碼行顯示在多行中，並以 - 表示這是行續接符號。

多行顯示美化的長程式碼行，旁邊有「-」符號用於表示線條連續。

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

折疊程式碼區塊

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

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

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

編輯指令碼

修正錯誤時，您通常會想測試 JavaScript 程式碼的部分變更。不需要 即可在外部瀏覽器中進行變更，然後重新載入頁面。您可以在 DevTools 中編輯指令碼。

如何編輯指令碼：

  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」。