How to debug electron production binaries

Here's what worked for me on Mac.

  1. In terminal type lldb path/to/build.app
  2. In the opened debugger type run --remote-debugging-port=8315. It should open a window of your app.
  3. Open Chrome at http://localhost:8315/
  4. Click on the name of the app. For example, Webpack App.
  5. If you don't see anything in the opened tab, focus on the window of your app.

Enabling the Chrome devtools in production can be done in various ways:

  1. A environment variable:
    • E.g. under Windows set ELECTRON_ENV=development&& myapp.exe
  2. Pass a special parameter to your app
    • E.g. myapp.exe --debug
  3. Debug mode via user settings (if you have persistent settings)
  4. Menu entry to open the devtools
    • Can be combined with 1.-3. to only have that menu entry when in debug mode

You can just check if 1.-3. are set and if they are, you simply open the devtools via mainWindow.webContents.openDevTools()

Personally I use a combination of 1., 3. and 4. I simply unlock a developer menu that allows me to open the devtools or opens the userdata folder for me.


If you also want to log critical errors, then electron-log looks like a rather popular option for electron.

Tags:

Electron