在 Visual Studio 中偵錯 JavaScript 或 TypeScript 應用程式

您可以使用 Visual Studio 對 JavaScript 和 TypeScript 程式代碼進行偵錯。 您可以設置斷點、附加偵錯工具、檢查變數、查看呼叫堆疊，以及使用其他偵錯功能。

提示

如果您尚未安裝 Visual Studio，請移至 Visual Studio 下載 頁面免費安裝。

設定偵錯

對於 Visual Studio 2022 中的 .esproj 專案，Visual Studio Code 會使用 launch.json 檔案來設定和自定義調試程式。 launch.json 是調試程式組態檔。

Visual Studio 只會將調試程式附加至使用者程序代碼。 針對 .esproj 專案，您可以使用 launch.json中的 skipFiles 設定，在 Visual Studio 中設定使用者程式代碼（也稱為 Just My Code 設定）。 這與 VS Code 中的 launch.json 設定相同。 如需 skipFiles 和其他偵錯工具配置選項的詳細資訊，請參閱 略過無趣程式碼 和 啟動配置屬性。

偵錯伺服器端腳本

1. 在 Visual Studio 中開啟專案後，開啟伺服器端 JavaScript 檔案（例如 server.js），在行號欄中點選以設定斷點：

   

   斷點是可靠除錯的最基本且必要的功能。 斷點表示 Visual Studio 應該暫停運行的程式的位置，以便於您可以查看變數的值或記憶體的行為，還是程式碼的分支是否正在執行。

2. 若要執行您的應用程式，請按 F5 （偵錯>[開始偵錯]]。

   調試程式會在您設定的斷點暫停（IDE 會在黃色背景醒目提示 語句）。 現在，您可以將滑鼠懸停在在作用域中的變數上，使用例如 [局部變數] 和 [監看] 視窗等調試程序視窗，來檢查您的應用程式狀態。

   

3. 按 F5 以繼續應用程式。

4. 如果您想要使用 Chrome 開發人員工具，請在 Chrome 瀏覽器中按 F12。 您可以使用這些工具來檢查 DOM，或使用 JavaScript 控制台與應用程式互動。

偵錯用戶端腳本

Visual Studio 僅提供 Chrome 和 Microsoft Edge 的用戶端偵錯支援。 在某些情況下，調試器會自動在嵌入於 HTML 檔案中的 JavaScript 和 TypeScript 程式代碼和腳本中的斷點中斷。

