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

Answer 3

This is a bit old, but for your question on if you can write the renderer logs (the console.log statements in your browser javascript) to a file - yes you can. Just run electron with the command line arguments --log-file=FILEPATH and --enable-logging. (Note, FILEPATH should be an absolute filepath, and the parent directory in the path should exist - electron will not create the parent directory for you if it doesn't exist.) If you start electron like this, the console.log statements from the browser will be written to FILEPATH. (Read more about those command line arguments here)

For example, this is what a normal package.json looks like for an electron app:

{
  "name": "my-app",
  "version": "1.0",
  "description": "Just an app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest"
  }
}

Change it to:

{
  "name": "my-app",
  "version": "1.0",
  "description": "Just an app",
  "main": "main.js",
  "scripts": {
    "start": "electron . --log-file=C:/Users/you/Documents/myfile.txt --enable-logging"
  },
  "devDependencies": {
    "electron": "latest"
  }
}

(modify that path to suit your operating system.) Now run your electron app via npm start like normal, and the browser's console logs will be saved to the file C:/Users/you/Documents/myfile.txt

As a side note - this will not work if electron is bundled into an exe via a utility like electron-packager or electron-builder; the start script in package.json will be ignored when the exe is run, so the command line params would not get passed when starting electron. As an alternative, you can add electron command line parameters programmatically to your app at the top of main.js (before the app loads):

app.commandLine.appendSwitch('log-file', logfile);
app.commandLine.appendSwitch('enable-logging');

(Documentation showing how to do this)