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

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

提示

如果您尚未安裝 Visual Studio，請前往 Visual Studio 下載頁面免費進行安裝。 如果您要開發 Node.js 應用程式，則必須使用 Visual Studio 安裝 Node.js 開發工作負載。

偵錯伺服器端指令碼

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 (Chromium) 提供用戶端偵錯支援。 在某些情節中，偵錯工具會自動叫用 JavaScript 和 TypeScript 程式碼以及 HTML 檔案內嵌指令碼的中斷點。

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

  如需詳細資訊，請參閱在 Microsoft Edge 中偵錯 JavaScript 的部落格文章，以及 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 偵錯工具有效地逐步執行此程式碼。 針對複雜的偵錯情節，您可以改用適用於 Microsoft Edge 的 Chrome Developer Tools 或 F12 工具。

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

準備瀏覽器以進行偵錯

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

1. 關閉目標瀏覽器的所有視窗。

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

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

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

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

   

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

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

   

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

   msedge --remote-debugging-port=9222

   或

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

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

   應用程式尚未執行，因此您會取得空的瀏覽器頁面。

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

若要從 Visual Studio 連結偵錯工具，並叫用用戶端程式碼的中斷點，其需要協助以識別正確的處理序。 以下是啟用此功能的其中一種方式。

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

   

   若要在轉譯的檔案中尋找特定程式碼，請使用 Ctrl+F ([編輯]>[尋找及取代]>[快速尋找])。

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

2. 選取目標瀏覽器做為 Visual Studio 的偵錯目標，然後按 Ctrl+F5 ([偵錯]>[啟動但不偵錯]) 以在瀏覽器中執行應用程式。

   如果您使用易記名稱建立瀏覽器設定，請選擇該設定做為偵錯目標。 應用程式會在新的瀏覽器索引標籤中開啟。

3. 選擇 [偵錯]>[連結至處理序]。

   提示

   從 Visual Studio 2017 開始，在依照下列步驟第一次連結至處理序之後，選擇 [偵錯]>[重新連結至處理序]，即可快速地重新連結至相同的處理序。

4. 在 [連結至處理序] 對話方塊中，取得您可以連結的瀏覽器執行個體篩選清單。 在 [連結至] 欄位中，為您的目標瀏覽器、JavaScript (Chrome) 或 JavaScript (Microsoft Edge - Chromium) 選擇正確的偵錯工具，在篩選方塊中鍵入 chrome 或 edge 以篩選搜尋結果。

5. 選取具有正確主機通訊埠 (在此範例中為 localhost) 的瀏覽器處理序，然後選取 [連結]。

   連接埠 (例如 1337) 也可能出現在 [標題] 欄位中，協助您選取正確的瀏覽器執行個體。

   下列範例示範這會如何尋找 Microsoft Edge (Chromium) 瀏覽器。

   

   提示

   如果偵錯工具未連結，而且您看到訊息「無法啟動偵錯配接器」或「無法連結到處理序。 作業在目前狀態中不合法」，請先使用 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 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: '[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 (編譯器選項) 頁面。

使用專案設定來設定來源對應 (TypeScript 專案)

您也可以使用專案屬性來設定來源對應設定，方法是以滑鼠右鍵按一下專案，然後選擇 [專案] > [屬性] > [TypeScript 建置] > [偵錯]。

您可以使用下列專案設定。

• 產生來源對應 (相當於 tsconfig.json 中的 sourceMap)：產生對應的 .map 檔案。
• 指定來源對應根目錄 (相當於 tsconfig.json 中的 mapRoot)：指定偵錯工具應該尋找對應檔案的位置，而不是產生的位置。 如果執行階段 .map 檔案必須與 .js 檔案位於不同的位置，請使用此旗標。 指定的位置會內嵌於來源對應，以將偵錯工具導向至對應檔案所在的位置。
• 指定 TypeScript 檔案的根目錄 (相當於 tsconfig.json 中的 sourceRoot)：指定偵錯工具應該尋找 TypeScript 檔案的位置，而不是來源位置。 如果執行階段原始檔所在位置必須不同於設計階段時的位置，請使用此旗標。 指定的位置會內嵌於來源對應，以將偵錯工具導向至原始檔所在的位置。

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

從 Visual Studio 2019 開始，Visual Studio 僅提供 Chrome 和 Microsoft Edge (Chromium) 的偵錯支援。

不過，您無法自動叫用透過 Razor 語法 (cshtml、vbhtml) 所產生檔案的中斷點。 偵錯這類檔案時有兩種方法可供使用：

• 將 debugger; 陳述式放在您要中斷的位置：此陳述式會導致正在建立的動態指令碼停止執行並立即開始偵錯。

• 在 Visual Studio 中載入頁面並開啟動態文件：您需要在偵錯時開啟動態檔案、設定您的中斷點，然後重新整理頁面，才能運作此方法。 您可以根據使用的是 Chrome 或 Microsoft Edge (Chromium)，利用下列其中一個策略來尋找檔案：

  • 針對 Chrome，請移至 [方案總管] > [指令碼文件] > [您的頁面名稱]。

    注意

    使用 Chrome 時，您可能會收到「在 <指令碼> 標籤之間沒有可用的來源」訊息。 沒關係，您可以繼續偵錯。

  • 針對 Microsoft Edge (Chromium)，請使用與 Chrome 相同的程序。

如需詳細資訊，請參閱 Client-side debugging of ASP.NET projects in Google Chrome (Google Chrome 中 ASP.NET 專案的用戶端偵錯)。

相關內容

屬性、React、Angular、Vue