🚀 在 VS Code 中免費取得 ！

偵錯 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 應用程式 (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}"
    }
  ]
}

[執行與偵錯] 檢視組態下拉式清單現在會顯示新的組態 [針對 localhost 啟動 Edge]。如果您執行該組態，您的瀏覽器將會啟動並載入您的網頁。在編輯器中開啟 helloweb.ts，然後按一下左邊裝訂邊以新增中斷點 (會顯示為紅色圓圈)。按下 F5 以啟動偵錯工作階段，這會啟動瀏覽器並在 helloweb.ts 中叫用您的中斷點。

client-side debug breakpoint

常見問題

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

您可能未在 tsconfig.json 中設定 "sourceMap": true 或在 launch.json 中設定 outFiles，而且 VS Code Node.js 偵錯工具無法將您的 TypeScript 原始碼對應至執行的 JavaScript。開啟原始碼地圖並重建您的專案。

04/03/2025