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

console.log 動作しますが、ログがどこに記録されるかは、メインプロセスから呼び出すか、レンダラープロセスから呼び出すかによって異なります。

レンダラープロセス（つまり、index.htmlファイルに含まれているJavaScript）から呼び出すと、開発ツールウィンドウに記録されます。

メインプロセス（つまりmain.js）から呼び出すと、Nodeの場合と同じように機能し、ターミナルウィンドウにログが記録されます。ターミナルを使用してElectronプロセスを開始している場合は、メインプロセスからの呼び出し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.htmlを参照してくださいconsole。

さらに別の可能性は、以下を使用してメインプロセスコンソールにアクセスすることremote.getGlobal(name)です。

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

M.ダミアンの答えに加えて、次のように設定して、任意のレンダラーからメインプロセスのコンソールにアクセスできるようにします。

メインアプリに追加：

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パッケージelectron-logを使用できますhttps://www.npmjs.com/package/electron-log

エラー、警告、情報、詳細、デバッグ、愚かな出力をネイティブのosログに記録します。

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

このコードは、electronアプリを起動したターミナルウィンドウに単純なデバッグメッセージを出力するのに最適で、console.logがその上に構築されています。

これは、ボタンが押されるたびにhelloをターミナルに書き込む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);
});

アレックス・ウォーレンが書いたことはすべて真実です。ここで重要なのは、Electronの起動方法です。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')

ソース：https : //github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main in logger.jsファイル、ここで実際の使用例を見ることができます。

いくつかの調査の後、ここで私の理解：

コード

（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

出力ロジック

• 2つのプロセスとそのconsole.log出力：
  • main process= NodeJS process=ここElectron UI process
    • -> console.login main.jsはここにログを出力します
  • render process
    • -> console.login render.jsはここにログを出力します

スクリーンショットの例

• DEBUG =開発モード
  • 走る ./node_modules/.bin/electron .
    • 
• Production = Release mode = パッケージ化されたxxx.appeletron-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 docsのwebContentsエントリ

console.log()デバッグには問題なく動作します。electronブラウザの上に構築され、それはしているDevToolsあなたが目的をデバッグするためのデベロッパーツールを使用することができますサポートしています。ただし、console.log()メソッドにはヒステリックな動作があります。お問い合わせの際console.log()からmain process電子アプリの、それはあなたが単にアプリを立ち上げ、そこからターミナルウィンドウへの出力あなたからそれを呼び出すときrenderer process、それは意志デベロッパーツールのコンソールに出力されます。

これにより、メインのブラウザウィンドウの開発者ツールを使用してログを確認できます

    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により、spreadオペレーターを使用して実行できます）。

さて、これは2019年であり、私は上記のすべての答えでこのトリックを誰も言及しなかったとは信じられません。では、メインから直接ブラウザコンソールに直接ログインしてみてはいかがでしょうか。私はここに私の答えを提供しました：https : //stackoverflow.com/a/58913251/8764808 見てください。