How to debug electron production binaries

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

Enabling the Chrome devtools in production can be done in various ways:

1. A environment variable:
   • E.g. under Windows set ELECTRON_ENV=development&& myapp.exe
2. Pass a special parameter to your app
   • E.g. myapp.exe --debug
3. Debug mode via user settings (if you have persistent settings)
4. Menu entry to open the devtools
   • Can be combined with 1.-3. to only have that menu entry when in debug mode

You can just check if 1.-3. are set and if they are, you simply open the devtools via mainWindow.webContents.openDevTools()

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.

Answer 5

https://github.com/bytedance/debugtron

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