CODEWITHSUNDEEP
typescriptdebuggingvisual-studio-codevscode-tasks
importantquestion
importantquestion

Reputation: 111

Debug and restart on changes typescript vscode

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?

Upvotes: 10

Views: 10816

Answers (5)

LeOn - Han Li
LeOn - Han Li

Reputation: 10194

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

Upvotes: 7

Ali Shah lakhani
Ali Shah lakhani

Reputation: 105

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"
        }
    ]
}

Upvotes: 1

Mickael Lecoq
Mickael Lecoq

Reputation: 241

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
        }

Upvotes: 1

Anton Pegov
Anton Pegov

Reputation: 1474

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.

Upvotes: 20

Maddy Blacklisted
Maddy Blacklisted

Reputation: 1190

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.

Upvotes: 0

Related Questions