TypeScript debug

【 TypeScript 】如何在 vscode 裡 debug

1. 建立 TypeScript 專案

要 debug 的話首先當然要先有檔案,建立 TypeScript 的專案流程可以參考:【 Node.js 】如何在 Node.js 中建立 TypeScript 的環境

2. 新增 tsconfig.json 設定檔

在建立專案時有一個步驟是用 tsc –init 指令新增 tsconfig.json 設定檔,該設定檔是用來讓 tsc 決定要用哪些設定來把 TypeScript 編譯成 JavaScript ,在終端機輸入 tsc –init 指令後,以下會是預設的設定 ( 把 comment 刪除後 ):

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

把設定檔修正為以下,才能在 Node.js 裡用 import 來引入模組,關於 Node.js 的模組歷史可以參考:webpack 新手教學之淺談模組化與 snowpack

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020"],
    "module": "commonjs",
    "moduleResolution": "node",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

3. 新增 vscode 的 debug 設定檔 ⏤ launch.json

接著就要來新增 vscode 的 debug 設定檔,才能開始 debug。

首先點選旁邊的 debug icon,點下去後再點擊 create a launch.json file. ,來產生設定檔:

TypeScript debug

點下去後會出現一些選項可以選擇,如果是要在後端 debug ,請選擇 Node.js:

TypeScript debug

點擊完後 vscode 就會自動產生一個 debug 的設定檔,裡面有個 preLaunchTask ,代表每次 debug 前會先執行這行指令,也就是用 tsc 把 TypeScript 編譯為 JavaScript,這邊不用做其他修改:

{
  // 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": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\src\\server.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ]
    }
  ]
}

4. 開始 debug

新增完設定檔後就可以準備開始 debug 了,但在 debug 前,要先點擊該專案的進入點檔案:

接著再點擊左邊的 debug icon,這時候會發現和剛剛沒有設定檔前的頁面不同,可以開始 debug 了:

點擊 play 的 icon ,vscode 就會進入 debug mode 了。

如果覺得我的文章有幫助的話,歡迎幫我的粉專按讚哦~謝謝你!

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端