CODEWITHSUNDEEP
javascriptelectron
JonLuca
JonLuca

Reputation: 919

Opening Chromium DevTools in production builds of Electron apps without source code or build process

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.

Upvotes: 7

Views: 3454

Answers (1)

Potherca
Potherca

Reputation: 14530

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

Upvotes: 6

Related Questions