如何在VSCode上進行TypeScript Debugging

發表於 更新於 Disqus：

前言

日常工作上經常性使用VSCode這款原始碼編輯器做為開發工具，但大部份都只用來寫寫代碼、透過擴充套件highlight代碼，以及進行相關編輯、搜尋、取代等文書工作，甚少直接使用編輯器來運行程式，這次來記錄一下如何使用內建的Debug功能進行Typescript的Debugging。

參考內容：
https://code.visualstudio.com/docs/editor/debugging

測試代碼

日常在進行除錯或是閱讀代碼時，經常需要在不同的程式碼檔案中進行切換，腦中還需要記憶各種不同的變數以及執行流程，稍微不注意就會需要重頭來過。

下面代碼我是近期在研究的colyseus開源專案，正在理解該專案的技術是如何做到C/S架構之間資料狀態同步的這件事，接下來我們試著使用VSCode Debug功能來追蹤程式碼運行的方式。

首先準備一段測試代碼，先克隆colyseus/schema下來，在根目錄隨意取個test.ts檔名做為ts-node執行時進入點：

Imgur

Debug功能參數設定

使用Shift + Command + D切換至Run and Debug選單功能，若當前專案沒有launch.json設定，可以直接點選創建內容。

Image

因為是運行Typescipt專案，選取Node.js

Image

會出現json格式的預設內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/test.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

我們可以根據自身需要調整設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Test Example",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
            "args": [
              "test.ts"
            ],
            "cwd": "${workspaceRoot}",
        }
    ]
}

執行方式

接著在程式碼區塊標注上追蹤用的中斷點，點選F5或執行按鈕

Image

VSCode會進入Debugging模式，並將執行程式環境中的變數、上下文內容等資料呈現在左側資料列表中。

Image

後續的操作可以通過工具列或是快速鍵進行操作

Image

  • Continue / Pause F5
  • Step Over F10
  • Step Into F11
  • Step Out ⇧F11
  • Restart ⇧⌘F5
  • Stop ⇧F5