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?

Lebanon

What exactly do you want to acheive? You've already put all the debug configurations in your launch.json. starting the app will surely put your application into debugging mode in vscode. – Odetteodeum

I'm want to debug and set break points on the ts files, what I cannot actually do right now. – Lebanon

You can always add a breakpoint on any of your code statements by clicking the left adjacent to the statements on which you want your code to break. A small vertical bar on the left side of editor just after the line numbers is just dedicated to the breakpoints. – Odetteodeum

I know how to set breakpoints... don't insult me like that :( Thats not the problem. I can set breakpoint but the debugger will never reach them so thats why I asked the question, for finding a way to acheive debugging and restart when changes are made. – Lebanon

To be very honest, i never meant to insult and m sorry if that is perceived actually. But the question is quite unclear as a reader. – Odetteodeum

Talk about biting a hand that was only trying to help. It really is in your best interests to motivate all of us to continue to try to help you. – Tchad

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.

Dilettantism

This pointed me in the right direction. I had to tweak my watch:debug task: "watch:debug": "nodemon -e ts,tsc --exec\"node --inspect=5858 -r ts-node/register ./src/server.ts\"" Without the extra set of quotes, the npm command wouldn't run for me – Moult

This worked for me. I need to run through docs again to figure out what some of these switches mean. – Cantonese

Straight to the point. Works like a charm! – Baritone

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

Impresario

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
        }

Blubbery

Answer 4

This one works for me. I'm using Typescript and Node together.

This is my 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}/src/index.ts",
            "preLaunchTask": {
                "type": "typescript",
                "tsconfig": "tsconfig.json",
                "option": "watch",
                "problemMatcher": [
                    "$tsc-watch"
                ],
                "group": "build"
            },
            "outFiles": [
                "${workspaceFolder}/lib/**/*.js"
            ],
            "runtimeExecutable": "nodemon",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

Saccule

What does your nodemon.json and tsconfig.json look like? – Dichogamy

Also what does your package.json look like? – Dichogamy

Answer 5

Quite unclear about what exactly you're asking but this might be helpful. Try adding these configurations in your

{
 "name": "Current TS File",
 "type": "node",
 "request": "launch",
 "args": ["${relativeFile}"],
 "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
 "sourceMaps": true,
 "cwd": "${workspaceRoot}",
 "protocol": "inspector",
}

This configuration:

• Sets up a node task that starts the currently open file in VS Code (the${relativeFile} variable contains the currently open file)
• Passes in the --nolazy arg for node, which tells v8 to compile your code ahead of time, so that breakpoints work correctly
• Passes in -r ts-node/register for node, which ensures that ts-node is loaded before it tries to execute your code
• Sets the working directory to the project root - ${workspaceRoot}
• Sets the node debug protocol to V8 Inspector mode.

I doubt you're missing the

 "runtimeArgs": ["--nolazy"]

In you launch configuration.

Odetteodeum

Ok that's works only if I start it when I'm on the 'src/app.ts' files, but it won't restart when I edit changes on the file and save, like the previous configurations. – Lebanon