12

在开发过程中如何查看 Electron 中的错误消息和控制台日志?另外,是否可以将日志直接写入文件?


编辑:有点像 Chrome 的开发工具显示的错误和控制台日志: Chrome 的开发工具截图 除了 Electron 而不是 Chrome。

4

2 回答 2

15

在您的 BrowserWindow 调用该函数,openDevTools()这将打开您在 Chrome 中找到的相同开发工具。我在我的博客http://www.mylifeforthecode.com/debugging-renderer-process-in-electron/上写过这个。

这是一个包含 openDevTools 的简单 main.js 文件:

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;
  });  
});

您还可以使用远程模块通过渲染器进程访问它。对于我一直在修补的应用程序,我将函数绑定toggleDevTools到 F12。像这样的东西:

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

请注意,我只在 Windows 中使用 Electron 测试了上述内容。我假设 Linux 和 Mac 版本的工作方式相同。如果您运行的是 Mac 或 Linux,请告诉我是否没有。

于 2015-06-13T13:11:46.683 回答
3

以前的答案今天有点过时,但几乎完美。

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

当应用程序在电子中运行时,它会自动打开开发工具。我在 Windows 上使用 Electron

来源https://electronjs.org/docs/tutorial/application-debugging

于 2019-07-18T00:48:43.360 回答