Main Process

Fill launch.json with the following.

{"version":"0.2.0","configurations":[{"name":"Debug Main Process","type":"node","request":"launch","cwd":"${workspaceRoot}","runtimeExecutable":"${workspaceRoot}/node_modules/.bin/electron","windows":{"runtimeExecutable":"${workspaceRoot}/node_modules/.bin/electron.cmd"},"program":"${workspaceRoot}/main.js","protocol":"inspector",}]}

The setting is pretty self-explanatory, use the electron in node_modules to run main.js.
If you go to the Debug View and run Debug Main Process, you should see the code stopping
at the breakpoints in main.js.

Renderer Process

Making Renderer process work involves more effort, but as most of Electron App's code
lives in Renderer Process, it is of more interest.

First, a high-level explanation as to how we'll make it work. Electron has a launch flag
--remote-debugging-port, which lets you specify a port for remote debugging. The language
spoken at this port is Chrome Debugging Protocol,
and VS Code has an extension that just handles that: Debugger for Chrome.

Setting up

Go to main.js and comment out this line:

mainWindow.webContents.openDevTools()

Remote debugging doesn't work with multiple DevTools clients. We'll use the debugger in VS Code
instead of Electron's DevTools.

Add some code to renderer.js

Debugging

I added two breakpoints in renderer.js, and ran Debug Renderer Process in the Debug View.

Electron will stop on the second breakpoint if I click anywhere in the window:

However, it wouldn't hit the first breakpoint. The reason is Debugger for Chrome would
first launch Electron, and try to attach to the running process to debug it. When it
successfully attached itself, the first console.log had already been executed.

The solution is to go to the Electron window and press cmd+r to reload, Electron will
re-execute the renderer and hit the breakpoint.

Transpiling

Most modern Web apps are written in languages that transpile to JavaScript. If sourcemaps are
generated during transpilation, we can debug the original code in VS Code.