在 Electron 应用程序中使用 console.log()

如何在我的电子应用程序中将数据或消息记录到控制台?

默认情况下,这个真正基本的 hello world 会打开 dev 工具,因为我无法使用 console.log('hi')。有电子的替代品吗?

主要的

var app = require('app');
var BrowserWindow = require('browser-window');


require('crash-reporter').start();


var mainWindow = null;


app.on('window-all-closed', function() {
// Mac OS X - close is done explicitly with Cmd + Q, not just closing windows
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;
});
});
141383 次浏览

console.log可以工作,但是它的日志位置取决于您是从主进程还是从呈现程序进程调用它。

如果您从渲染器进程(即从 index.html文件中包含的 JavaScript)调用它,它将被记录到 dev 工具窗口。

如果你从主进程(比如在 main.js中)调用它,它的工作方式和在 Node 中一样——它会记录到终端窗口。如果你使用 electron .从终端启动你的电子进程,你可以看到你的 console.log从主进程那里调用。

你也可以在 windows 中添加一个环境变量:

ELECTRON_ENABLE_LOGGING=1

这将向您的终端输出控制台消息。

还有另一种从渲染器进程内部记录到控制台的方法。考虑到这是 Electron,您可以访问 Node 的本机模块。这包括 console模块。

var nodeConsole = require('console');
var myConsole = new nodeConsole.Console(process.stdout, process.stderr);
myConsole.log('Hello World!');

当这段代码从渲染器进程内部运行时,您将在运行 Electron 的终端中获得 Hello World!

有关 console模块的进一步文档,请参阅 https://nodejs.org/api/console.html

process.stdout.write('your output to command prompt console or node js ')

为了补充 M。 Damian 的答案,下面是我如何设置的,这样我就可以从任何渲染器访问主进程的控制台。

在你的主应用中,添加:

const electron = require('electron');
const app = electron.app;
const console = require('console');
...
app.console = new console.Console(process.stdout, process.stderr);

在任何渲染器中,都可以添加:

const remote = require('electron').remote;
const app = remote.app;
...
app.console.log('This will output to the main process console.');

还有一种可能性是使用 remote.getGlobal(name)访问主进程控制台:

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')

这是一个后续的 cscsandy5的一些补充信息,信息从 给你的答案

process.stdout.write('your output to command prompt console or node js ')

这段代码可以很好地将一个简单的调试消息输出到启动电子应用程序的终端窗口中,而且 console.log 是在这个终端窗口的基础上构建的。

下面是一个 jQuery 脚本的示例片段(基于 Tutorialpoint electon 教程) ,每次按下按钮时,它都会向终端写入 hello (警告: 您需要在输出字符串中添加自己的换行符!)

let $ = require('jquery')
var clicks = 0;


$(function() {
$('#countbtn').click(function() {
//output hello <<<<<<<<<<<<<<<<<<<<<<<
process.stdout.write('hello')


$('#click-counter').text(++clicks);
});


$('#click-counter').text(clicks);
});

您可以使用 npm 包电子日志 https://www.npmjs.com/package/electron-log

它将记录您的错误,警告,信息,详细,调试,愚蠢的输出在您的本机操作系统日志。

var log = require('electron-log');


log.info('Hello, log');
log.error('Damn it, an error');

亚历克斯 · 沃伦写道的一切都是真的。重要的是电子是如何开始的。如果您使用 包裹 Json文件中的标准脚本,它将无法工作。要使 console.log()正常工作,用这个新脚本替换旧脚本。

旧的那个:

"scripts": {
"start": "electron ."
}

最新消息:

"scripts": {
"start": ".\\node_modules\\electron\\dist\\electron.exe ."
}

现在所有的 console.log()呼叫也显示在终端中。

我用的是这个:

let mainWindow // main window reference, you should assign it below 'mainWindow = new BrowserWindow'


function log(...data) {
mainWindow.webContents.executeJavaScript("console.log('%cFROM MAIN', 'color: #800', '" + data + "');");
}

示例使用(与 console.log相同) :

log('Error', { msg: 'a common log message' })
log('hello')

来源: logger.js 文件中的 https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main,在这里您可以看到一个真实的用例。

很抱歉引发了一个老线程,但这是“如何输出 console. log 到终端”(或类似的搜索)的顶部结果。

对于任何想要获得更多控制输出到终端的人来说,你可以使用 webContents.on (“控制台消息”) ,如下所示:

mainWindow.webContents.on('console-message', (event, level, message, line, sourceId) => {
console.log(message + " " +sourceId+" ("+line+")");
});

参见:

网站内容文档

BrowserWindow 文档中的 webContent 条目

console.log()可以很好地进行调试。由于 electron是构建在浏览器之上的,因此它支持 DevTools,您可以使用 devtools 进行调试。然而,console.log()方法存在一种歇斯底里行为。当你从电子应用程序的 main process调用 console.log()时,它会从你刚启动应用程序的地方输出到终端窗口,当你从 renderer process调用它时,它会输出到 DevTools 控制台。

有了这个,你可以使用浏览器主窗口的开发工具来查看日志

    function logEverywhere(s) {
if (_debug === true) {
console.log(s);
// mainWindow is main browser window of your app
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.executeJavaScript(`console.log("${s}")`);
}
}
}

例子 logEverywhere('test') 将在主浏览器窗口的开发工具的控制台面板中输出 // test

您可能需要增强此方法以接受多个参数(您可以通过 es6使用扩展运算符来完成)

好吧,现在是2019年,我不敢相信没有人在上面的所有答案中提到这个技巧。 好的,那么,直接从主站点登录到浏览器控制台怎么样? 我在这里给出了答案: https://stackoverflow.com/a/58913251/8764808 看看吧。

经过一番调查,我的理解是:

密码

(1) main.js


const createPyProc = () => {
console.log('In createPyProc')
...
console.log('scriptStart=%s', scriptStart)
...
console.log('scriptOther=%s', scriptOther)
...
}


...


let mainWindow = null


const createWindow = () => {
mainWindow = new BrowserWindow(
{
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true,
}
}
)
mainWindow.loadURL(require('url').format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
mainWindow.webContents.openDevTools()


mainWindow.on('closed', () => {
mainWindow = null
})
}
...

注意: 使用 openDevTools打开 Electron Dev Tools

(2) render.js

const zerorpc = require("zerorpc")
...
console.log("clientStart %d server is ready", PORT_START)
...
})

(3) render.js由: index.html调用

<!DOCTYPE html>
<html>
...
<script>
require('./renderer.js')
</script>
</html>


console.log

输出逻辑

  • 两个进程 及其 控制台日志输出:
    • main process = NodeJS process = here Electron UI process
      • - > console.logmain.js将输出日志到这里
      • - > console.logrender.js将输出日志到这里

屏幕截图示例

  • DEBUG = Development mode
    • 运行 ./node_modules/.bin/electron .
  • 生产 = 发行 模式 = eletron-builder包装的 应用程序
    • 运行 /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 增加 export ELECTRON_ENABLE_LOGGING=truerender.js控制台。日志 还有输出到 main process终端

我正在做的一个项目是使用 电子反应样板。这就是 electron-devtools-installer@2.4.4,它以某种方式通过 cross-unzip导致进程与 Error: Exited with code 9 一起崩溃。

升级到 electron-devtools-installer@3.1.1,因为 在电子反应文件@v2.0.0中提出解决了这个问题,所以我的 console.logconsole.error等语句按预期工作。

出于日志的目的,我建议您使用 电子测井仪电子测井仪