Verwenden von console.log () in der Electron-App

115

Wie kann ich Daten oder Nachrichten in meiner Electron-App an der Konsole protokollieren?

Diese wirklich einfache Hallo-Welt öffnet standardmäßig die Entwickler-Tools, da ich sie nicht verwenden kann console.log('hi'). Gibt es eine Alternative für 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;
  });
});
Don P.
quelle

Antworten:

158

console.log funktioniert, aber wo es sich anmeldet, hängt davon ab, ob Sie es vom Hauptprozess oder vom Renderer-Prozess aufrufen.

Wenn Sie es vom Renderer-Prozess aus aufrufen (dh JavaScript, das in Ihrer index.htmlDatei enthalten ist), wird es im Fenster der Entwicklungstools protokolliert.

Wenn Sie es vom Hauptprozess (dh von main.js) aus aufrufen, funktioniert es genauso wie in Node - es wird im Terminalfenster protokolliert. Wenn Sie Ihren Electron-Prozess vom Terminal aus starten electron ., können Sie Ihre console.logAnrufe vom dortigen Hauptprozess aus sehen.

Alex Warren
quelle
2
Kann ich console.log()vom Renderer-Prozess zum Hauptprozess?
Fandi Susanto
1
@FandiSusanto, Sie können das ipcRenderer-Modul verwenden, um eine Nachricht an Ihren Hauptprozess und anschließend an console.log () zu senden.
Arthurfreire
23
Was im Produktionsmodus anstößt, was wird` console.log () `im Hauptprozess tun
Jimmy Obonyo Abor
@ Alex Warren Ich habe console.log im Hauptprozess. Sein Druck in Termainal. Aber nachdem das Installationsprogramm erstellt wurde und wenn ich es installiere (ich habe Konsolen, wenn es installiert wird), wo wird es getröstet?
Ishwar Rimal
16
@JimmyObonyoAbor Um eine Konsole an eine Produktionselektronen- App anzuschließen und die Konsolenausgabe in Ihrem Terminal abzurufen, führen Sie die folgenden Schritte in einem Terminal aus ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Dadurch wird die Binärdatei ausgeführt MyProgramund Sie können die Prozessereignisse console.login einem Terminal anzeigen .
datUser
37

Sie können in Windows auch eine Umgebungsvariable hinzufügen:

ELECTRON_ENABLE_LOGGING=1

Dadurch werden Konsolennachrichten an Ihr Terminal ausgegeben.

deejbee
quelle
Ich habe keine Nachrichten in der Konsole gesehen, bis diese Umgebungsvariable festgelegt wurde.
DVK
7
In den Dokumenten heißt es, truedass dies auf true"Drucken der internen Protokollierung von Chrome an die Konsole" eingestellt werden sollte, was OP nicht wünscht.
Puschkin
@pushkin Es funktioniert auch mit ELECTRON_ENABLE_LOGGING=1. Und was das OP will, was ist es dann? Schauen Sie sich den folgenden Kern an, um den Effekt zu sehen.
X-Yuri
Zu welcher Datei wird ELECTRON_ENABLE_LOGGING = 1 hinzugefügt?
Still_learning
1
@Still_learning Sie legen es als Umgebungsvariable fest. Also von der Windows-Kommandozeileset ELECTRON_ENABLE_LOGGING=true
Puschkin
30

Es gibt eine andere Möglichkeit, sich innerhalb des Renderer-Prozesses an der Konsole anzumelden. Wenn dies Electron ist, können Sie auf die nativen Module von Node zugreifen. Dies beinhaltet das consoleModul.

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

Wenn dieser Code im Renderer-Prozess ausgeführt wird, gelangen Sie Hello World!in das Terminal, von dem aus Sie Electron ausgeführt haben.

Weitere Dokumentation zum Modul finden Sie unter https://nodejs.org/api/console.htmlconsole .

M. Damian Mulligan
quelle
15

Eine weitere Möglichkeit ist der Zugriff auf die Hauptprozesskonsole über remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')
raphinesse
quelle
1
Das funktioniert gut, aber wie können wir die gesamte Konsolenausgabe erfassen? dh ohne eine spezielle Funktion aufrufen zu müssen; so dass auch Ausnahmen und Fehler ausgegeben werden?
Derrick
1
Derrick: Versuchen Sie, die Umgebungsvariable ELECTRON_ENABLE_LOGGING=1einzustellen (siehe die Antwort von
deejbee
Ich versuche, in einem Hintergrundskript eine Erweiterung zu verwenden, und es funktioniert nicht, unklar, warum. (Hintergrundskripte werden im Grunde genommen als Hintergrundfenster geladen)
Narfanator
7

Neben der Antwort von M. Damian habe ich Folgendes eingerichtet, damit ich von jedem Renderer aus auf die Konsole des Hauptprozesses zugreifen kann:

Fügen Sie in Ihrer Haupt-App Folgendes hinzu:

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

In jedem Renderer können Sie hinzufügen:

const remote = require('electron').remote;
const app = remote.app;
...
app.console.log('This will output to the main process console.');
David Figatner
quelle
5
process.stdout.write('your output to command prompt console or node js ')
cscsandy5
quelle
3
Obwohl dieser Code zur Lösung des Problems beitragen kann, erklärt er nicht, warum und / oder wie er die Frage beantwortet. Die Bereitstellung dieses zusätzlichen Kontextes würde seinen langfristigen Wert erheblich verbessern. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der Einschränkungen und Annahmen.
Toby Speight
5

Sie können das Elektronenprotokoll des npm-Pakets https://www.npmjs.com/package/electron-log verwenden

Es protokolliert Ihre Fehler-, Warn-, Info-, ausführlichen, Debug- und albernen Ausgaben in Ihrem nativen Betriebssystemprotokoll.

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

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

Dies ist eine Fortsetzung der Antwort von cscsandy5 für einige zusätzliche Informationen, Informationen von hier

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

Dieser Code eignet sich hervorragend für die Ausgabe einer einfachen Debug-Nachricht an das Terminalfenster, über das Sie die Elektronen-App gestartet haben. Darauf baut console.log auf.

Hier ist ein Beispiel-Snippet (basierend auf dem Tutorialspoint electon tutorial) eines jQuery-Skripts, das bei jedem Drücken der Taste Hallo an das Terminal schreibt (Warnung: Sie müssen Ihre eigenen Zeilenumbrüche in die Ausgabezeichenfolgen einfügen!).

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

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

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

    $('#click-counter').text(clicks);
});
Harrison Telfer
quelle
2

