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 處暫停。

退出程式碼行

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

選取「退出」。

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

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

舉例來說，假設您在主指令碼和服務 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」窗格。

上方螢幕截圖中以藍色框選的部分為「範圍」窗格。

查看目前的呼叫堆疊

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

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

「Call Stack」窗格。

上圖中的「Call Stack」窗格以藍色標示。

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

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

如要重新啟動影格，請按照下列步驟操作：

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

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

    從下拉式選單中選取「Restart frame」。

如要瞭解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」窗格中按兩下值來編輯，然後設定所需值。 在「範圍」窗格中編輯值。

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

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

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

  1. 現在，重新啟動「Call Stack」中的 foo() 框架。重新啟動 foo() 影格。 請注意，值又是 0。ALT_TEXT_HERE

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

顯示忽略清單中的頁框

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

呼叫堆疊。

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

顯示忽略清單中的頁框。

歡迎前往這個示範頁面試用：

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

查看非同步影格

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

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

非同步呼叫框架。

複製堆疊追蹤

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

選取「Copy Stack Trace」

以下是輸出內容的範例：

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

瀏覽檔案樹狀結構

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

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

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

為了方便您瀏覽來源，您可以依序前往「Sources」>「Page」窗格，將檔案分為兩個類別：

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

如要啟用分組功能，請在檔案樹狀結構頂端的三點選單下方，依序啟用 三點圖示選單。 >「Group files by Authored/Deployed」實驗功能。 選項。

依「已編寫」/「已部署」檢視畫面將檔案分組。

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

為協助您專注於自己建立的程式碼，來源 >「頁面」窗格會將預設加入 。「設定」 >「忽略清單」 的所有指令碼或目錄設為灰色。

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

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

忽略指令碼或指令碼模式

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

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

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

「A」是你信任的第三方程式庫。如果您確信正在偵錯的問題與第三方程式庫無關，那麼忽略指令碼就很合理。

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

如要忽略個別指令碼或整個目錄，請按照下列步驟操作：

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

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

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

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

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

從「編輯器」窗格忽略指令碼

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

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

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

您可以從 。 的「設定」>「忽略清單」中，移除指令碼。

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

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

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

從「Call Stack」窗格中略過腳本。

您可以從 。 的「設定」>「忽略清單」中，移除指令碼。

從「設定」中忽略指令碼

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

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

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

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

監控自訂 JavaScript 運算式的值

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

「觀賞」窗格。

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

檢查及編輯腳本

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

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

讓壓縮檔可供讀取

根據預設，「來源」面板會計算美化檔案。在精美顯示模式下，編輯器可能會以多行顯示單一長程式碼行，並以 - 表示這是行續接符號。

以多行顯示的長程式碼行，其中使用「-」表示行續行。

如要查看載入時的已縮減欄位，請按一下編輯器左下角的 { }。

折疊程式碼區塊

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

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

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

編輯指令碼

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

如要編輯指令碼，請按照下列步驟操作：

  1. 在「來源」面板的「編輯器」窗格中開啟檔案。
  2. 在「Editor」窗格中進行變更。

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

    「編輯器」窗格。

    上方螢幕截圖中以藍色標示的「編輯器」窗格。

即時編輯已暫停的函式

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

  • 您只能編輯「Call Stack」中頂端的函式。
  • 堆疊後方的相同函式不得反覆呼叫。

如要即時編輯函式：

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

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

在這個範例中，addend1 和 addend2 變數最初具有錯誤的 string 類型。因此，系統會連結字串，而非新增數字。為修正這個問題，系統會在即時編輯期間新增 parseInt() 函式。

如何在劇本中搜尋文字：

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

如何取代找到的文字：

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

停用 JavaScript

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