在开发过程中如何查看Electron的错误消息和控制台日志? 日志是否能直接写入文件中?
编辑: 类似于Chrome开发工具显示的错误和控制台日志:
,只是在Electron而不是Chrome中。
编辑: 类似于Chrome开发工具显示的错误和控制台日志:
![Chrome开发工具截图](https://istack.dev59.com/v48vx.webp)
在你的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,请让我知道它们是否不同。
openDevTools()
的工作正常。 - user2370460winston
以覆盖Electron的console
的示例? - evandrixconsole.log
语句)写入文件的问题 - 是的,你可以。只需使用命令行参数--log-file=FILEPATH
和--enable-logging
来运行electron。(注意,FILEPATH
应为绝对文件路径,并且路径中的父目录应存在 - 如果不存在,electron不会为你创建父目录。)如果以这种方式启动electron,浏览器中的console.log
语句将被写入FILEPATH
。(在这里阅读更多关于这些命令行参数的信息)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-packager
或electron-builder
等工具,这种方法将不会起作用;当运行exe文件时,package.json
中的start
脚本将被忽略,因此命令行参数不会传递给Electron。作为替代方案,您可以在main.js
的开头(应用程序加载之前)以编程方式添加Electron命令行参数:app.commandLine.appendSwitch('log-file', logfile);
app.commandLine.appendSwitch('enable-logging');
main.js
中的console.log
语句)记录到日志文件中,你可以看看一个叫做electron-log
的包https://www.npmjs.com/package/electron-log。起初我很犹豫使用它,因为我不想再安装npm包,但它非常轻巧,而且功能很好。只是想分享一下。 - bikzelectron-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--log-level
https://www.electronjs.org/docs/latest/api/command-line-switches#--log-leveln 。electron的文档希望你阅读一些Chrome源代码来了解如何使用这个开关,但如果你不想在项目中引入额外的npm包,也许值得深入研究一下。 - bikzconsole.error
日志;在渲染进程中,遗憾的是仍然显示所有的控制台日志。我尝试使用 Electron 命令行开关来修复这个问题,但未能成功。话虽如此,我对 Electron 不熟悉,也许有人能更适合解决这个问题。很抱歉我无法回答您的问题。 - bikz之前的回答现在有点过时了,但基本上还是很完美的。
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.webContents.openDevTools();