Electron中的错误消息和控制台日志？

Question

Electron中的错误消息和控制台日志？

javascriptnode.jsdebuggingelectron

15

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

编辑: 类似于Chrome开发工具显示的错误和控制台日志: Chrome开发工具截图

，只是在Electron而不是Chrome中。

- Oztaco

Electron 中的日志是什么意思？ - Maneesh Singh

在客户端，您无法维护登录文件，但是根据我的了解，在服务器端，您可以编写登录文件。 - Maneesh Singh

@ManeeshSingh 这是一个客户端应用程序。如果我无法将日志写入文件，那也没关系，但是有可能查看这些日志吗？ - Oztaco

是的，您可以通过使用Chrome开发工具或在Mozila中安装“firebug”插件来查看所有在console.log中编写的日志。之后， 1：您可以检查元素。 2：打开控制台。 - Maneesh Singh

@ManeeshSingh 对不起，如果我没有表述清楚，我没有使用网络浏览器。我正在使用 Electron 创建一个桌面应用程序，并且需要在 Electron 中运行 应用程序时查看日志。 - Oztaco

亲爱的Oztaco，不要说抱歉。这不是你的错。我没有任何Electron开发经验。 - Maneesh Singh

3个回答

6

这有点旧了，但是针对你关于是否可以将渲染器日志（浏览器JavaScript中的console.log语句）写入文件的问题 - 是的，你可以。只需使用命令行参数--log-file=FILEPATH和--enable-logging来运行electron。（注意，FILEPATH应为绝对文件路径，并且路径中的父目录应存在 - 如果不存在，electron不会为你创建父目录。）如果以这种方式启动electron，浏览器中的console.log语句将被写入FILEPATH。（在这里阅读更多关于这些命令行参数的信息）

例如，下面是一个普通的electron应用程序的package.json文件的样子：

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

改成：

{
  "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"
  }
}

（根据您的操作系统修改该路径。）现在像平常一样通过npm start运行您的Electron应用程序，浏览器的控制台日志将保存到文件C:/Users/you/Documents/myfile.txt。

顺便提一下 - 如果Electron被打包成exe文件，例如使用electron-packager或electron-builder等工具，这种方法将不会起作用；当运行exe文件时，package.json中的start脚本将被忽略，因此命令行参数不会传递给Electron。作为替代方案，您可以在main.js的开头（应用程序加载之前）以编程方式添加Electron命令行参数：

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

（展示如何完成此操作的文档）

- bikz

非常有帮助，谢谢！我发现我的Electron版本过旧，导致它无法理解"enable-logging"。我只需要将Electron更新到最新版本，我的版本已经更新到v21，这个功能就可以正常使用了。 - beeeliu

非常高兴它对你有用。我在解决电子日志记录问题上遇到了很多困难，但一旦你开始使用它，它将为你节省大量调试时间。顺便说一下，如果你想将主进程输出（即main.js中的console.log语句）记录到日志文件中，你可以看看一个叫做electron-log的包https://www.npmjs.com/package/electron-log。起初我很犹豫使用它，因为我不想再安装npm包，但它非常轻巧，而且功能很好。只是想分享一下。 - bikz

@bikz 你知道是否有办法仅将 console.error 消息记录到日志文件中吗？ - Thomas

@Thomas 我相信 electron-log 应该能满足你的需求。它支持多种日志级别，你可以将日志级别设置为 error。我给你拼凑了一个小例子：https://github.com/bkuz114/electron-examples/tree/main/log_files 。这是一个完全可运行的 Electron 应用程序，它会生成日志文件（但只记录 console.error 的内容）；你可以查看或复制代码，然后运行 npm install && npm start 来启动应用程序。另外，如果你只想看一下处理日志的 main.js 文件：https://github.com/bkuz114/electron-examples/blob/main/log_files/main.js - bikz

@Thomas 回顾你回复的答案，我现在意识到你可能想知道如何仅修改那个特定的示例（使用electron命令行开关记录渲染器日志）。如果是这样的话，你可以看一下electron的开关--log-level https://www.electronjs.org/docs/latest/api/command-line-switches#--log-leveln 。electron的文档希望你阅读一些Chrome源代码来了解如何使用这个开关，但如果你不想在项目中引入额外的npm包，也许值得深入研究一下。 - bikz

在回顾我在 GitHub 上发布的示例后，看起来我的示例只限制了主进程中的 console.error 日志；在渲染进程中，遗憾的是仍然显示所有的控制台日志。我尝试使用 Electron 命令行开关来修复这个问题，但未能成功。话虽如此，我对 Electron 不熟悉，也许有人能更适合解决这个问题。很抱歉我无法回答您的问题。 - bikz

4

之前的回答现在有点过时了，但基本上还是很完美的。

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

当Electron应用程序在运行时，它会自动打开开发者工具。我正在Windows上使用Electron。

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

- Adam Kuzański

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shawn Rakowski · Accepted Answer

在你的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，请让我知道它们是否不同。