Debugging Typescript in VSCode

Question

I see a lot of information out there for what seems to be older versions of VSCode (v1.16.1 - latest as of this post) or attributes in the launch.json file that are deprecated.

I've tried a myriad of config attributes, some older information out there on GitHub forums (some are not viable since the attributes are gone, or deprecated). Trying to debug and hit breakpoints directly in the Typescript code within VSCode.

Currently, here is my tsconfig.json file:

    {
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",
    "baseUrl": "src",
    "module": "commonjs",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "include": [
      "src/**/*.ts"
  ],
    "exclude": [
      "node_modules"
  ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

My launch.json file for Visual Studio Code is:

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Launch Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:3000/",
          "sourceMaps": true,
          "trace": true,
          "webRoot": "${workspaceRoot}/src",
          "userDataDir": "${workspaceRoot}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
          }
      }
  ]
}

Chrome opens up, but the standard "...refused connection" page is displayed:

Right now, just trying to debug one of those typical "admin templates". I can run it perfectly fine through the terminal: ng serve

However, debugging this Angular app is eluding me. Worth noting that I'm completely new to Angular, Typescript and VSCode in general.

HaaLeo · Accepted Answer · 2018-02-04 20:26:02Z

2

Have you tried to specify the outFiles attribute of your configuration to something like:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

According to this docs the setting "sourceMaps": true tells vscode to map the generated *.js with the *.ts files. And furthermore you need to set the outFiles attribute to tell vscode where it should look for those *.js files if they are not in the same direcotry.

From the docs:

If the generated (transpiled) JavaScript files do not live next to their source but in a separate directory, you must help the VS Code debugger locating them by setting the outFiles attribute.

answered Feb 4, 2018 at 20:26

HaaLeo

12.1k5 gold badges51 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Debugging Typescript in VSCode

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related