參考這項 Chrome 開發人員工具偵錯功能的完整參考資料,探索新的偵錯工作流程。
請參閱「開始在 Chrome 開發人員工具中為 JavaScript 偵錯」一文,瞭解偵錯的基本概念。
使用中斷點暫停程式碼
設定中斷點,以便在程式碼執行作業期間暫停。如要瞭解如何設定中斷點,請參閱「使用中斷點暫停程式碼」。
在暫停時檢查值
執行暫停時,偵錯工具會評估目前函式到中斷點之間的所有變數、常數和物件。偵錯工具會在對應的宣告旁邊顯示目前的值。
您可以使用主控台查詢已評估的變數、常數和物件。
懸停時預覽類別/函式屬性
執行暫停時,將滑鼠遊標懸停在類別或函式名稱上,即可預覽其屬性。
逐步執行程式碼
程式碼暫停後,逐一執行每個運算式,逐一調查控制流程及屬性值。
逐步執行程式碼
當程式碼行時,如果其中的函式與您要偵錯的問題無關,請按一下「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」圖示 來執行函式的其餘程式碼。
舉例來說,假設您要對下列程式碼進行偵錯:
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」窗格以藍色外框顯示。
舉例來說,假設您在主要指令碼和服務工作站指令碼中暫停了中斷點。您想要查看 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」窗格為藍色外框。
查看目前的呼叫堆疊
在程式碼行暫停時,使用「Call Stack」窗格查看到達此點的呼叫堆疊。
按一下所需項目,即可跳至呼叫該函式的程式碼行。藍色箭頭圖示代表開發人員工具目前醒目顯示的函式。
上方螢幕截圖中的「Call Stack」窗格以藍色外框顯示。
重新啟動呼叫堆疊中的函式 (頁框)
如要觀察函式的行為,並在不重新啟動整個偵錯流程的情況下重新執行函式,您可以在暫停此函式時重新啟動單一函式的執行作業。換句話說,您可以在呼叫堆疊中重新啟動函式的框架。
如何重新啟動影格:
- 在中斷點暫停函式執行。「Call Stack」窗格會記錄函式呼叫的順序。
在「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()
函式會反向遞增引數。
請嘗試透過下列方式重新啟動這兩個函式的影格:
- 將上述程式碼複製到新的程式碼片段,然後執行。執行作業會在
debugger
程式碼行中斷點停止。 - 請注意,偵錯工具會在函式宣告旁邊顯示目前的值:
value = 1
。 - 重新啟動
bar()
頁框。 - 按下
F9
,逐步執行值增量陳述式。 請注意,目前的值會增加:value = 2
。 - (選用) 在「Scope」(範圍) 窗格中,按兩下值即可進行編輯,並設定所需的值。
請嘗試重新啟動
bar()
影格,並多次執行漸進式陳述式。值也會持續增加。
影格重新啟動後,不會重設引數。換句話說,重新啟動不會還原函式呼叫時的初始狀態。而是將執行指標移至函式的開頭。
因此,在您重新啟動同一個函式時,目前的引數值會在記憶體中保留。
- 現在,重新啟動「Call Stack」中的
foo()
框架。 請注意,這個值再次為0
。
在 JavaScript 中,除了函式外,無法看到 (反映) 的引數變更。巢狀函式會接收值,而不是其在記憶體中的位置。1. 繼續執行指令碼執行作業 (F8
) 以完成本教學課程。
顯示忽略清單中的頁框
根據預設,「Call Stack」窗格只會顯示與程式碼相關的頁框,並省略任何新增至 「設定」 >「忽略清單」的指令碼。
如要查看完整的呼叫堆疊 (包括第三方框架),請在「Call Stack」部分啟用「顯示忽略清單中的框架」。
歡迎在這個示範頁面試用這項功能:
- 在「Sources」面板中,開啟
src
>app
>app.component.ts
檔案。 - 在
increment()
函式設定中斷點。 - 在「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
」是你信任的第三方程式庫。如果您確信要偵錯的問題與第三方程式庫無關,請忽略該指令碼。
忽略檔案樹狀結構中的指令碼或目錄
如何忽略個別指令碼或整個目錄:
- 在「來源」 >「網頁」中,在目錄或指令碼檔案上按一下滑鼠右鍵。
- 選取「新增目錄/指令碼以忽略清單」。
如果您並未隱藏忽略清單中的來源,可以在檔案樹狀結構中選取這類來源,然後在 警告橫幅中,按一下「從忽略清單中移除」或「設定」。
或者,您也可以依序前往 「設定」 >「忽略清單」,將隱藏和忽略的目錄和指令碼從清單中移除。
在編輯器窗格中忽略指令碼
如要在「Editor」窗格中忽略指令碼,請按照下列步驟操作:
- 開啟檔案。
- 在任何地方按一下滑鼠右鍵。
- 選取「將指令碼新增到忽略清單」。
忽略「Call Stack」窗格中的指令碼
如要忽略「Call Stack」窗格中的指令碼,請按照下列步驟操作:
- 在指令碼中的函式上按一下滑鼠右鍵。
- 選取「將指令碼新增到忽略清單」。
在「設定」中忽略指令碼
從任何網頁執行偵錯程式碼片段
如果您發現自己在 Play 管理中心中一再執行相同的偵錯程式碼,可以考慮使用程式碼片段。程式碼片段是您在開發人員工具中編寫、儲存和執行的指令碼。
詳情請參閱「從任何網頁執行程式碼片段」。
觀察自訂 JavaScript 運算式的值
您可以利用「Watch」窗格查看自訂運算式的值。您可以監控任何有效的 JavaScript 運算式。
- 按一下「Add Expression」圖示 來建立新的觀察運算式。
- 按一下「Refresh」圖示 ,即可重新整理所有現有運算式的值。執行程式碼時,系統會自動重新整理值。
- 將滑鼠遊標懸停在運算式上,然後按一下「Delete Expression」圖示 即可刪除運算式。
檢查及編輯指令碼
在「Page」窗格中開啟指令碼時,開發人員工具會在「Editor」窗格中顯示指令碼內容。在「Editor」窗格中,您可以瀏覽及編輯程式碼。
此外,您可以在本機覆寫內容,或建立工作區,並將您在開發人員工具中所做的變更直接儲存到本機來源。
將壓縮的檔案設為可讀取
根據預設,「來源」面板會計算美化檔案。妥善列印時,Editor 可能會分行顯示一行長程式碼,並使用 -
表示這是行接續。
如要查看檔案載入時的壓縮結果,請按一下「編輯器」左下角的 { }
。
折疊程式碼區塊
如要收合程式碼區塊,請將滑鼠遊標懸停在左欄中的行號上,然後按一下 「收合」。
如要展開程式碼區塊,請按一下該程式碼區塊旁邊的 {...}
。
如要設定這項行為,請參閱 「設定」 >「偏好設定」 >「來源」。
編輯指令碼
修正錯誤時,您通常會想測試對 JavaScript 程式碼所做的一些變更。您不需要在外部瀏覽器中進行變更,然後重新載入頁面。您可以在開發人員工具中編輯指令碼。
如何編輯指令碼:
- 在「Sources」面板的「Editor」窗格中開啟檔案。
- 在「Editor」窗格中進行變更。
按下 Command + S 鍵 (Mac) 或 Ctrl + S 鍵 (Windows、Linux) 即可儲存。開發人員工具會將整個 JS 檔案修補至 Chrome 的 JavaScript 引擎。
上方螢幕截圖中的「Editor」窗格會以藍色外框標示。
即時編輯已暫停的函式
執行暫停時,您可以編輯目前的函式並即時套用變更,但有下列限制:
- 您只能編輯呼叫堆疊中最頂層的函式。
- 堆疊後方的相同函式不得反覆呼叫。
如何即時編輯函式:
如要瞭解此工作流程,請觀看下方影片。
在這個範例中,addend1
和 addend2
變數一開始的 string
類型不正確。因此,系統會將字串串連起來,而非新增數字。為修正這個問題,系統會在即時編輯期間新增 parseInt()
函式。
搜尋及取代指令碼中的文字
如何搜尋指令碼中的文字:
- 在「Sources」面板的「Editor」窗格中開啟檔案。
- 如要開啟內建的搜尋列,請按下 Command + F 鍵 (Mac) 或 Ctrl + F 鍵 (Windows、Linux)。
- 在搜尋列中輸入查詢內容。
您也可以選擇採取以下做法:
- 按一下「大小寫相符」,讓查詢區分大小寫。
- 按一下「使用規則運算式」圖示 ,即可使用規則運算式進行搜尋。
- 按下 Enter 鍵。如要跳到上一個或下一個搜尋結果,請使用向上或向下鍵。
如何取代找到的文字:
- 在搜尋列中,按一下「」(取代) 按鈕。
- 輸入要取代的文字,然後按一下「取代」或「全部取代」。