I’m working with Electron Forge, Typescript & Vite in Webstorm today and it was a slight pain in the ass to get the Jetbrains debugger working, so I wrote this short tutorial to save everyone else the hassle.

Electron consists of a main process which is basically a local Node.js server that can interact with the operating system, as well as one or more rendering processes which are basically browser windows. These are entirely separate processes and the steps to get the debugger working are different for both of them.

I haven’t been able to figure out how to make Electron’s renderer process wait until the debugger is connected, so you’ll miss any breakpoints until the debugger is attached. For me this isn’t a dealbreaker because I can just reload the renderer process once the debugger is attached. Other than that I got it all working.

Debugging the main process

If you aren’t using Typescript, debugging the main process should probably work out of the box (although I haven’t checked). If you are using Typescript there’s just one thing that’s keeping the debugger from working by default: No sourcemaps. Sourcemaps help the debugger keep track of how the original Typescript relates to the compiled Javascript. Without them the debugger will be very unhappy.

To generate sourcemaps, make the following changes:

1. In tsconfig.json, ensure inlineSources and sourcemaps are true:

// tsconfig.json
{
  "compilerOptions": {
    "inlineSources": true,  // necessary for debugging in Webstorm
    "sourcemaps": true
    // ... Lots and lots of other options
  }
}

2. If you’re using Vite, ensure build.sourcemap is true for each vite.{something}.config.ts file:

// vite.{something}.config.ts
// (where something is "main", "preload" & "renderer")

// ... Imports & stuff

export default defineConfig({
  build: {
    sourcemap: true
  }
  // ... Maybe some other options
});

If you’re using Webpack or anything other than Vite, you’ll have to figure out that second step on your own.

Debugging the renderer process

To debug the renderer process we need to tell Electron to enable remote debugging:

electron . --remote-debugging-port=9222

If you’re using Electron Forge, you can use the following command instead:

electron-forge start -- --remote-debugging-port=9222

For the port you can of course pick whichever number pleases you the most (provided it’s a valid & unused port).

Using the --remote-debugging-port option makes the app available for remote debugging, but Webstorm doesn’t automatically know that it should attach the debugger to the renderer process. To attach the debugger, we need to add a run configuration.

Open the “Run/Debug Configurations” window and add an “Attach to Node.js/Chrome” configuration. Then set the host to localhost and port to the port number you’re using (probably 9222).

Now place some breakpoints, start Electron and attach the debugger! Keep in mind that the renderer process won’t wait until the debugger is attached, so you might miss all breakpoints during start-up (and I’m not sure how to solve that) — other than that it should all work. I hope this has helped you!