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