VSCode Chrome debugger not stopping in Typescript file

Question

I'm trying to use the VS Code Chrome debugger to debug Angular2 (2.0.0-beta.9) & Typescript (v1.8.7). I'm setting the break point in the ts file but the debugger is displaying the js. The debugger does show the ts when the whole application is in one folder, but doesn't behave correctly when the application is composed of subfolders. At first I thought it wasn't able to resolve the mapping but I have diagnostics turned on and can see that the paths are being properly resolved.

Here's an example from the diagnostic window:

›Paths.scriptParsed: resolved http://localhost:3000/bin/hero/hero.service.js to c:\MyDev\ng2\bin\hero\hero.service.js. webRoot: c:\MyDev\ng2
›SourceMaps.createSourceMap: Reading local sourcemap file from c:\MyDev\ng2\bin\hero\hero.service.js.map
›SourceMap: creating SM for c:\MyDev\ng2\bin\app.component.js
›SourceMap: no sourceRoot specified, using script dirname: c:\MyDev\ng2\bin
›SourceMaps.scriptParsed: c:\MyDev\ng2\bin\app.component.js was just loaded and has mapped sources: ["c:\\MyDev\\ng2\\app\\app.component.ts"]
›SourceMaps.scriptParsed: Resolving pending breakpoints for c:\MyDev\ng2\app\app.component.ts

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "bin"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

The section from launch.json:

{
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/index.html",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "diagnosticLogging": true
}

Answer 1

Unfortunately, the correct mapping of your source code to the Webpack file has changed a few times.

You already have diagnosticLogging turned on in your launch.json, which means you should have lines like these in your JavaScript console:

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts

This should give you a clear idea of where it is trying to search for your source code.

Then you add a sourceMapPathOverrides entry to the launch.json to help it find your files. It should look something like this:

"sourceMapPathOverrides": {
  "webpack:///./*": "${workspaceRoot}/SourceFolder/*"
},

Obviously, replacing SourceFolder with the actual path.

Edit: In 2019, this is still valid, but how you enable it has changed. diagnosticLogging has been replaced by trace, which has exactly one valid value, namely trace.

So your setup will look like this:

{
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/index.html",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "trace": "verbose"
}

This will give you lots of output, still including rows starting with SourceMap: mapping, which you can use to build the correct set of sourceMapPathOverrides as described before.