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

Question

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

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

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

Answer 1

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

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

如果您从主进程调用它（即在 main.js 中），它将以与在 Node 中相同的方式工作——它将登录到终端 window。如果您使用 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

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

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

另一种可能性是使用 remote.getGlobal(name):

访问主进程控制台

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

Answer 7

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

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

此代码非常适合向终端 window 输出一条简单的调试消息，您从中启动了电子应用程序，console.log 是在其之上构建的。

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

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 8

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

它将在您的本机 os 日志中记录您的错误、警告、信息、动词ose、调试、愚蠢的输出。

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

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

Answer 9

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

老一辈：

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

新的：

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

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

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')

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

Answer 11

很抱歉提出旧话题，但这是 "how to output console.log to terminal"（或类似搜索。

的最高结果

对于任何想要更多地控制输出到终端的内容的人，您可以像这样使用 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 12

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

Answer 13

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

    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') 将在主浏览器 window 的开发者工具

的控制台面板中输出 // test

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

Answer 14

好吧，现在是 2019 年了，我不敢相信上面的所有答案中都没有人提到这个技巧。好的，那么，直接从 main 直接登录到浏览器控制台怎么样？我在这里提供了答案：看一看。

Answer 15

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

代码

(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
  - -> main.js中的console.log会输出日志到这里
- render process
  - -> console.log in render.js 会输出日志到这里

屏幕截图示例

DEBUG=开发模式
- 运行./node_modules/.bin/electron .
Production=Release 模式 = xxx.app 由 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 终端

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 等语句按预期工作。

Answer 17

出于日志目的，我建议您使用 electron-log 程序包

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

Using console.log() in Electron app

electron

代码

console.log

输出逻辑

屏幕截图示例

`console.log`