CODEWITHSUNDEEP
electron
Lucca
Lucca

Reputation: 1537

How to debug electron production binaries

I can't open devtools in the built version of my electron app. Therefore i want to find another solution to log any errors that only occur in the production version.

Is there any good way to get some console.logs from an electron application if its already built? Obviously i can debug the “development” version (running npm run dev) of my electron app by opening the chrome dev tools. But i can’t find any way to enable them inside my production application. I am using the newsest version of electron-vue

Thanks for any help in advance.

Upvotes: 49

Views: 51151

Answers (10)

RoyalBingBong
RoyalBingBong

Reputation: 1129

Enabling the Chrome developer tools in production could be done in various ways:

  1. Use an environment variable and check process.env if it was set:
    • E.g. under Windows set ELECTRON_ENV=development && myapp.exe
  2. Pass a special parameter or flag to your app and check process.argv if it was set.
  3. If you have persistent settings, then you could create a debug option in your settings.
  4. If you have a menu bar, then you can create an entry to open the developer tools. You can always show that entry or you could combine options 1.-3. to only have that menu entry visible when your "debug mode" is enabled.

The developer tools can be opened via win.webContents.openDevTools on any window. For small windows I would suggest opening the developer tools either in detach or undocked mode.

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.

Upvotes: 22

pTK
pTK

Reputation: 679

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

Upvotes: 25

Toomuchrice4u
Toomuchrice4u

Reputation: 648

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()
})

Upvotes: 1

Kim T
Kim T

Reputation: 6454

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'

Upvotes: 1

Siwei
Siwei

Reputation: 21587

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()

Upvotes: 0

Potherca
Potherca

Reputation: 14640

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
  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: 5

Richie Bendall
Richie Bendall

Reputation: 9222

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.

Upvotes: 35

elprup
elprup

Reputation: 1998

https://github.com/bytedance/debugtron

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

Upvotes: 18

Oleksii Radetskyi
Oleksii Radetskyi

Reputation: 227

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.

Upvotes: 0

Timur Osadchiy
Timur Osadchiy

Reputation: 6249

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.

Upvotes: 63

Related Questions