Electron main and renderer process debug configuration - node.js

Question

I'm using that repo https://github.com/SimulatedGREG/electron-vue
and trying to set up VS Code debug configurations like this
{ //main
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"sourceMaps": true
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "attach",
"url": "http://localhost:9080",
"webRoot": "${workspaceRoot}/src"
}
and got messages like
Invalid responce {
"description": "node.js instance",
"devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"title": "node",
"type": "node",
"url": "file://",
"webSocketDebuggerUrl": "ws://127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e"
}
for main and
connect ECONNREFUSED 127.0.0.1:9229
for render processes.
I know that both main and renderer procs are served by webpack 3 and webpack-dev-server 2 but cannot find debug configurations.
Debugging main process using Chrome using link like chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/6c1d575a-d0f6-4ffa-9465-065ebc3d302c works but want to use VS Code.
What am I doing wrong? Can somebody share debug configurations for VS Code or WebStorm?

Answer 1

So this was a real pain to figure out, mainly because the vue electron boilerplate does some in-house management of the main and renderer process. The first challenge is to attach to the child process (main) as reliably as possible. The second challenge is to make sure breakpoints persist across sessions and things like that. This answer doesn't focus on the renderer process at all, because you can just debug that in the devtools console.
Put these two configurations in your launch.json, and add --no-lazy to the dev script in package.json to fix breakpoints. If you're just looking for the solution, you can probably stop reading here. If it didn't work, keep on reading.
{
"type": "node",
"request": "launch",
"name": "Electron: Main (npm)",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceFolder}/**/*.js"],
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"],
"outputCapture": "std",
"smartStep": true,
"sourceMaps": true,
"protocol": "inspector",
"port": 5858,
"timeout": 20000
},
{
"name": "Electron: Main (attach)",
"type": "node",
"request": "attach",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceFolder}/**/*.js"],
"skipFiles": ["init.js"],
"smartStep": true,
"sourceMaps": true,
"protocol": "inspector",
"port": 5858,
"timeout": 20000
}
The first one can be executed with no additional actions needed. It will run the script via npm, and attach directly to the sub process with inspect port 5858.
The second script lets you run npm run dev from a terminal, and then attach. It may be convenient to use this one, if you're more used to it.
Now I will explain why I have used all the settings, in case things change and you're wondering if this is outdated.
"cwd": "${workspaceFolder}",
I could not reliably run the session without doing this. It still worked sometimes though.
"outFiles": ["${workspaceFolder}/**/*.js"],
I could not debug any files without this on.
"outputCapture": "std",
I did not get any output from dev-runner.js if I didn't have this set.
"smartStep": true,
When I restarted the session (especially using the npm variant), the breakpoints got unset and black. This option actually fixed it, but looking an this issue, I suspect you shouldn't normally have to use this option.
"sourceMaps": true,
If you're seeing gibberish code, you may want to add the following:
/**
* Adjust mainConfig for development settings
*/
if (process.env.NODE_ENV !== 'production') {
mainConfig.devtool = 'source-map' // <- THIS
mainConfig.plugins.push(
new webpack.DefinePlugin({
__static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
})
)
}
This option helps with that.
"protocol": "inspector",
Might as well. Legacy doesn't work.
"port": 5858,
This is the port of the child process, spawned by dev-runner.js
"timeout": 20000
Since we're waiting for a child process to finish spawning, it may take longer than 10 seconds to launch and then attach. I set it to 20 seconds, but you are free to lower it if your PC is fast enough. (default is 10s)
Further references in the world of bleeding edge software.
VS Code version: 1.21
Electron version: 1.8.7
Chromium: v59
Node: 8.2.1

Answer 2

you may need to use new inspect protocol in vs code with latest electron binary. It'll looks like
{
"type":"node",
"request":"launch",
"name":"Electron Main",
"runtimeExecutable":"${workspaceRoot}/node_modules/.bin/electron",
"args":[
"${workspaceRoot}/main.js",
"--remote-debugging-port=9333" //Set debugging port for renderer process
],
"protocol":"inspector" //Specify to use v8 inspector protocol
}
important piece is you are specifying protocol to use inspect instead of old node debug. I've wrote summary around this while ago at https://kwonoj.github.io/en/post/multi-target-dbg-electron-vscode/ .