Error Messages and Console Logs in Electron?

Question

How do you view error messages and console logs in Electron during development? In addition, is it possible for logs to be written directly to a file?

---

Edit: Like the errors and console logs displayed by Chrome dev tools: Except Electron, not Chrome.

Answer 1

In your openDevTools() browser, call the openDevTools() function, this will open the same tools that you find in Chrome. I wrote about this on my blog at http://www.mylifeforthecode.com/debugging-renderer-process-in-electron/ .

Here is a simple main.js file that includes openDevTools:

 var app = require('app'); var BrowserWindow = require('browser-window'); var mainWindow = null; app.on('window-all-closed', function() { if (process.platform != 'darwin') app.quit(); }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.openDevTools(); mainWindow.on('closed', function() { mainWindow = null; }); }); 

You can also access this through the visualization process using the remote module. For the applications I worked with, I bind the toggleDevTools function to F12. Something like that:

  var remote = require('remote'); document.addEventListener("keydown", function (e) { if (e.keyCode === 123) { // F12 var window = remote.getCurrentWindow(); window.toggleDevTools(); } }); 

Please note that I only tested above using Electron on Windows. I assume the Linux and Mac versions work the same way. If you are using Mac or Linux, let me know if they do not.

Answer 2

The previous answer is a bit outdated today, but almost perfect.

mainWindow = new BrowserWindow ({width: 800, height: 600}); MainWindow. webContents .openDevTools ();

It opens developer tools automatically when the application is running electronically. I am using Electron on Windows

Source https://electronjs.org/docs/tutorial/application-debugging