How do you debug typescript in Visual Studio Code successfully?

Question

I notice if you are using Node Package Manager generally you can have your package.json have something like this:

(dependencies and devDependencies omitted)..
"scripts": {
    "start": "concurrently \"npm run tscwatch\" \"npm run lite\" ",
    "tsc": "tsc",
    "tscwatch": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  }

Then you just get to the level of the folder you are at and type in

npm install

Then

npm start

And lite server hosts your application and typescript compiles to javascript. Provided that you have ran the equivalent of your typescript configurations and have a valid tsconfig.json. That aside I am wanting to debug the Typescript and just running into wall after wall getting it working. I know you can add 'launch.json' that VS Code uses to do MANY types of abilities to start programs. And a lot of them work fine for simple apps I find online, but not Angular as I am using it. But when I try to do an NPM Start in the launch.json like:

 {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM ProAngular Example",
        "runtimeExecutable": "npm",
        "args": ["${relativeFile}"],
        "runtimeArgs": [
            "start"
        ]
    }

It will run but then attempt to open Visual Studio Professional(may not be the case for others) and then have an error like: "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:(port)). I have tried other configs for NPM for launch and other things. I just want to debug the Typescript when it is done with Angular, is that possible in VS Code?

your title says visual studio code while the text says visual studio, please figure out which one you are using it matters a lot for the response. — toskv
– toskv, Commented Dec 5, 2017 at 21:23
It is Visual Studio Code, it is OPENING Visual Studio inadvertently. Don't know why it does that with the config I use. — djangojazz
– djangojazz, Commented Dec 5, 2017 at 21:26
Why do you specifically need to debug in Visual Studio Code? Debugging using the Chrome developer tools debugger is quick and easy and that's why most developers prefer to do it that way. — Chris Halcrow
– Chris Halcrow, Commented Dec 6, 2017 at 5:30

Yaser · Accepted Answer · 2017-12-06 01:05:53Z

1

Follow the below instructions in VSCode:

1- Download the latest release of VS Code and install the Chrome debugger

2- Make sure Chrome is at least version version 59 (see issue)

3- Create your Angular app using angular-cli

4- Create a launch.jsonfile to configure the VS Code debugger and put it inside .vscode in your root folder.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng serve",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng test",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

Start your Angular app by running ng serve in your favourite terminal.
Start debugging in VS Code by pressing F5 or going to the debug section select Launch Chrome with ng serve followed by clicking the green debug icon.

edited Dec 6, 2017 at 1:05

answered Dec 6, 2017 at 1:00

Yaser

5,7391 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

djangojazz Over a year ago

This works sort of. I still need to ensure the Typings config is set to do mappings. I need to run NPM start first before this will attach correctly. But once all that is done it will work. I was hoping though that there was a way to do this with NPM start launch config. Point 3 seems to be an aside as I did not have to have it and your point 4 really only needs the first config to effectively debug Typescript. Other than that though your config will attach effectively to the Typescript so if no one provides anything better you get the answer.

Yaser Over a year ago

You can have ng server in your package.config and then run npm start before debug, I will add it to answer. and your're right typescript mapping is needed but it isn't related to VSCode debugging, that is necessary even if you want to debug in developer tools.

Anna Lee Over a year ago

I was struggling with this, it helps a lot. if you do not mind, could I ask why put # after localhost:4200?

Collectives™ on Stack Overflow

How do you debug typescript in Visual Studio Code successfully?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related