Error messages and console logs in Electron?

Question

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

---

Edit: Kind of like the errors and console logs displayed by Chrome's dev tools: Except in Electron rather than Chrome.

Answer 1

On your BrowserWindow call the function openDevTools() this will open the same dev tools 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 via a renderer process using the remote module. For the apps I have been tinkering with I bind the function toggleDevTools to F12. Something like this:

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

Note that I have only tested the above with Electron in Windows. I am assuming the Linux and Mac versions work the same. If you are running Mac or Linux please 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 dev tools automatically when app is running in electron. I am using Electron on Windows

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