Debugging config for renderer + main process

[lars-berger]

There have been quite a number of issues opened here related to debug configs, however, few of the solutions proposed are updated nor optimal. It's perhaps outside the scope of this repo and I don't believe the author has an obligation to address this, but I still feel like this is a good forum to get this figured out.

The config I'm using to debug currently 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.*"
        }
      }
    }
  ]
}

The issue I'm running into with the above config is that breakpoints aren't hitting in the render process (VSCode is showing the error Breakpoint ignored because generated code not found (source map problem?)). 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).

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.

Any ideas on how to get the Chrome debugger working on the render process?? I'd be happy to open a PR once a working debugging conf is found (if the author is OK with that).

[HaidStefan]

Thanks for you config. Thanks to you i can debug the main-process now. Would be awesome if we manage to get the debugger for the render process working.

[greg9504]

I can debug the renderer. I will note that our repository has not updated from upstream (this repo) in a while, however we are up to date with Electron (8.2.3) and Angular (9.1.2) as of a few days ago.

In package.json I've changed the starting of Electron to look like:

"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve --remote-debugging-port=9222",

Note the addition of a specific port.

start your app (npm start), if you have Chrome debugger tools open, close them as I believe only one debugger can be active.

Then using this config, attach to your app:
My vscode config looks like:

        {
            "name": "Electron: Renderer",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}/",
            "sourceMaps": true,
            "timeout": 30000,
            "trace": true
        }

Running 4.12.6 of the Chrome Debugger extension.

Note the biggest drawback of the VS debugging is that after you make a code change and the app automatically compiles and restarts you lose the debugger/Chrome connection. So you have to press the"disconnect" debugger button, then run your attach debugger config again. For this reason I mostly just use the built in Chrome debugging tools, and only use the VS Chrome debugger for main process.

If the above config doesn't work for you let me know and I'll try a fresh clone of this repo and see if I can get it to work.

[lars-berger]

Hey @greg9504 , replaced my npm script and added the renderer config above but I must be doing something wrong. The chrome debugger seems to be attaching correctly, but I'm still getting the Breakpoint ignored because generated code not found (source map problem?) error.

The branch with the config I tried out looks like this. Can't for the life of me figure out what I'm doing wrong, so figured I'd upload a screen recording in case as well. I'm also on v4.12.6 of the extension.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[greg9504]

I did try your repo and could not get it to work either. Everything looks very similar.
Not working:

webRoot/pathMapping: {"/":"C:\src\opensourcejs\angular-electron-with-debugging/"}
[16:41:00.040 UTC] SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in ng:///AppComponent.js
[16:41:00.040 UTC] SourceMap: creating for ng:///AppComponent.js
[16:41:00.040 UTC] SourceMap: sourceRoot:
[16:41:00.040 UTC] SourceMap: sources: ["ng:///AppComponent.js","ng:///AppComponent/template.html"]
[16:41:00.040 UTC] SourceMap: pathMapping: {"/":"C:\src\opensourcejs\angular-electron-with-debugging/"}
[16:41:00.040 UTC] SourceMap: no sourceRoot specified, using webRoot + script path dirname: C:\src\opensourcejs\angular-electron-with-debugging
[16:41:00.041 UTC] SourceMaps.scriptParsed: ng:///AppComponent.js was just loaded and has mapped sources: ["c:\src\opensourcejs\angular-electron-with-debugging\ng:\AppComponent.js","c:\src\opensourcejs\angular-electron-with-debugging\ng:\AppComponent\template.html"]

Working

webRoot/pathMapping: {"/":"C:\src\TAnalyzeNgx/"}
[16:34:17.460 UTC] SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in ng:///AppComponent/ɵfac.js
[16:34:17.460 UTC] SourceMap: creating for ng:///AppComponent/ɵfac.js
[16:34:17.460 UTC] SourceMap: sourceRoot:
[16:34:17.460 UTC] SourceMap: sources: ["ng:///AppComponent/ɵfac.js"]
[16:34:17.460 UTC] SourceMap: pathMapping: {"/":"C:\src\TAnalyzeNgx/"}
[16:34:17.460 UTC] SourceMap: no sourceRoot specified, using webRoot + script path dirname: C:\src\TAnalyzeNgx\AppComponent
[16:34:17.460 UTC] SourceMaps.scriptParsed: ng:///AppComponent/ɵfac.js was just loaded and has mapped sources: ["c:\src\TAnalyzeNgx\AppComponent\ng:\AppComponent\ɵfac.js"]

