如何在Visual Studio Code中成功调试打字稿？

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?

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

5. Start your Angular app by running ng serve in your favourite terminal.

6. 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.