Debugging typescript with source maps and webpack

I'm going to post an answer here. This answer may not work for you (See Step 5). It varies a lot from person to person. After so many days spent in research, robin-a-meade's post from GitHub was the one that nailed it.

Before starting, the main problem seems to lie in the source mapping's URL of inside the VS Code Debugging Configuration file, and how it (VS Code) sees the application. This is independent from any back-end stack you're using (E.g Express, .NET Core, Django, etc.). The only thing you need to be aware of, is that Google Chrome successfully loads the generated source map when your application is running.

Used:

• Visual Studio Code ver 1.13.1
• NodeJS 7.4.0
• Windows 10 64-bit
• Webpack 2.5 (Should apply for Webpack 3 as well)
• TypeScript 2.3

Install the Google Chrome Extension:

1) Click on the square icon on the left.

2,3) type "Debugger for Chrome" without commas and click install.

Configure the debugger:

4) Click on the bug icon.

5) Click on the gear icon. This will open "launch.json" which is used for configuring the debugging in Visual Studio Code.

Now. This is where it gets really tricky. This is the part that it may or may not work for you.

Again, thanks goes to robin-a-meade from GitHub whose code made it work:

6) Enter the following. This is going to launch a Google Chrome instance with http://localhost in the URL. Then, it will use the webpack:// path to search for the Webpack mappings. This is really tricky and you may have to try with different combinations to see which one works.

 {            "name": "Launch Chrome against localhost, with sourcemaps",            "type": "chrome",            "request": "launch",            "url": "http://localhost",            "sourceMaps": true,            "webRoot": "${workspaceRoot}",            "diagnosticLogging": true,            "sourceMapPathOverrides": {                "webpack:///./*": "${webRoot}/*"            }        }

If you're using Firefox, try using this one:

{            "name": "Launch Firefox",            "type": "firefox",            "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",            "request": "launch",            "reAttach": true,            "webRoot": "${workspaceRoot}",            "sourceMaps": "server",            "pathMappings": [                {                    "url":  "webpack:///",                    "path": "${webRoot}/"                }            ],            "url": "localhost"        }

Webpack ConfigurationAdd:

devtool : "source-map"

To your webpack configuration. This should go under the modules.export object.

Run/Build the project with Webpack; this should generate the source-map (Check if the source map is generated, otherwise nothing will work!):

Then you should be ready to go:Press the "Play button" in the debugging and it should be working!

Remember, any file that is not imported to your main .js file (where you have all of your imports and requires), will not be able to have a breakpoint set.

If that didn't work, check this list of URLs that can help you out.

1. https://github.com/angular/angular-cli/issues/2453 (Miracle page that helped me out)
2. Debug webpack bundled node ts with Visual Studio Code
3. VS Code: "Breakpoint ignored because generated code not found" error
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40 (Bottom of the page)
8. https://stackoverflow.com/a/42405563/1057052

For generating soruce maps:How do I generate sourcemaps when using babel and webpack?

To enable debugging with webpack, add devtool: "source-map" to your webpack.config.js.

To load files using require.js, change "module": "amd" in tsconfig.json. require.js does not support loading commonjs modules.