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

您可以使用 Visual Studio 來偵錯 JavaScript 和 TypeScript 程式碼。 您可以叫用中斷點、連結偵錯工具、檢查變數、檢視呼叫堆疊，以及使用其他偵錯功能。

偵錯伺服器端指令碼

1. 當您的專案在 Visual Studio 中開啟時，開啟伺服器端 JavaScript 檔案 (例如 server.js)，然後按一下以設定中斷點：

   

   中斷點是可靠偵錯最基本和最重要的功能。 中斷點會指出 Visual Studio 應暫停程式碼執行的地方，如此一來，您可以查看變數的值或記憶體的行為，或查看程式碼分支是否正在執行。

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

   偵錯工具會在您設定的中斷點暫停 (IDE 會在黃色背景中醒目提示陳述式)。 現在，您可以將滑鼠指標停留在目前位於範圍內的變數上，並使用偵錯工具視窗 (如 [區域變數] 和 [監看式] 視窗)，藉以檢查應用程式狀態。

   

3. 按 F5 繼續執行應用程式。

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

偵錯用戶端指令碼

Visual Studio 僅針對 Chrome 和 Microsoft Edge 提供用戶端偵錯支援。 在某些案例中，偵錯工具會自動叫用 JavaScript 和 TypeScript 程式碼以及 HTML 檔案內嵌指令碼的中斷點。

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

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

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

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

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

如果您的原始檔是由 TypeScript 或 Babel 等轉換器縮減或建立，則請使用來源對應以獲得最佳的偵錯體驗。 若沒有來源對應，您甚至可將偵錯工具連結至執行中的用戶端指令碼。 不過，您只能在已縮減或轉換的檔案中設定和叫用中斷點，而不能在來源檔案中進行。 例如，在 Vue.js 應用程式中，已縮減的指令碼會以字串形式傳遞至 eval 陳述式，除非使用來源對應，否則無法使用 Visual Studio 偵錯工具有效地逐步執行此程式碼。 針對複雜的偵錯情節，您可以改用適用於 Microsoft Edge 的 Chrome Developer Tools 或 F12 工具。

如需產生來源對應的說明，請參閱產生來源對應以進行偵錯。

準備瀏覽器以進行偵錯

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

1. 關閉目標瀏覽器 (Microsoft Edge 或 Chrome 執行個體) 的所有視窗。

   其他瀏覽器執行個體可防止瀏覽器開啟並啟用偵錯。 (瀏覽器擴充功能可能正在執行並攔截完整的偵錯模式，因此您可能必須開啟 [工作管理員] 以尋找並關閉 Chrome 或 Edge 未預期的執行個體。)

   為了獲得最佳結果，請關閉 Chrome 的所有執行個體，即使您正在使用 Microsoft Edge。 這兩個瀏覽器都是使用相同的 chromium 程式碼基底。

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

   從 Visual Studio 2019 開始，您可以從 [偵錯] 工具列選取 [瀏覽工具...>]，在瀏覽器啟動時設定 --remote-debugging-port=9222 旗標。

   

   如果您在 [偵錯] 工具列中看不到 [瀏覽工具...] 命令，請選取不同的瀏覽器，然後再試一次。

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

   

   選取 [瀏覽] 以在偵錯模式中使用瀏覽器啟動您的應用程式。

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

   msedge --remote-debugging-port=9222

   或

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

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

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

將偵錯工具連結至用戶端指令碼

針對中斷點和來源對應進行疑難排解

如果您需要在 TypeScript 或 JSX 來源檔案內中斷程式碼，但無法這麼做，請使用上一節中所述的 [連結至處理序] 來連結偵錯工具。 請確定您的環境已正確設定：

• 關閉所有瀏覽器執行個體，包括 Chrome 擴充功能 (使用工作管理員)，讓您可以在偵錯模式中執行瀏覽器。

• 請確定您以偵錯模式啟動瀏覽器。

• 請確定您的來源對應檔案包含來源檔案的正確相對路徑，且不包含不支援的前置詞，例如 webpack:///，這會使 Visual Studio 偵錯工具無法尋找來源檔案。 例如，類似 webpack:///.app.tsx 的參考可能會更正為 ./app.tsx。 您可以在來源對應檔案中手動執行此動作 (這對於測試很有幫助)，或透過自訂群組建組態來執行此動作。 如需詳細資訊，請參閱產生來源對應以進行偵錯。

或者，如果您需要在來源檔案 (例如，app.tsx) 內中斷程式碼，但無法這麼做，請嘗試在來源檔案中使用 debugger; 陳述式，或改為在 Chrome Developer Tools (或針對 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 檔案的編譯器選項

• inlineSourceMap：發出具有來源對應的單一檔案，而不是針對每個來源檔案建立個別來源對應。
• inlineSources：發出原始檔及單一檔案的來源對應；必須設定 inlineSourceMap 或 sourceMap。
• mapRoot：指定偵錯工具應尋找來源對應 (.map) 檔案的位置，而不是預設位置。 如果執行階段 .map 檔案必須與 .js 檔案位於不同的位置，請使用此旗標。 指定的位置會內嵌於來源對應，以將偵錯工具導向至 .map 檔案的位置。
• sourceMap：產生對應的 .map 檔案。
• sourceRoot：指定偵錯工具應尋找 TypeScript 檔案的位置，而不是原始檔位置。 如果執行階段原始檔所在位置必須不同於設計階段時的位置，請使用此旗標。 指定的位置會內嵌於來源對應，以將偵錯工具導向至原始檔所在的位置。

如需編譯器選項的詳細資料，請參閱 TypeScript 手冊上的 Compiler Options (編譯器選項) 頁面。

使用 Razor (ASP.NET) 偵錯動態檔案中的 JavaScript

相關內容

屬性、React、Angular、Vue