• 若要在 ASP.NET 應用程式中偵錯用戶端腳本，請選擇 [工具]>[選項]>[偵錯]，然後選取 [啟用 ASP.NET 的 JavaScript 偵錯 ASP.NET （Chrome、Edge 和 IE）。

  如果您想要使用 Chrome Developer Tools 或 F12 Tools for Microsoft Edge 來偵錯用戶端腳本，您應該停用此設定。

  如需詳細資訊，請參閱此 Google Chrome部落格文章。 如需在 ASP.NET Core 中偵錯 TypeScript，請參閱 將 TypeScript 新增至現有的 ASP.NET Core 應用程式。

• 針對 Node.js 應用程式和其他 JavaScript 專案，請遵循本文所述的步驟。

注意

針對 ASP.NET 和 ASP.NET Core，偵錯內嵌於 CSHTML 檔案中的腳本在 中是不支援的。 JavaScript 程式代碼必須位於不同的檔案中，才能啟用偵錯。

準備您的應用程式以進行偵錯

如果您的源代碼是由 TypeScript 或 Babel 等轉譯器壓縮或建立的，請使用 源碼映射 以獲得最佳的偵錯體驗。 您甚至可以將調試程式附加至執行中的用戶端腳本，而不需要來源對應。 不過，您可能只能在壓縮或編譯後的檔案中設置和命中斷點，而不是在原始文件中。 例如，在 Vue.js 應用程式中，將壓縮腳本以字串形式傳遞至 eval 語句，如果不使用來源對應，便無法有效地使用 Visual Studio 偵錯工具逐步執行這段代碼。 針對複雜的偵錯案例，您可能想要改用 Chrome Developer Tools 或 F12 Tools for Microsoft Edge。

如需協助產生原始碼對應圖以進行除錯，請參閱 生成原始碼對應圖以輔助除錯。

準備瀏覽器以進行偵錯

在此案例中，請使用 Microsoft Edge 或 Chrome。

1. 關閉目標瀏覽器的所有視窗，Microsoft Edge 或 Chrome 實例。

   其他瀏覽器實例可能會防止瀏覽器在啟用偵錯功能的情況下開啟。 （瀏覽器延伸模組可能正在執行並攔截完整的偵錯模式，因此您可能需要開啟 [任務管理器] 來尋找並關閉 Chrome 或 Edge 的非預期實例。

   為了獲得最佳結果，請關閉 Chrome 的所有實例，即使您使用 Microsoft Edge 也一樣。 這兩個瀏覽器都使用相同的 chromium 程式代碼基底。

2. 啟動瀏覽器並啟用偵錯。

   從 Visual Studio 2019 開始，您可以從 [偵錯] > 旗標。

   

   如果您沒有在 [偵錯] 工具列中看到 [流覽方式...] 命令，請選取不同的瀏覽器，然後重試。

   從 [流覽方式] 對話框中，選擇 [新增]，然後在 [引數] 欄位中設定旗標。 為瀏覽器使用不同的易記名稱，例如 Edge 偵錯模式 或 Chrome 偵錯模式。 如需詳細資訊，請參閱 版本資訊。

   

   選取 瀏覽，以瀏覽器偵錯模式啟動您的應用程式。

   或者，從 Windows [開始] 按鈕開啟 [執行] 命令（以滑鼠右鍵按兩下並選擇 [執行]，然後輸入下列命令：

   msedge --remote-debugging-port=9222

   或

   chrome.exe --remote-debugging-port=9222

   這會啟動瀏覽器並啟用偵錯。

   應用程式尚未執行，因此您會取得空的瀏覽器頁面。 （如果您使用 [執行] 命令啟動瀏覽器，則必須貼上應用程式實例的正確URL。

將調試程式附加至用戶端文本

若要從 Visual Studio 附加偵錯程式並在客戶端程式碼中觸發斷點，它需要幫助以識別正確的進程。 以下是啟用它的一種方式。

1. 請確定您的應用程式是以偵錯模式在瀏覽器中執行，如上一節所述。

   如果您使用易記名稱建立瀏覽器組態，請選擇該設定作為除錯目標，然後按 Ctrl+F5 （除錯>不進行除錯的啟動）以在瀏覽器中執行應用程式。

2. 切換至 Visual Studio，然後在原始碼中設定斷點，這可能是 JavaScript 檔案、TypeScript 檔案或 JSX 檔案。 （在允許斷點的程式代碼行中設定斷點，例如 return 語句或 var 宣告。

   

   若要在轉譯的檔案中尋找特定程式代碼，請使用 Ctrl+F（Edit>Find and Replace>Quick Find）。

   針對用戶端程式代碼，若要在 TypeScript 檔案中叫用斷點，.vue或 JSX 檔案通常需要使用 來源對應。 原始碼對應必須正確設定，才能支援 Visual Studio 中的偵錯。

3. 選擇 [偵錯]>[附加至程序]。

   提示

   從 Visual Studio 2017 開始，在您第一次依照下列步驟附加至進程之後，您可以選擇 [偵錯]>[重新附加至進程]，以快速重新附加至相同的進程。

4. 在 [附加到進程] 對話框中，選取 [JavaScript 和 TypeScript（Chrome Dev Tools/V8 Inspector）]] 作為 [連線類型]。

   調試程序目標，例如 http://localhost:9222，應該會出現在 [連線目標] 字段中。

5. 在瀏覽器實例清單中，選取具有正確主機埠的瀏覽器進程（在此範例中為https://localhost:7184/），然後選取 [附加]。

   埠 （例如 7184）也可能出現在 [Title] 欄位中，以協助您選取正確的瀏覽器實例。

   以下範例顯示使用 Microsoft Edge 瀏覽器時的樣子。

   

   提示

   如果調試程式未附加，您會看到「無法啟動偵錯配接器」或「無法附加至進程」訊息。 作業目前狀態不合法。」，請使用 Windows 任務管理員在偵錯模式中啟動瀏覽器之前關閉目標瀏覽器的所有實例。 瀏覽器擴充套件可能正在運行，並阻止完整的除錯模式。

6. 含有斷點的程式碼可能已經被執行過了，請重新整理瀏覽器頁面。 如有必要，請採取動作，讓具有斷點的程式代碼執行。

   在調試程式中暫停時，您可以將滑鼠停留在變數上並使用調試程式視窗來檢查您的應用程式狀態。 您可以逐步執行程式代碼來推進調試程式（F5、F10和 F11）。 如需基本偵錯功能的詳細資訊，請參閱 先查看調試程式。

   根據您的應用程式類型、先前遵循的步驟，以及瀏覽器狀態等其他因素，您可能會在轉譯的 .js 檔案或原始檔案中遇到斷點。 無論哪種方式，您都可以逐步執行程式碼並檢查變數。

   • 如果您需要在 TypeScript、JSX 或 .vue 原始程式檔中插入程式碼，但遇到問題，請確定您的環境已正確設定，如 疑難解答 一節中所述。

   • 如果您需要插入已轉譯的 JavaScript 檔案中的程式代碼（例如，app-bundle.js），但無法做到，請移除來源對應檔案，filename.js.map。

針對斷點和來源對應進行故障排除

如果您需要在 TypeScript 或 JSX 原始程式檔中中斷程式代碼，而且無法執行，請使用 附加至進程，如上一節所述來附加調試程式。 請確定您的環境已正確設定：

• 關閉所有瀏覽器實例，包括 Chrome 擴充功能（使用任務管理器），讓您可以在偵錯模式中執行瀏覽器。

