Chrome VSCode debugger doesn't stop in Typescript file

Question

I am trying to use the VS Code Chrome debugger to debug Angular2 (2.0.0-beta.9) and Typescript (v1.8.7). I set a breakpoint in the ts file, but the debugger displays js. The debugger shows ts when the entire application is in the same folder, but does not behave correctly when the application consists of subfolders. At first I thought that he could not resolve the comparison, but I have diagnostics turned on, and I see that the paths are resolved correctly.

Here is 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" ] } 

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 several times.

You have already enabled diagnosticLogging in launch.json , which means you should have these lines 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 find your source code.

Then you add the sourceMapPathOverrides entry to launch.json to help her 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 the way it is turned on has changed. diagnosticLogging been replaced by trace , which has exactly one valid value, namely trace .

Thus, your installation 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 a lot of output, including lines starting with SourceMap: mapping , which you can use to build the correct set of sourceMapPathOverrides , as described above.