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.

Launch your Electron application with the --remote-debugging-port=8315 flag set and navigate to chrome://inspect/#devices in Chrome 80+. Then click Configure... and add localhost:8315 as a discovery server.

Then, wait for your Electron instance to appear in the devices list and click inspect.

On Mac just run open /Applications/WhatsApp.app --args --remote-debugging-port=8315 and then open http://localhost:8315

https://github.com/bytedance/debugtron

Debugtron is an app to debug in-production Electron based app. It is also built with Electron.

The way to do this is using the --remote-debugging-port flag.

Using Signal as an example, take the following steps:

1. start the application from the CLI

signal-desktop --remote-debugging-port

2. Open the debugging URL in a Google Chrome browser (in this case http://localhost:39733/), this will open a page with the app name on it
   .
3. Click the to open a screen were you can click around to use the app and see output in the devtools
   

Alternatively, you can open chrome://inspect/#devices in the Google Chrome browser and click "inspect" (underneath the app name) to open the same window

In the main/index.js at the end of section app.on('ready') just add:

mainWindow.webContents.openDevTools();

Just for debugging, when electron opens an empty window, but the development version works fine, this way is very helpful for me.

The answers above don't help for me. ( those with -remote-debugging-port)

put this code into your main.js or similar file, it will automatically open the dev-tool when started.

mainWindow.webContents.openDevTools()

In my case, I had a runtime error crashing Electron before the web view was even shown. Chrome dev tools were not useful for debugging this kind of error.

Even stranger, the app loaded fine using the lldb commands:

lldb ./dist/mac/electron-quick-start-typescript.app
run --remote-debugging-port=8315

I managed to solve by writing the Node.js console log/error to a file. So I could see the console output:

import fs from 'fs';
import util  from 'util';

// use a fixed path, to ensure log shows outside Electron dist
const logPath = `/Users/username/Sites/electron-server/debug-${isDev ? 'dev' : 'prod'}.log`;
const logFile = fs.createWriteStream(logPath, { flags: 'w' });
const logStdout = process.stdout;

console.log = function(...args) {
  logFile.write(util.format.apply(null, args) + '\n');
  logStdout.write(util.format.apply(null, args) + '\n');
}
console.error = console.log;

I found the error was a relative path issue. When the app is started in production mode the relative path did not point to the correct location.

I solved by using an absolute path, with Electron getAppPath() method:

- './renderer'
+ app.getAppPath() + '/renderer'

June 2022 UPDATE:

Devtools can be explicitly enabled through on the BrowserWindow object.

mainWindow = new BrowserWindows({
   ...,
   webPreferences: {
       ...,
       devTools: true,
   }
}

And then you can manually open it on load.

mainWindow.on('ready-to-show', () => {
    if (!mainWindow) {
        throw new Error('mainWindow is not defined')
    }
    mainWindow.show()

    mainWindow.webContents.openDevTools()
})