上一個

下一個

使用 Visual Studio Code 進行偵錯

8 分鐘

在上一個練習中，您已了解能夠透過 Node.js 中提供的調試程式逐步執行程式代碼的重要性。針對 Tailwind Traders 應用程式的工作，您需要在 IDE 內更全面的偵錯環境（集成開發環境）。

讓我們探索如何設定 Visual Studio Code 偵錯工具，以搭配 Node.js 加以使用。

如何使用 Visual Studio Code 進行 Node.js 偵錯

在 Visual Studio Code 中，調試程式可從 [ 執行 ] 索引卷標存取。

Screenshot of Visual Studio Code debug tab.

如果您在編輯器視窗中開啟檔案 .js ，您可以選取 [ 執行] 和 [偵 錯]，然後選取 [Node.js ] 直接偵錯開啟的 JavaScript 檔案。

有數種其他方法可在Visual StudioCode中開始偵錯。在下一個練習中，我們將使用launch.json檔案。開發小組通常會使用 launch.json 檔案來自定義執行組態。使用 .json 檔案中指定的組態，您可以將它簽入原始檔控制。從原始檔控制，您可以跨小組共享設定。

新增斷點來控制流程

Visual Studio Code 偵錯工具與內建 Node.js 命令列偵錯工具不同，此工具會立即開始執行程式碼。如果程式很快就完成執行，您甚至可能會沒有機會與偵錯工具互動。這就是為什麼您可能會想要在執行程式碼前新增一些中斷點。我們將在下一個練習中新增和移除幾個斷點。

若要在程式碼中新增中斷點，請在 JavaScript (.js) 檔案中尋找您要新增中斷點的程式代碼行。在程式代碼語句的行號旁邊，選取左邊界。新增中斷點時，您會看到行號旁的紅色圓圈。若要移除斷點，請選取紅色圓圈。

Screenshot of a breakpoint added in the Visual Studio Code editor window.

您也可以使用 滑鼠右鍵操作功能表 來新增斷點。內容功能表包含 [新增條件式中斷點] 選項，您可以在其中輸入中斷程式碼執行的條件。條件式中斷點只有在符合指定條件時才會啟動。

Screenshot of setting a conditional breakpoint in Visual Studio Code.

只有當的值 convertedValue 未定義時，這個斷點才會停止執行。

Visual Studio Code 偵錯工具概觀

在設定中斷點並啟動應用程式後，畫面上會出現新的資訊面板和控制項。

Screenshot of Visual Studio Code debugger overview.

數值	名稱	描述
1.	偵錯工具啟動控制項	在提要欄位頂端，您可以找到啟動控制項。
2.	變數狀態	[ 變數] 面板會顯示變數的目前狀態。
3.	監看的變數狀態	[ 監看式] 面板會顯示所監看變數的目前狀態。
4.	目前的呼叫堆疊	[ 呼叫堆疊] 面板會顯示目前的呼叫堆疊。
5.	已載入的指令碼檔案	[ 載入的腳本檔案 ] 面板會顯示到目前為止已載入的 JavaScript 檔案。
6.	中斷點	[ 斷點] 面板會顯示您在程序代碼中放置的所有斷點。
7.	執行控制項	您可以使用這些控制項來控制程式的執行流程。
8.	目前的執行步驟	目前的執行步驟會在編輯器視窗中反白顯示。
9.	偵錯主控台	偵錯主控台可用來將應用程式控制台記錄可視化，以及在目前的執行內容中評估表達式或執行程序代碼。

偵錯工具啟動控制項

您可以在側邊欄的頂端找到啟動控制項：

Screenshot of Visual Studio Code debug sidebar controls.

數值	名稱	描述
1.	開始偵錯	開始對應用程式進行偵錯。
2.	選取作用中的啟動組態	選取作用中的啟動設定。
3.	編輯檔案`launch.json`	編輯 `launch.json` 檔案。如果您需要，請建立 json 檔案。
4.	開啟偵錯主控台	開啟 [偵錯控制台]，然後切換 [變數]、[監看式]、[呼叫堆棧] 和 [斷點] 面板的可見性。

檢視並編輯變數狀態

當您分析程式缺陷的成因時，請監看變數狀態以尋找非預期的變更。您可以使用 [變數] 面板來密切注意變數狀態。

變數會依範圍依序顯示：

影響範圍	描述
區域	[區域變數] 可在目前範圍中存取，通常為目前函式。
全球	[全域變數] 可從程式中任何地方存取。也會包含 JavaScript 執行階段中的系統物件，因此如果在那裡面看到很多東西，請不要感到驚訝。
終止	[結束變數] 可從目前結束 (如果有的話) 存取。結束會將函式的區域範圍與其所屬外部函式的範圍互相結合。

可能的動作包括：

