偵錯 TypeScript

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

JavaScript 來源對應 (Source Map) 支援

TypeScript 偵錯支援 JavaScript 來源對應。若要為您的 TypeScript 檔案產生來源對應，請在編譯時使用 --sourcemap 選項，或將 tsconfig.json 檔案中的 sourceMap 屬性設為 true。

同時也支援內嵌式來源對應（一種將內容儲存為資料 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 檔案連結。

這會在 .vscode 資料夾中建立一個 launch.json 檔案，其中包含系統偵測到專案中的預設值。

{
  // 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 patterns) 指定的檔案，來尋找產生的原始程式碼。

用戶端偵錯

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 檔案以建立 launch.json 檔案，並選擇網頁應用程式 (Edge) 作為偵錯器，若您偏好 Chrome，也可選擇網頁應用程式 (Chrome)。

更新 launch.json，將本機檔案 URL 指定為 helloweb.html

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

執行與偵錯檢視的組態下拉式選單現在會顯示新的組態Launch Edge against localhost。如果您執行該組態，您的瀏覽器將會開啟您的網頁。在編輯器中開啟 helloweb.ts，點選左側邊界以新增中斷點（會顯示為紅色圓圈）。按下 F5 啟動偵錯工作階段，這會啟動瀏覽器並觸發您在 helloweb.ts 中設定的中斷點。

client-side debug breakpoint

常見問題

無法啟動程式，因為找不到對應的 JavaScript

這很可能是因為您沒有在 tsconfig.json 中設定 "sourceMap": true，或是沒有在 launch.json 中設定 outFiles，導致 VS Code Node.js 偵錯器無法將 TypeScript 原始程式碼對應至執行中的 JavaScript。請開啟來源對應並重新建置您的專案。

4/8/2026