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 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」(步驟) 執行 跳出 來執行其餘的 函式的程式碼

選取「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 到該點執行的所有程式碼，然後在該行暫停。

選取「繼續前往此處」。

繼續執行指令碼

如要在指令碼暫停後繼續執行指令碼，請按一下「繼續執行指令碼執行」 繼續執行指令碼。DevTools 執行指令碼，直到下一個中斷點 (如果有的話) 為止。

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

強制執行指令碼

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

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

變更討論串內容

使用網路工作站或 Service Worker 時，按一下「Threads」窗格中所列的內容，即可 就會切換至這個內容藍色箭頭圖示代表目前選取的內容。

「Threads」窗格。

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

舉例來說，假設您同時在主指令碼和服務中暫停到中斷點 工作站指令碼。您想要查看 Service Worker 背景的本機和全域屬性；不過 「來源」面板會顯示主要指令碼內容。只要按一下 「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」窗格查看協助您前往此項目的呼叫堆疊 點。

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

「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) 以完成本教學課程。

顯示忽略清單中的頁框

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

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

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

在「設定」中忽略指令碼

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

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

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

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

觀察自訂 JavaScript 運算式的值

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

「Watch」窗格。

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

檢查及編輯指令碼

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