Alles, was Alex Warren schrieb, ist wahr. Wichtig ist hier, wie Electron gestartet wird. Wenn Sie das Standardskript in der Datei package.json verwenden, funktioniert es nicht. console.log()Ersetzen Sie das alte Skript durch das neue, damit es funktioniert.

Altes:

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

Ein neues:

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

Jetzt werden alle console.log()Anrufe auch im Terminal angezeigt.

jixaw
quelle
2

Das benutze ich:

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

Anwendungsbeispiel (wie console.log):

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

Quelle: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main in der Datei logger.js. Hier sehen Sie einen realen Anwendungsfall.

Carlos Galarza
quelle
Daten müssen jedoch codiert werden (als JSON-Zeichenfolge?), Um JS-Code-Injektionen zu vermeiden.
Zmey
2

Nach einigen Nachforschungen hier mein Verständnis:

Code

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

Hinweis: welche openDevToolszum öffnen verwendenElectron Dev Tools

(2) render.js

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

(3) render.jsheißt:index.html

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

console.log

Ausgabelogik

  • Zwei Prozesse und die Ausgabe von console.log :
    • main process= NodeJS process= hierElectron UI process
      • -> console.login main.jsgibt das Protokoll hier aus
    • render process
      • -> console.login render.jsgibt das Protokoll hier aus

Screenshot Beispiel

  • Debug = Entwicklungsmodus
    • Lauf ./node_modules/.bin/electron .
  • Produktion = Freigabe mode = die xxx.app pacakged durcheletron-builder
    • Lauf /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • hinzugefügt export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log AUCH Ausgabe an main processTerminal
Crifan
quelle
1

Es tut uns leid, einen alten Thread zu erstellen, aber dies ist das Top-Ergebnis für "Ausgabe von console.log an Terminal" (oder ähnliche Suchvorgänge).

Für alle, die etwas mehr Kontrolle über die Ausgabe auf dem Terminal erlangen möchten, können Sie webContents.on ('Konsolennachricht') wie folgt verwenden:

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

Sehen:

webContents-Dokumentation

webContents-Eintrag in BrowserWindow-Dokumenten

M. Richardson
quelle
1

console.log()funktioniert gut für das Debuggen. Da das electronauf dem Browser DevToolsbasiert , bietet es Unterstützung, dass Sie devtools zum Debuggen verwenden können. Es gibt jedoch ein hysterisches Verhalten der console.log()Methode. Wenn Sie den Anruf console.log()aus main processden Elektronen App, gibt er an das Terminalfenster , von dem Sie nur die App gestartet und wenn Sie es aus rufen renderer processsie an die DevTools Konsole ausgibt.

Kiran Maniya
quelle
1

Mit diesem können Sie Entwicklertools des Hauptbrowserfensters verwenden, um Protokolle anzuzeigen

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

Das Beispiel logEverywhere('test') wird // testim Konsolenfenster der Entwicklertools des Hauptbrowserfensters ausgegeben

Möglicherweise müssen Sie diese Methode verbessern, um mehrere Argumente zu akzeptieren (Sie können dies mit dem Spread-Operator von es6 tun).

Freddy Daniel
quelle
1

Nun, dies ist 2019 und ich kann nicht glauben, dass niemand diesen Trick in allen obigen Antworten erwähnt hat. Ok, wie wäre es, wenn Sie sich direkt von der Hauptkonsole aus direkt bei der Browserkonsole anmelden? Ich habe meine Antwort hier gegeben: https://stackoverflow.com/a/58913251/8764808 Schauen Sie mal rein.

Wale
quelle
Danke @Wale! Würde es Ihnen etwas ausmachen, Ihre Antwort zu formulieren? Ich habe nichts gegen den Link zu einer anderen Frage, aber viele Mods hier werden wütend, wenn es darum geht, Antworten auch mit SO zu vernetzen.
Don P
Eigentlich hätte ich es gerne getan, aber als ich das das letzte Mal versuchte, wurde ich wegen doppelter Antworten gerügt.
Wale