偵錯 TypeScript

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

JavaScript 原始碼對應支援

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 模式所指定的檔案，來尋找產生的原始碼。

用戶端偵錯

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 檔案，並選擇 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}"
    }
  ]
}

執行與偵錯檢視組態下拉式選單現在會顯示新的組態 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。請啟用原始碼對應並重新建置您的專案。

7/29/2026