Debug and restart on changes typescript vscode

Question

I want to debug and set breakpoints on typescript files and restart the debugger when changes are made (like nodemon watch for changes) with VSCode debugger configuration.

Until now I acheived running via VSCode and restart on changes without debugging.

Here's my launch.json:

{
    "name": "Launch Typescript Server Debugger",
    "request": "launch",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "stopOnEntry": false,
    "program": "${workspaceRoot}/node_modules/nodemon/bin/nodemon",
    "args": [
      "--watch",
      "src/**/*.ts",
      "--ignore",
      "src/**/*.spec.ts",
      "--exec",
      "${workspaceRoot}/node_modules/.bin/ts-node",
      "--inspect",
      "src/app.ts"
    ],
    "restart": true,        
    "env": { "NODE_ENV": "dev"}
  }      

Any ideas?

Answer 1

Wonder why so many WTF comments on this completely natural question. Here is how I made it:

We need nodemon to restart our app on changes, we need ts-node/register to run our typescrypt, and we need to setup vscode's launcher script to reattach debugger after app being recompiled. So install nodemon, ts-node and add this script to package.json:

"watch:debug": "nodemon --inspect=5858 -e ts,tsx --exec node -r ts-node/register ./src/index.ts"

Then in launch.json add configuration:

{
  "name": "Attach to Process",
  "type": "node",
  "request": "attach",
  "restart": true,
  "port": 5858,
  "outFiles": [],
  "sourceMaps": true
},

That's all, now I can start my app with yarn watch:debug and attach the debugger. If you still facing problems, check my Github repo here.

Answer 2

you should definitely check out ts-node-dev which IMHO is faster than nodemon in terms of watching compilation because it shares Typescript compilation process between restarts. Below is the sample vscode launch.json config to let you set break point(debug) as well as reload on change.

{
  "version": "1.0.0",
  "configurations": [
    {
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "name": "Local Server",
      "restart": true,
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
      "skipFiles": [ "<node_internals>/**" ],
      "type": "node",
      "runtimeArgs": [ "--respawn" ],
      "args": [ "${workspaceFolder}/src/script/local.server.ts" ]
    }
  ]
}

Now you can press F5 or use the debug pane to start debugging/live-reloading.

I wrapped up a small library for this if you happen to develop with aws lambda

https://github.com/vcfvct/ts-lambda-local-dev

Answer 3

Without using ts-node, you can restart on change with this config

task.json

This task watch ts files and compiles them on save

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "typescript",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": ["$tsc-watch"],
            "option": "watch"
        }
    ]
}

then in launch.json,

nodemon reload on change (built files are in dist directory in my case)

       {
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "nodemon",
            "args": ["--watch", "dist"],
            "name": "Debug TypeScript in Node.js",
            "preLaunchTask": "typescript",
            "program": "${workspaceFolder}/start.js",
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
            "restart": true
        }