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

Question

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

这个非常基本的 hello world 默认打开开发工具，我无法使用console.log('hi')。 Electron 有替代品吗？

ma​​in.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;
  });
});

Answer 1

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

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

如果您从主进程调用它（即在main.js 中），它将以与在 Node 中相同的方式工作 - 它将登录到终端窗口。如果您使用 electron . 从终端启动 Electron 进程，您可以在主进程中看到您的 console.log 调用。

Answer 2

你也可以在windows中添加环境变量：

ELECTRON_ENABLE_LOGGING=1

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

Answer 3

还有另一种从渲染器进程内部登录到控制台的方法。鉴于这是 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。

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

可以使用 npm 包 electron-log https://www.npmjs.com/package/electron-log

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

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

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

Answer 8

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

对于希望对终端输出内容有更多控制权的人，您可以像这样使用 webContents.on('console-message')：

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

见：

webContents Documentation

webContents entry on BrowserWindow docs

Answer 9

这是 cscsandy5 对一些附加信息的回答的后续，信息来自here

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

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

这是一个 jQuery 脚本的示例 sn-p（基于 tutorialspoint 电子教程），每次按下按钮时都会向终端写 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);
});

Answer 10

这是我用的：

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，在这里你可以看到一个真实的用例。

Answer 11

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

代码

(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) 渲染.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 in main.js 将输出日志到这里
  • render process
    • -> console.log in render.js 将输出日志到这里

截图示例

• DEBUG=开发模式
  • 运行./node_modules/.bin/electron .
• Production=Release模式=eletron-builder打包的xxx.app
  • 运行/path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
  • 添加export ELECTRON_ENABLE_LOGGING=true,render.jsconsole.log ALSO输出到main process终端

Answer 12

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

Answer 13

Alex Warren wrote 的一切都是真的。这里重要的是 Electron 是如何启动的。如果您在 package.json 文件中使用标准脚本，它将不起作用。为了使console.log() 工作，用这个新脚本替换旧脚本。

旧的：

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

新的：

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

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

Answer 14

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

    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 的扩展运算符来完成）

Answer 15

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

Answer 16

我正在进行的一个项目使用的是electron-react-boilerplate。这有electron-devtools-installer@2.4.4，它以某种方式通过cross-unzip 导致进程以Error: Exited with code 9 崩溃。

升级到electron-devtools-installer@3.1.1，因为proposed in electron-react-boilerplate@v2.0.0 解决了它，所以我的console.log、console.error 等语句按预期工作。