展開範圍：您可以選取箭號來展開範圍和變數。在展開物件時，您可以看到在這個物件中定義的所有屬性。
變更變數值：按兩下變數，即可即時變更變數的值。
查看變數：藉由將滑鼠停留在函式參數或直接在編輯器視窗中的變數上，您也可以查看其值。

監看變數

如果想要跨時間或在不同函式之間追蹤變數狀態，每次都必須加以搜尋可能會相當繁瑣。這就是 [監看] 面板能夠派上用場的地方。

Screenshot of watched variables.

您可以選取加號按鈕，以輸入要監看的變數名稱或運算式。或者，您也可以用滑鼠右鍵按一下 [變數] 窗格中的變數，然後選取 [加入監看]。

當執行程式碼時，[監看] 窗格內的所有運算式都會自動更新。

呼叫堆疊

每次程式輸入函式時，都會在呼叫堆疊中新增一個項目。當應用程式變得很複雜，且會在函式內多次呼叫函式時，呼叫堆疊便能表示函式呼叫的軌跡。

這有助於找出例外狀況的來源。如果程式發生非預期的損毀，您通常會在主控台中看到類似下面的內容：

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

錯誤訊息下的這組 at [...] 行稱為「堆疊追蹤」。堆疊追蹤提供在發生例外狀況之前呼叫的每個函式的名稱與來源。不過，由於堆疊追蹤也包含 Node.js 執行階段的內部函式，因此在理解上可能會有點困難。

這就是 Visual Studio Code 的 [呼叫堆疊] 面板派上用場的地方。可篩選掉不必要的資訊，預設只顯示您自己程式碼中的相關函式。然後，您可以展開此呼叫堆疊，以找出例外狀況的出處。

若要取得進一步協助，您可以選取 [重新啟動框架] 按鈕，此按鈕在將滑鼠指標暫留於堆疊中的函式名稱時便會出現。此功能會將執行「倒轉」到該函式的開頭，方法是透過實際將程式重新啟動至該點。

Screenshot of the Restart frame button in the Visual Studio Code call stack panel.

檢視已載入的指令碼檔案

此面板會顯示到目前為止已載入的所有 JavaScript 檔案。在大型專案中，這有時會有助於檢查目前程式碼是從哪個檔案執行。

[中斷點]

在 [中斷點] 面板中，您可以看見並切換您放置在程式碼中的所有中斷點。您也可以切換選項，在已攔截或未攔截的例外狀況下中斷。您可以使用 [中斷點] 窗格來檢查程式狀態，並在發生錯誤時使用 [呼叫堆疊] 追蹤例外狀況的來源。

控制執行

您可以使用這些控制項來控制程式的執行流程。

Screenshot of Visual Studio Code debugger execution controls.

這些控制項從左至右為：

繼續或暫停執行。如果為暫停狀態，則此控制項會繼續執行，直到出現下一個中斷點為止。如果程式正在執行，則按鈕會切換至暫停按鈕，以供用來暫停執行。
逐程序。在目前內容中執行下一個程式碼陳述式 (與內建偵錯工具中的 next 命令相同)。
逐步執行。如同 [逐程序]，但如果下一個陳述式是函式呼叫，則移至此函式的第一個程式碼陳述式 (與 step 命令相同)。
跳離函式。如果您位於函式內，則執行此函式的剩餘程式碼，並跳回初始函式呼叫之後的陳述式 (與 out 命令相同)。
重新啟動。從頭開始執行程式。
停止。結束執行並離開偵錯工具。

使用偵錯主控台

偵錯主控台可以透過按下 Ctrl+Shift+Y (Windows、Linux) 或 Cmd+Shift+Y (Mac) 來顯示或隱藏。此功能可用來將應用程式主控台記錄視覺化，以及用來在目前的執行內容中評估運算式或執行程式碼，如同內建 Node.js 偵錯工具中的 exec 命令。

您可以在偵錯主控台底部的輸入欄位中輸入 JavaScript 運算式。接著按下 Enter 以加以評估。結果會直接顯示在主控台中。

Screenshot of Debug console.

如此一來，即可快速檢查變數值、以不同的值測試函式，或改變目前的狀態。

新增記錄點，而不是 console.log

Linters 會將語句標示 console.log 為錯誤。若要取得與 console.log 語句相同的效果，請改用Visual Studio Code 記錄點，以列印至偵錯控制台。

以滑鼠右鍵按下您用來新增斷點的相同區域中新增記錄點，然後選取 [ 新增記錄點]。輸入要在程式碼中於該位置顯示的訊息。

Screenshot of adding a logpoint in Visual Studio Code.

與中斷點相同，記錄點不會以任何方式改變程式碼，且只會在偵錯期間使用。您再也沒有理由遺忘 console.log('here') 並使其溜到生產環境中了。

繼續