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.

Answer 1

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.