Is there a way to open devtools on production builds of Electron that were packaged and distributed to you?

For instance, I'd like to poke around Slack's app. I know that it's built in Electron, and I'd like to open devtools to see how some parts of it are built.

On macOS I've tried:

ELECTRON_ENV=development /Applications/Slack.app/Contents/MacOS/Slack --debug --auto-open-devtools-for-tabs

as well as the usual key bination of Cmd+Option+I and checking for debug menus/views.

None of these seem to make a difference.

Note that there are already a few solutions that remend you do it programmatically by injecting:

  remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()

However I can't do that because I don't have access to the source code or the original build process. Is there a way to trigger devtools externally?

The most promising way I've seen so far is remote-debugging-port but I'm not sure it works with production builds.

Is there a way to open devtools on production builds of Electron that were packaged and distributed to you?

For instance, I'd like to poke around Slack's app. I know that it's built in Electron, and I'd like to open devtools to see how some parts of it are built.

On macOS I've tried:

ELECTRON_ENV=development /Applications/Slack.app/Contents/MacOS/Slack --debug --auto-open-devtools-for-tabs

as well as the usual key bination of Cmd+Option+I and checking for debug menus/views.

None of these seem to make a difference.

Note that there are already a few solutions that remend you do it programmatically by injecting:

  remote.BrowserWindow.getFocusedWindow().webContents.openDevTools()

However I can't do that because I don't have access to the source code or the original build process. Is there a way to trigger devtools externally?

The most promising way I've seen so far is remote-debugging-port but I'm not sure it works with production builds.

• javascript
• electron

• This was also posted on reddit, here – JonLuca Commented Feb 22, 2019 at 21:58
• Does this answer your question? How to debug electron production binaries – Potherca Commented Apr 13, 2021 at 10:08
• For Slack in particular you can set environment variable SLACK_DEVELOPER_MENU=1 and then press Ctrl+Alt+I – CherryDT Commented Nov 18, 2021 at 16:39

1 Answer 1

The way to do this without third-party code is indeed 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