• 請務必 以偵錯模式啟動瀏覽器，。

• 請確定您的來源對應檔案包含來源檔案的正確相對路徑，而且不包含不支援的前置詞，例如 webpack:///，這可防止 Visual Studio 調試程式尋找來源檔案。 例如，webpack:///.app.tsx 之類的參考可能會更正為 ./app.tsx。 您可以在原始碼對應檔案中手動進行此操作（這對測試很有幫助），或透過自訂建置設定來進行此操作。 如需詳細資訊，請參閱 產生原始碼映射以進行偵錯。

或者，如果您需要在原始程式檔中調試代碼（例如，app.tsx），但無法執行此操作，請嘗試在原始程式檔中使用 debugger; 陳述句，或者改為在 Chrome 開發者工具中設置斷點（或者使用 Microsoft Edge 的 F12 開發工具）。

生成原始碼映射以進行除錯

Visual Studio 具有在 JavaScript 原始程式檔上使用和產生來源對應的功能。 如果您的來源是由 TypeScript 或 Babel 這類轉譯器壓縮或建立的，那麼這通常是必要的。 可用的選項取決於項目類型。

• Visual Studio 中的 TypeScript 專案預設會為您產生原始程式碼對應圖。 如需詳細資訊，請參閱 使用 tsconfig.json 檔案設定來源對應。

• 在 JavaScript 專案中，您可以使用像 webpack 這樣的打包工具和像 TypeScript 編譯器（或 Babel）這樣的編譯器來生成來源對應，將它們新增到您的專案中。 針對 TypeScript 編譯程式，您也必須新增 tsconfig.json 檔案，並設定 sourceMap 編譯程式選項。 如需示範如何使用基本 Webpack 組態執行這項操作的範例，請參閱 使用 React建立 Node.js 應用程式。

注意

如果您不熟悉來源對應，請在繼續之前閱讀 什麼是來源對應？。

若要設定來源地圖的進階設定，請使用 tsconfig.json 或 TypeScript 專案中的項目設定，但不能同時使用兩者。

若要使用 Visual Studio 啟用偵錯，您必須確定所產生來源對應中來源檔案的參考正確（這可能需要測試）。 例如，如果您使用 webpack，來源對應檔中的參考會包含 webpack:/// 前置詞，這可防止 Visual Studio 尋找 TypeScript 或 JSX 來源檔案。 具體來說，當您更正這個錯誤以進行偵錯時，原始檔案的參考（例如 app.tsx），必須從類似 webpack:///./app.tsx 的內容變更為 ./app.tsx，這樣可以啟用偵錯（路徑是相對於您的原始檔案）。 下列範例示範如何在 webpack 這個常見的套件組合程式中設定來源對應，以便能在 Visual Studio 中使用。

（僅限 Webpack）如果您要在 JSX 檔案的 TypeScript 中設定斷點（而不是轉譯的 JavaScript 檔案），您需要更新 Webpack 組態。 例如，在 webpack-config.js中，您可能需要取代下列程序代碼：

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

使用此段程式碼：

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

這是在 Visual Studio 中啟用用戶端程式代碼偵錯的僅限開發設定。

對於複雜的案例，瀏覽器工具（F12）有時最適合偵錯，因為它們不需要變更自定義前置詞。

使用 tsconfig.json 檔案配置原始碼對應

如果您將 tsconfig.json 檔案新增至專案，Visual Studio 會將目錄根目錄視為 TypeScript 專案。 若要新增檔案，請在 [方案總管] 中以滑鼠右鍵按下您的項目，然後選擇 [新增 > 新增項目] > TypeScript JSON 組態檔。 類似下列的 tsconfig.json 檔案會新增至您的專案。

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json 檔案的編譯程序選項

• 內嵌來源地圖：生成具有來源地圖的單一檔案，而不是為每個來源檔案建立個別的來源地圖。
• 行內Sources：將來源與來源映射一同嵌入單一檔案內，需要設定行內SourceMap 或 sourceMap。
• mapRoot：指定除錯器應尋找來源地圖（.map）檔案的位置，而非預設位置。 如果運行時間 .map 檔案必須位於與 .js 檔案不同的位置，請使用此旗標。 指定的位置嵌入在源地圖中，以將調試器導向至 .map 檔案的位置。
• sourceMap：產生對應的 .map 檔案。
• sourceRoot：指定調試程式應該尋找 TypeScript 檔案的位置，而不是來源位置。 如果運行時間來源必須位於與設計時間位置不同的位置，請使用此旗標。 指定的位置嵌入至源映射中，以引導偵錯工具到來源檔案所在的位置。

如需編譯程式選項的詳細資訊，請參閱 TypeScript 手冊上的頁面 編譯程式選項。

使用 Razor 對動態檔案中的 JavaScript 進行偵錯 （ASP.NET）

在 Visual Studio 2022 中，您可以使用斷點對 Razor 頁面進行除錯。 如需詳細資訊，請參閱在 Visual Studio 中使用偵錯工具 。

相關內容

屬性、React、Angular、Vue