I'm not sure why yours does not work.

[bkavuncu]

After a long time trying to get renderer process to hit breakpoints in vs code, I finally got it.
(It is not the inlined readonly ones btw, Real breakpoints with hot reload, and updates with changes, real call stack, watches, variables)
Angular 9 btw, and windows 10
Here is my recipe:

Launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "timeout": 70000,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMapPathOverrides": { 
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",       // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
        "webpack:///./*":   "${workspaceFolder}/*",                    // Example: "webpack:///./src/app.js" -> "/Users/me/project/src/app.js",
        "webpack:///*":     "*",                               // Example: "webpack:///project/app.ts" -> "/project/app.ts"
        "webpack:///src/*": "${workspaceFolder}/*",   
       },
      "preLaunchTask": "start",
      "trace": true,
    }
  ],
}

tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start"
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

in package json you have to make ng to generate source maps for your code:

"start": "npm-run-all -p electron:serve ng:serve",
...
    "ng:serve": "ng serve --sourceMap=true",
...
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron .  --serve --remote-debugging-port=9222",

So when you run Electron:Renderer, through prelaunch task start, it will npm start electron, it will create sourcemaps for the angular, serve angular at 4200 and debugging at 9222, since webroot is set to /src/app/ when you hit breakpoint or "debugger;" it will show on the vscode correctly.

(BTW I do not have Electron :Main here, and dont use it , instead I have a prelaunch task start)

Here is my trial and error:

If you set wrong webroot, Breakpoints do not hit. But "debugger;" will hit but will show in other files. "debugger;" in app.component.ts will make a pause in main.js so web root is : /src/app as above is necessary.

As for the source map path overrides, with webroot: /src/app,

wrong sourcemap overrides will make you hit the "debugger;"s, but not breakpoint,

Also it will hit debuggers on a readonly source file which is reverse generated from inlined sourcemap. On this source file you can set breakpoints after debugger, see values but, when you make changes on original source file and hot reload, the regenerated source file will stay same and will not reflect changes. and thus will show wrong debugger locations. and still no breakpoints.

so as a result: "sourceMapPathOverrides" with above values, will enable hot reload, live changes and correctly working breakpoints

BTW I do not debug electron main from this and not interested because my main.ts is stale for me right now. so this does not include debugging electron side.

You need debugger for chrome extension for this to work.

Also if you do not want to see js and js.map files in vs code put:

    "files.exclude": {
        "**/*.js": {"when": "$(basename).ts"},
        "**/*.js.map": true
        },
        "explorer.confirmDragAndDrop": false,
        
}

in settings.json of vscode

and dont forget to exclude them

src/**/*.js
*.js.map

in your gitignore so they dont get uploaded to your repo.

one more thing I also put sourcemap:true and evalsourcemap:false in angular.json under serve, dont know if it helps

        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "angular-electron:build",
             "sourceMap": true,
             "evalSourceMap": false,
          },
          "configurations": {
            "dev": {
              "browserTarget": "angular-electron:build:dev",
            },
            "web": {
              "browserTarget": "angular-electron:build:web",
            },
            "production": {
              "browserTarget": "angular-electron:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-electron:build"
          }
        },

Best of luck, this vscode angular, electron, debugging was super annoying for me, hope you will make it work.

Edit: Multiple BrowserWindows:

So if you start debugging with prelaunchtask of electron, the initial window will be debugged.

If you comment out prelaunchtask, start electron manually (npm start) then run the launch, it will give you the option to connect the Browserwindow you like.

It will show on top similar to launch task shortcut.

From my understanding it can only debug one window at a time.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.