除錯 TypeScript

Visual Studio Code 透過內建的 Node.js 偵錯程式和 Edge 和 Chrome 偵錯程式支援 TypeScript 除錯。

JavaScript 源對映支援

TypeScript 除錯支援 JavaScript 源對映。要為 TypeScript 檔案生成源對映，請使用 --sourcemap 選項編譯，或在 tsconfig.json 檔案中將 sourceMap 屬性設定為 true。

內聯源對映（一種將內容儲存為 data URL 而不是單獨檔案的源對映）也受支援，但尚未支援內聯原始碼。

有關源對映的簡單示例，請參閱 TypeScript 教程，其中介紹了使用以下 tsconfig.json 和 VS Code 預設 Node.js 除錯配置除錯簡單的“Hello World”Node.js 應用程式。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

對於更高階的除錯場景，您可以建立自己的除錯配置 launch.json 檔案。要檢視預設配置，請轉到執行和除錯檢視（⇧⌘D (Windows、Linux Ctrl+Shift+D)），然後選擇建立 launch.json 檔案連結。

這將建立一個 launch.json 檔案，位於 .vscode 資料夾中，其中包含專案檢測到的預設值。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/helloworld.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

VS Code 已確定要啟動的程式 helloworld.ts，將構建包含在 preLaunchTask 中，並告知偵錯程式到哪裡查詢生成的 JavaScript 檔案。

launch.json 具有完整的 IntelliSense，提供建議和資訊，以幫助您瞭解其他除錯配置選項。您還可以使用右下角的新增配置按鈕將新的除錯配置新增到 launch.json。

launch.json IntelliSense

另請參閱 Node.js 除錯，瞭解示例和進一步的說明。

對映輸出位置

如果生成的（轉譯的）JavaScript 檔案不與原始檔位於同一位置，您可以透過在啟動配置中設定 outFiles 屬性來幫助 VS Code 偵錯程式找到它們。每當您在原始原始檔中設定斷點時，VS Code 都會嘗試透過搜尋 outFiles 中 glob 模式指定的檔案來查詢生成的源。

客戶端除錯

TypeScript 非常適合編寫客戶端程式碼和 Node.js 應用程式，您可以使用內建的 Edge 和 Chrome 偵錯程式除錯客戶端原始碼。

我們將建立一個小型 Web 應用程式來演示客戶端除錯。

建立一個新資料夾 HelloWeb，並新增三個檔案：helloweb.ts、helloweb.html 和 tsconfig.json，內容如下：

helloweb.ts

let message: string = 'Hello Web';
document.body.innerHTML = message;

helloweb.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello Web</title></head>
    <body>
        <script src="out/helloweb.js"></script>
    </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

執行 tsc 構建應用程式，然後透過在瀏覽器中開啟 helloweb.html 來進行測試（您可以右鍵單擊檔案資源管理器中的 helloweb.html，選擇複製路徑，然後貼上到瀏覽器中）。

在“執行和除錯”檢視（⇧⌘D (Windows、Linux Ctrl+Shift+D)）中，選擇建立 launch.json 檔案，然後選擇Web App (Edge) 作為偵錯程式，或者如果您偏好，可以選擇Web App (Chrome)。

更新 launch.json 以指定 helloweb.html 的本地檔案 URL。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "file:///C:/Users/username/HelloWeb/helloweb.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

“執行和除錯”檢視的配置下拉選單現在將顯示新配置啟動 Edge 應用程式。如果您執行該配置，您的瀏覽器將啟動並顯示您的網頁。在編輯器中開啟 helloweb.ts，然後單擊左側邊欄以新增斷點（它將顯示為一個紅點）。按 F5 啟動除錯會話，該會話將啟動瀏覽器並命中 helloweb.ts 中的斷點。

client-side debug breakpoint

常見問題

由於找不到相應的 JavaScript，無法啟動程式。

您很可能未在 tsconfig.json 中設定 "sourceMap": true，或者在 launch.json 中未設定 outFiles，導致 VS Code Node.js 偵錯程式無法將您的 TypeScript 原始碼對映到正在執行的 JavaScript。請啟用源對映並重新構建您的專案。

12/10/2025