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

这个非常基本的hello世界默认情况下会打开dev工具，我无法使用console.log('hi')。电子有替代品吗？

main.js

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

console.log 可以使用，但是它记录的位置取决于您是从主进程还是渲染器进程调用它。

如果从渲染器进程调用它（即index.html文件中包含的JavaScript ），它将被记录到开发工具窗口中。

如果您从主进程（即在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!');

从渲染器进程内部运行此代码后，您将进入Hello World!运行Electron的终端。

有关该模块的更多文档，请参见https://nodejs.org/api/console.htmlconsole。

还有另一种可能性是使用以下命令访问主流程控制台remote.getGlobal(name)：

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

添加到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.');

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

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

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

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

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

这是cscsandy5对某些其他信息的解答的后续信息，有关信息从此处

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

此代码非常适合仅将简单的调试消息输出到您从中启动电子应用程序的终端窗口，这就是console.log的基础。

这是一个jQuery脚本的示例片段（基于tutorialspoint电子教程），每次按下按钮时都会向终端打个招呼（警告：您需要在输出字符串中添加自己的换行符！）

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

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

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

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

Alex Warren写的一切都是真实的。这里重要的是电子的启动方式。如果您在package.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，在这里您可以看到一个真实的用例。

经过一番调查，这是我的理解：

码

（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

输出逻辑

• 两个进程及其console.log输出：
  • main process= NodeJS process=这里Electron UI process
    • - > console.log在main.js将输出的日志在这里
  • render process
    • - > console.log在render.js将输出的日志在这里

屏幕截图示例

• DEBUG =开发模式
  • 跑 ./node_modules/.bin/electron .
    • 
• 生产=释放模式=所述xxx.app pacakged通过eletron-builder
  • 跑 /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • 加入export ELECTRON_ENABLE_LOGGING=true，render.js的console.log ALSO输出到main process终端
    • 

抱歉引发一个旧线程，但这是“如何将console.log输出到终端”（或类似搜索）的最高结果。

对于希望获得更多控制权的人，可以使用webContents.on（'console-message'），如下所示：

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

看到：

webContents文档

BrowserWindow文档上的webContents条目

console.log()可以很好地进行调试。由于electron内置于浏览器之上，因此它具有DevTools支持您可以使用devtools进行调试的支持。但是，该方法存在滞后行为console.log()。当您console.log()从main process电子应用程序中调用from 时，它将从您刚刚启动该应用程序的位置输出到终端窗口，而当您从其中调用该应用程序时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在主浏览器窗口的开发人员工具的控制台面板中输出

您可能需要增强此方法以接受多个args（可以通过es6使用spread运算符完成此操作）

好吧，这是2019年，我不敢相信在以上所有答案中都没有人提到这一技巧。好的，那么直接从主目录直接登录到浏览器控制台又如何呢？我在这里提供了答案：https : //stackoverflow.com/a/58913251/8764808 看看。