代码

Question

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

这个真正基本的hello世界默认打开开发工具，我无法使用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）调用它，它将被记录到开发工具窗口。

如果你从主进程（即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

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

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

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

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

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 7

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

Answer 8

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

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

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

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

Answer 9

一切Alex Warren wrote都是正确的。这里重要的是电子的启动方式。如果您在 package.json 文件中使用标准脚本，它将无法正常工作。要使console.log()正常工作，请用新脚本替换旧脚本。

旧的：

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

新的：

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

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

Answer 10

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

代码

（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将日志输出到此处
- render process
  - -> render.js将日志输出到此处

屏幕截图示例

DEBUG =开发模式
- 运行./node_modules/.bin/electron .
生产=发布模式=由eletron-builder限制的 xxx.app
- 运行/path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
- 添加了export ELECTRON_ENABLE_LOGGING=true，render.js console.log ALSO 输出到main process终端

Answer 11

这是我使用的：

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 12

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

Answer 13

使用此功能，您可以使用浏览器主窗口的开发人员工具查看日志

ResourceResolver#getResource(“classpath:locker_locations.csv”)

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

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

Answer 14

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

Answer 15

很抱歉引发一个旧线程，但这是“如何将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 16

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

随着proposed in electron-react-boilerplate@v2.0.0的解决，升级到electron-devtools-installer@3.1.1，使我的console.log，console.error等语句按预期工作。

在Electron app中使用console.log（）

16 个答案:

代码

`console.log`

输出逻辑

屏幕截图示例