Configure launch.json in vscode for Webpack + TypeScript

!SetupDebuggingWithVSCodeWebpackTypeScript.md

How to setup Debugging with VSCode + Webpack + TypeScript

1. Activate sourceMaps if running with TypeScript
2. Make sure Chrome/Chromium runs with debugging on Port 9222 => Close Chrome and restart with the flag --remote-debugging-port=9222
3. If in attach-mode, an url, or better: urlFilter is required: "urlFilter": "http://localhost:4200/*"
4. Set the webRoot to your src folder: "webRoot": "${workspaceFolder}/src"
5. To fix the source map matching, add sourceMapPathOverrides:

   "sourceMapPathOverrides": {
     "webpack:///src/*": "${webRoot}/*"
   }
   

6. If not working immediately, use the "trace": "verbose"-option, reconnect the debugging and scroll up the console to the path matching, it will give debug logs on which parts are matched where to following the current override-rules.

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to chrome",
      "port": 9222,
      "urlFilter": "http://localhost:8080/*",
      "address": "localhost",
      "timeout": 1000,
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
      }
    }
  ]
}