4

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 combination 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 recommend 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.

JonLuca
  • 850
  • 6
  • 25
  • This was also posted on reddit, [here](https://www.reddit.com/r/electronjs/comments/atneek/is_there_a_way_to_open_devtools_on_production/?) – JonLuca Feb 22 '19 at 21:58
  • Does this answer your question? [How to debug electron production binaries](https://stackoverflow.com/questions/45485262/how-to-debug-electron-production-binaries) – Potherca Apr 13 '21 at 10:08
  • For Slack in particular you can set environment variable `SLACK_DEVELOPER_MENU=1` and then press Ctrl+Alt+I – CherryDT Nov 18 '21 at 16:39

1 Answers1

5

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
  1. 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
    .
  2. Click the to open a screen were you can click around to use the app and see output in the devtools
    List item

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

Potherca
  • 13,207
  • 5
  • 76
  • 94