Electron-vue: Electron main and renderer process debug configuration

[Zvorykin]

I'm 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.

What am I doing wrong? Can somebody share debug configurations for VS Code or WebStorm?

[jtidwe11]

The devtools should allow you to debug the renderer out of the box. Just drop a break point in the console. I've looked and tried several different ones, but only managed to get the main process going, so that's what I'd do. Also see Microsoft's debug notes:
https://github.com/Microsoft/vscode-recipes/tree/master/Electron

[Seblor]

If people are still reading this, I found a way to debug the main process with sourcemaps.

First, in the webpack.main.config.js file, add the last line in the "Adjust mainConfig for development settings" block :

if (process.env.NODE_ENV !== 'production') {
    [...]
    mainConfig.devtool = '#cheap-module-eval-source-map';

Then, my launch.json config :

{
  "type": "node",
  "request": "attach",
  "name": "Attach to electron main",
  "port": 5858,
  "timeout": 30000,
  "sourceMaps": true,
  "outFiles": [
    "${workspaceRoot}/src/main/index.js"
  ]
}

Now you should be able to debug using the debugger keyword. I did not find a way to make the breakpoints work.

[MaverickMartyn]

@Seblor Thank you so much! :D
I have been looking for this for well over half a year, and had almost given up on it at this point.
You said your breakpoints don't work? Mine work just fine.
If you have a specific repo, I could try it out and see if we can figure out why.

[NoelDavies]

@MaverickMartyn my breakpoints don't work either

[MaverickMartyn]

@NoelDavies Do you have a repo where this occours?

[Nisthar]

Thanks a lot. My breakpoints also works fine. I think its because i am using webstorm.

[Nisthar]

Mine doesn't work any more. idk why.

[MaverickMartyn]

Mine doesn't work any more. idk why.

I just worked on this repo, where it seemingly worked fine for the main process: https://github.com/MaverickMartyn/keep
I used the following launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args" : ["."],
        "outputCapture": "std"
      }
    ]
  }

However it is still a bit finicky. I have had issues with breakpoints not being hit, if they are set before starting debugging.