How to debug electron applications with IntelliJ or WebStorm?

Question

I'm using IntelliJ as development tool and I wanted to know how to debug an Electron application?

I'm aware there is a standard way to debug Electron applications, but this method is done outside of my IDE.

I've tried to create a new "Node.js" "Run/Debug Configuration" using:

• Node interpreter: <path to node>
• Working directory: <path to my application root folder>
• JavaScript file: node_modules/.bin/electron
• Application parameters: .

With this settings, my application starts, but if I put a breakpoint in my main.js the application never stops on the breakpoint (= debugging doesn't work).

Answer 1

In Windows, for WebStorm 2024 selecting electron.cmd as Node interpreter no longer works for me, because for some reason it gets replaced with electron.cmd.exe.

And since there's no such file, WebStorm complains with Specify a Node.js interpreter correctly error.

To fix it close WebStorm, open <project_root>\.idea\workspace.xml file, find line

<configuration 
    name="electron" 
    type="NodeJSConfigurationType" 
    application-parameters="--remote-debugging-port=9222"
    path-to-node="$PROJECT_DIR$/node_modules/.bin/electron.cmd"
    nameIsGenerated="true" 
    node-parameters="." 
    working-dir="$PROJECT_DIR$/">

and change property nameIsGenerated="true" to nameIsGenerated="false"

Then start WebStorm again.

Answer 2

I got debugging to work in the IDE and made some notes for the future which I'll drop here in case it can help somebody (or even be improved).

Debug configuration JetBrains IDE

These instruction are applicable for the code base of electron-react-boilerplate on GitHub

JetBrains JS debug only works with Chrome or Chromium based web browsers. I only use Firefox so for this to work, I installed Chromium for Linux.

Enable debug in the project's code

• Add or modifiy $project_root/.erb/configs/webpack.config.renderer.dev.dll.ts
  devtool: 'source-map',
mode: 'development',

• Add or modify $project_root/tsconfig.json
  "inlineSources": true,
"inlineSourceMap": true,

• Also worked without this line. Add or modify $project_root/src/main/main.ts
  app.commandLine.appendSwitch('remote-debugging-port', '9229')

JetBrains IDE configuration

To debug in a JetBrains IDE,
first start the application with npm start run config (screenshot) or terminal,
then run jsdebug configuration in JetBrains IDE (screenshot).

When you run the JavaScript Debug configuration, a Chromium instance fires up and the debugger should stop in your IDE at breakpoints.

There's definitely room for improvement because I have 2 instances of the GUI running now, 1 that started with run npm start and 1 that started with run JavaScript Debug configuration that allows me to debug in the IDE.

Screenshots

Links

WebStorm debugging JetBrains docs

JetBrains 2016 debugging tutorial

Notes

The Electron app is running on localhost:1212. This information is not visible in the electron "browser" as there is not address bar, but it can be discovered in webpack.config.renderer.dev.ts on line const port = process.env.PORT || 1212;.

Answer 3

This is how I set it up, and it worked great. I then just put my break points inside of webstorm and it just works.

In webstorm create a new runtime configuration that looks like this.

Answer 4

Try to change your node interpreter by the electron executable in your node_modules. It seems to work fine for me ;)