Debugging Electron render process with VSCode Chrome debugger

Question

Setting up an angular + electron debug configuration and it's slowly but surely crushing my soul. For some reason breakpoints aren't hitting in the render process (VSCode is showing the error Breakpoint ignored because generated code not found (source map problem?)").

My debug config looks like this (full repo is here):

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron: Main",
      "protocol": "inspector",
      // Prelaunch task compiles main.ts for Electron & starts Angular dev server.
      "preLaunchTask": "Build: All",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9223", "--serve", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 30000,
      "urlFilter": "http://localhost:4200/*",
      // Source map overrides are copied from Angular CLI debugging recipe.
      // See: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      // The main process should be started before renderer to prevent timeout.
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build: All",
      "type": "shell",
      "command": "npm run electron:serve-tsc && ng serve",
      "isBackground": true,
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^.*",
          "endsPattern": "^.*Compiled successfully.*"
        }
      }
    }
  ]
}

I can debug the main process just fine with the above config, which is awesome. The chrome debugger also seems to be attaching correctly (can see the outputs in the debug console), but sadly breakpoints aren't hitting.

Just adding debugger; statements to the Angular code lets me debug in the chrome devtools in the Electron window, but it would be far far better to debug inside VSCode.

Is this even possible to do??

Answer 1

(For anyone ending up here) You need to:

1. Enable sourcemaps on your tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    ...
  }
}

2. Add sourcemaps location on your launch configuration(s), for example:

"outFiles": [ "${workspaceRoot}/node_modules/**/*.js" ]

(from https://github.com/Microsoft/vscode-node-debug/issues/82#issuecomment-290642560)