Debugging Electron with VSCode - Source Map generation

[greg9504]

Steps to reproduce and a minimal demo of the problem
Note I am running on Windows (8.1)
follow steps to setup and build in readme
open project in Visual Studio Code, I'm using following version:

Version 1.10.2
Commit 8076a19fdcab7e1fc1707952d652f0bb6c6db331
Date 2017-03-08T14:02:52.799Z
Shell 1.4.6
Renderer 53.0.2785.143
Node 6.5.0

On debug tab select "Launch Electron App" for the configuration.
I've edited the configuration slightly, changing the path to runtimeexecutable and adding the outFiles attribute:

{
			
            "name": "Launch Electron App",
            "type": "node",
            "program": "${workspaceRoot}/dist/dev/main.desktop.js", // important
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}/dist/dev/",
            // next line is very important
            //"runtimeExecutable": "${env.APPDATA}/npm/node_modules/electron-prebuilt/dist/electron.exe",
			"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
			"outFiles": [
				"${workspaceRoot}/dist/**/*.js"
			],
            "runtimeArgs": [],
            "env": { }, 			
            "sourceMaps": true
        }

Open main.desktop.ts and set a breakpoint ~ line 43.
Press F5 to start debugging.
The Electron app will start but the breakpoint will not be hit and will display greyed out. Hovering over the breakpoint you'll see:

Breakpoint ignored because generated code not found (source map problem?).

Being new to Electron/js development took me a bit of digging but I finally came across the comments in file:
/tools/tasks/seed/build.js.dev.ts
~line 66:

// Use for debugging with Webstorm/IntelliJ
        // https://github.com/mgechev/angular-seed/issues/1220
//  .pipe(plugins.sourcemaps.write('.', {
          //    includeContent: false,
          //    sourceRoot: (file: any) =>
          //      relative(file.path, Config.PROJECT_ROOT + '/' + Config.APP_SRC).replace(sep, '/') + '/' + Config.APP_SRC
          //  }))

I figured this applied to VS Code too. Uncommenting those lines (as well as line 5) did produce the .js.map files however the paths generated in those files were not correct. If you look inside the .js.map file you'll see:

file":"main.desktop.js","sourceRoot":"../src/client"

I came across this issue: mgechev/angular-seed#1220
Following the solution in there to generate the source maps, changing the above code to:

.pipe(plugins.sourcemaps.write('.', {
includeContent: false,
sourceRoot: (file: any) =>
relative(Config.APP_DEST, Config.PROJECT_ROOT) + '/' + Config.APP_SRC
}))

Generated source maps with the correct paths:

file":"main.desktop.js","sourceRoot":"../../src/client"

After rebuilding I was now able to debug using VS Code. It's important that the outFiles in the launch configuration is also set, otherwise even with the .js.map files debugging will not work for the main process.

For completeness here is my launch configurations for debugging the main and renderer process for Electron (renderer process requires Debug tools for Chrome installed in VS Code):

{
			
            "name": "Launch Electron App",
            "type": "node",
            "program": "${workspaceRoot}/dist/dev/main.desktop.js", // important
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}/dist/dev/",
            // next line is very important
            //"runtimeExecutable": "${env.APPDATA}/npm/node_modules/electron-prebuilt/dist/electron.exe",
			"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
			"outFiles": [
				"${workspaceRoot}/dist/**/*.js"
			],
            "runtimeArgs": [],
            "env": { }, 			
            "sourceMaps": true
        },
		{
            "name": "Debug Renderer Process",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
            "runtimeArgs": [
              "${workspaceRoot}/dist/dev",
              "--enable-logging",
              "--remote-debugging-port=9222"
            ],
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/dist/dev"
        }

I think on non windows platforms the runtimeExecutable doesn't need the .cmd on the end.

Perhaps I'm missing something obvious, but this was the only way I could get debugging inside VS Code to work.