Come posso registrare dati o messaggi sulla console nella mia app Electron?

Questo ciao mondo davvero semplice apre gli strumenti di sviluppo per impostazione predefinita, non sono in grado di usarli console.log('hi'). Esiste un'alternativa a 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 funziona, ma dove accede dipende dal fatto che lo chiami dal processo principale o dal processo di rendering.

Se lo chiami dal processo di rendering (cioè JavaScript che è incluso dal tuo index.htmlfile) verrà registrato nella finestra degli strumenti di sviluppo.

Se lo chiami dal processo principale (cioè in main.js) funzionerà allo stesso modo di Node: registrerà nella finestra del terminale. Se stai avviando il tuo processo Electron dal Terminale utilizzando electron ., puoi vedere le tue console.logchiamate dal processo principale lì.

Puoi anche aggiungere una variabile d'ambiente in Windows:

ELECTRON_ENABLE_LOGGING=1

Questo invierà messaggi di console al tuo terminale.

C'è un altro modo per accedere alla console dall'interno del processo di rendering. Dato che si tratta di Electron, puoi accedere ai moduli nativi di Node. Questo include il consolemodulo.

var nodeConsole = require('console');
var myConsole = new nodeConsole.Console(process.stdout, process.stderr);
myConsole.log('Hello World!');

Quando questo codice viene eseguito dall'interno del processo di rendering, entrerai Hello World!nel terminale da cui hai eseguito Electron.

Vedere https://nodejs.org/api/console.html per ulteriore documentazione sul consolemodulo.

Un'altra possibilità è accedere alla console del processo principale utilizzando remote.getGlobal(name):

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

Aggiungendo alla risposta di M. Damian, ecco come l'ho impostato in modo da poter accedere alla console del processo principale da qualsiasi renderer.

Nella tua app principale, aggiungi:

const electron = require('electron');
const app = electron.app;
const console = require('console');
...
app.console = new console.Console(process.stdout, process.stderr);

In qualsiasi renderer, puoi aggiungere:

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

È possibile utilizzare il pacchetto npm electron-log https://www.npmjs.com/package/electron-log

Registrerà il tuo errore, avvertirà, informazioni, verbose, debug, stupidi output nel tuo log del sistema operativo nativo.

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

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

Questo è un seguito alla risposta di cscsandy5 per alcune informazioni aggiuntive, informazioni da qui

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

Questo codice funziona alla grande solo per inviare un semplice messaggio di debug alla finestra del terminale da cui hai avviato l'app di electron ed è ciò su cui si basa console.log.

Ecco uno snippet di esempio (basato sul tutorial tutorialspoint electon) di uno script jQuery che scriverà ciao al terminale ogni volta che viene premuto il pulsante (avviso: è necessario aggiungere le proprie interruzioni di riga nelle stringhe di output!)

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

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

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

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

Tutto ciò che ha scritto Alex Warren è vero. Importante qui è come viene avviato Electron. Se utilizzi lo script standard nel file package.json , non funzionerà. Per far console.log()funzionare, sostituire il vecchio script con questo nuovo.

Vecchia:

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

Nuovo:

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

Ora tutte le console.log()chiamate vengono visualizzate anche nel terminale.

Questo è quello che uso:

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 + "');");
}

Esempio di utilizzo (uguale a console.log):

log('Error', { msg: 'a common log message' })
log('hello')

Fonte: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main nel file logger.js, qui puoi vedere un caso d'uso reale.

Dopo alcune indagini, ecco la mia comprensione:

Codice

(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
  })
}
...

Nota: quale uso openDevToolsaprireElectron Dev Tools

(2) render.js

const zerorpc = require("zerorpc")
...
    console.log("clientStart %d server is ready", PORT_START)
...
})

(3) render.jsè chiamato da:index.html

<!DOCTYPE html>
<html>
...
  <script>
    require('./renderer.js')
  </script>
</html>

console.log

Logica di uscita

• due processi e il relativo output console.log :
  • main process= NodeJS process= quiElectron UI process
    • -> console.login main.jsprodurrà il log qui
  • render process
    • -> console.login render.jsprodurrà il log qui

Esempio di screenshot

• DEBUG = Modalità di sviluppo
  • correre ./node_modules/.bin/electron .
    • 
• Produzione = modalità di rilascio = xxx.app pacakged daeletron-builder
  • correre /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • aggiunto export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log ANCHE l' output al main processterminale
    • 

Mi dispiace sollevare un vecchio thread ma questo è il risultato principale per "come inviare console.log al terminale" (o ricerche simili.

Per chiunque cerchi di ottenere un po 'più di controllo su ciò che viene inviato al terminale, è possibile utilizzare webContents.on (' console-message ') in questo modo:

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

Vedere:

documentazione webContents

voce webContents nei documenti di BrowserWindow

console.log()funzionerà bene per il debug. Poiché electronè costruito sulla parte superiore del browser, ha il DevToolssupporto che puoi usare devtools a scopo di debug. Tuttavia, c'è un comportamento isterico del console.log()metodo. Quando chiami l' app console.log()da main processdi electron, verrà visualizzato nella finestra del terminale da cui hai appena avviato l'app e quando lo chiami da renderer processesso verrà visualizzato nella console DevTools.

Con questo è possibile utilizzare gli strumenti di sviluppo della finestra principale del browser per visualizzare i registri

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

L'esempio logEverywhere('test') verrà visualizzato // testnel pannello della console degli strumenti di sviluppo della finestra principale del browser

Potrebbe essere necessario migliorare questo metodo per accettare più argomenti (puoi farlo con l'operatore spread di es6)

Bene, questo è il 2019 e non posso credere che nessuno abbia menzionato questo trucco in tutte le risposte sopra. Ok, allora, che ne dici di accedere direttamente alla console del browser direttamente dal principale? Ho fornito la mia risposta qui: https://stackoverflow.com/a/58913251/8764808 Dai un'occhiata.