Add launch.json for debugging main and renderer processes

[billyzkid]

I got debugging working in VS Code for both the main and renderer processes by adding this launch.json file.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Main Process",
      "request": "launch",
      "type": "node",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "skipFiles": ["<node_internals>/**"],
      "env": {
        "REMOTE_DEBUGGING_PORT": "9222"
      }
    },
    {
      "name": "Renderer Process",
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}/src/renderer",
      "port": 9222,
      "timeout": 30000
    }
  ],
  "compounds": [
    {
      "name": "All Processes",
      "configurations": ["Main Process", "Renderer Process"],
      "presentation": {
        "order": 0
      }
    }
  ]
}

Then in vite.config.ts I modified the returned configuration as follows:

export default defineConfig(({ command, mode }) => {
  // Enable sourcemaps in development mode
  const sourcemap = mode === "development" ? "inline" : false;

  // Modify the default electron startup arguments to include --remote-debugging-port=9222
  const startupArgv = command === "serve" ? [".", "--no-sandbox"] : undefined;

  if (startupArgv !== undefined && process.env.REMOTE_DEBUGGING_PORT !== undefined) {
    startupArgv.push(`--remote-debugging-port=${process.env.REMOTE_DEBUGGING_PORT}`);
  }

  return {
    ...
    build: {
      ...
      sourcemap
    },
    plugins: [
      ...
      electron([
        {
          ...
          vite: {
            ...
            build: {
              ...
              sourcemap
            }
          },
          onstart: (options) => options.startup(startupArgv)
        },
        {
          ...
          vite: {
            ...
            build: {
              ...
              sourcemap
            }
          },
          onstart: (options) => options.reload()
        }
      ]),
      renderer()
    ]
  };
});

[Mafi78]

Thank you very much for your post. I tried it and i can create Breakpoints in the main process, but i am not able to create breakpoints in the renderer process ?
I also get this exception:
Exception has occurred: Error: Readers took over 1500ms. Possible deadlock?
at devtools://devtools/bundled/ui/components/render_coordinator/render_coordinator.js:1:2331
in one renderer process.
Do you have any hint how to overvome this exception ?