編輯

除錯 TypeScript

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

JavaScript source map 支援

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

內聯 source map（將 source map 內容作為資料 URL 儲存而不是存為單獨檔案）也受支援，但內聯原始檔尚不支援。

關於 source map 實際應用的一個簡單示例，請參閱 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 應用 (Edge) 作為偵錯程式，如果你願意，也可以選擇 Web 應用 (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。請開啟 source map 並重新構建你的專案。

09/11/2025