Utilisation de console.log () dans l'application Electron

117

Comment puis-je enregistrer des données ou des messages sur la console dans mon application Electron?

Ce hello world vraiment basique ouvre les outils de développement par défaut, je ne peux pas l'utiliser console.log('hi'). Existe-t-il une alternative à 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
la source

Réponses:

159

console.log fonctionne, mais où il se connecte dépend de si vous l'appelez à partir du processus principal ou du processus de rendu.

Si vous l'appelez à partir du processus de rendu (c'est-à-dire JavaScript qui est inclus dans votre index.htmlfichier), il sera enregistré dans la fenêtre des outils de développement.

Si vous l'appelez depuis le processus principal (c'est-à-dire dans main.js), il fonctionnera de la même manière que dans Node - il se connectera à la fenêtre du terminal. Si vous démarrez votre processus Electron à partir du Terminal en utilisant, electron .vous pouvez voir vos console.logappels depuis le processus principal.

Alex Warren
la source
2
Puis-je accéder console.log()au processus principal du processus de rendu?
Fandi Susanto
1
@FandiSusanto, vous pouvez utiliser le module ipcRenderer pour envoyer un message à votre processus principal et, ensuite, console.log () à l'intérieur.
arthursfreire
23
Qu'est-ce qui touche en mode de production, que fera console.log () dans le processus principal
Jimmy Obonyo Abor
16
@JimmyObonyoAbor Pour connecter une console à une application d'électrons de production et obtenir la sortie de la console dans votre terminal, exécutez ce qui suit dans un terminal ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Cela exécutera le binaire MyProgramet vous permettra de visualiser les console.logévénements de processus dans un terminal.
datUser
comment puis-je toujours enregistrer des choses sur le terminal après la réinitialisation de l'application via app.relaunch()et app.exit(0)???
oldboy le
38

Vous pouvez également ajouter une variable d'environnement dans Windows:

ELECTRON_ENABLE_LOGGING=1

Cela affichera les messages de la console sur votre terminal.

deejbee
la source
Je n'ai vu aucun message dans la console tant que cette variable d'environnement n'a pas été définie.
DVK du
7
La documentation indique que cela devrait être défini sur trueet que le définir sur true"imprime la journalisation interne de Chrome sur la console", ce qui n'est pas ce que OP souhaite.
pushkin
@pushkin Cela fonctionne ELECTRON_ENABLE_LOGGING=1aussi avec . Et quant à ce que veut l'OP, qu'est-ce que c'est alors? Jetez un œil à l' essentiel suivant pour voir l'effet.
x-yuri
À quel fichier est ajouté le ELECTRON_ENABLE_LOGGING = 1?
Still_learning
1
@Still_learning vous le définissez comme une variable d'environnement. donc à partir de la ligne de commande Windowsset ELECTRON_ENABLE_LOGGING=true
pushkin
30

Il existe une autre façon de se connecter à la console depuis le processus de rendu. Étant donné qu'il s'agit d'Electron, vous pouvez accéder aux modules natifs de Node. Cela inclut le consolemodule.

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

Lorsque ce code est exécuté depuis l'intérieur du processus de rendu, vous accédez Hello World!au terminal à partir duquel vous avez exécuté Electron.

Voir https://nodejs.org/api/console.html pour plus de documentation sur le consolemodule.

M. Damian Mulligan
la source
15

Une autre possibilité est d'accéder à la console de processus principale en utilisant remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')
raphinesse
la source
1
Cela fonctionne très bien, mais comment pouvons-nous capturer toute la sortie de la console; ie- sans avoir à appeler une fonction spéciale; de sorte que les exceptions et les erreurs sont également produites?
Derrick
1
Derrick: Essayez de définir la variable d'environnement ELECTRON_ENABLE_LOGGING=1(voir la réponse de deejbee)
raphinesse
J'essaie d'utiliser à l'intérieur d'un script d'arrière-plan pour une extension, et cela ne fonctionne pas, je ne sais pas pourquoi. (les scripts d'arrière-plan sont chargés en tant que fenêtres d'arrière-plan, en gros)
Narfanator
7

En plus de la réponse de M. Damian, voici comment je l'ai configuré pour pouvoir accéder à la console du processus principal à partir de n'importe quel moteur de rendu.

Dans votre application principale, ajoutez:

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

Dans n'importe quel moteur de rendu, vous pouvez ajouter:

const remote = require('electron').remote;
const app = remote.app;
...
app.console.log('This will output to the main process console.');
David Figatner
la source
5
process.stdout.write('your output to command prompt console or node js ')
cscsandy5
la source
4
Bien que ce code puisse aider à résoudre le problème, il n'explique pas pourquoi et / ou comment il répond à la question. Fournir ce contexte supplémentaire améliorerait considérablement sa valeur à long terme. Veuillez modifier votre réponse pour ajouter des explications, y compris les limites et les hypothèses applicables.
Toby Speight du
5

Vous pouvez utiliser le package npm electron-log https://www.npmjs.com/package/electron-log

Il enregistrera votre erreur, avertissement, info, verbose, débogage, sorties stupides dans votre journal natif du système d'exploitation.

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

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

Ceci est un suivi de la réponse de cscsandy5 pour quelques informations supplémentaires, info d' ici

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

Ce code fonctionne très bien pour simplement envoyer un simple message de débogage dans la fenêtre du terminal à partir de laquelle vous avez lancé l'application electron et c'est sur quoi console.log est construit.

Voici un exemple d'extrait de code (basé sur le tutoriel tutorialspoint electon) d'un script jQuery qui écrira bonjour sur le terminal à chaque fois que vous appuyez sur le bouton (attention: vous devez ajouter vos propres sauts de ligne dans les chaînes de sortie!)

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
la source
2

Tout ce qu'Alex Warren a écrit est vrai. Il est important de savoir comment Electron est démarré. Si vous utilisez le script standard dans le fichier package.json , cela ne fonctionnera pas. Faireconsole.log() fonctionner, remplacez l'ancien script par ce nouveau.

Le vieux:

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

Nouveau:

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

Désormais, tous les console.log()appels sont également affichés dans le terminal.

mâchoire
la source
2

C'est ce que j'utilise:

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

Exemple d'utilisation (identique à console.log):

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

Source: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main dans le fichier logger.js, ici vous pouvez voir un cas d'utilisation réel.

Carlos Galarza
la source
Les données doivent cependant être encodées (sous forme de chaîne JSON?) Pour éviter les injections de code JS.
Zmey
2

Après quelques recherches, voici ma compréhension:

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

Remarque: quelle utilisation openDevToolspour ouvrirElectron Dev Tools

(2) render.js

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

(3) render.jsest appelé par:index.html

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

console.log

Logique de sortie

  • deux processus et sa sortie console.log :
    • main process= NodeJS process= iciElectron UI process
      • -> console.login main.jsaffichera le journal ici
    • render process
      • -> console.login render.jsaffichera le journal ici

Exemple de capture d'écran

  • DEBUG = Mode de développement
    • courir ./node_modules/.bin/electron .
  • Production = mode de sortie = le xxx.app emballé pareletron-builder
    • courir /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • ajouté export ELECTRON_ENABLE_LOGGING=true, sortie render.jsconsole.log ÉGALEMENT vers le main processterminal
crifan
la source
1

Désolé de créer un ancien fil de discussion, mais c'est le meilleur résultat pour "comment afficher console.log vers le terminal" (ou des recherches similaires.

Pour ceux qui cherchent à gagner un peu plus de contrôle sur ce qui est sorti sur le terminal, vous pouvez utiliser webContents.on ('console-message') comme ceci:

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

Voir:

Documentation webContents

Entrée webContents sur la documentation BrowserWindow

M. Richardson
la source
1

console.log()fonctionnera bien pour le débogage. Comme le electronest construit au-dessus du navigateur, il prend en DevToolscharge vous pouvez utiliser devtools à des fins de débogage. Cependant, il existe un comportement hystérique de la console.log()méthode. Lorsque vous appelez l'application console.log()from main processof electron, elle s'affiche dans la fenêtre du terminal à partir de laquelle vous venez de lancer l'application et lorsque vous l'appelez, renderer processelle s'affiche sur la console DevTools.

Kiran Maniya
la source
1

Avec cela, vous pouvez utiliser les outils de développement de la fenêtre principale du navigateur pour voir les journaux

    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'exemple logEverywhere('test') sera affiché // testdans le panneau de la console des outils de développement de la fenêtre principale du navigateur

Vous devrez peut-être améliorer cette méthode pour accepter plusieurs arguments (vous pouvez le faire avec l'opérateur de propagation par es6)

Freddy Daniel
la source
1

Eh bien, nous sommes en 2019 et je ne peux pas croire que personne n'ait mentionné cette astuce dans toutes les réponses ci-dessus. Ok, alors, que diriez-vous de vous connecter directement à la console du navigateur directement à partir du principal? J'ai fourni ma réponse ici: https://stackoverflow.com/a/58913251/8764808 Jetez un coup d'œil.

Wale
la source
Merci @Wale! Pourriez-vous ajouter votre réponse? Le lien vers une autre question ne me dérange pas, mais beaucoup de mods ici sont énervés à propos des réponses croisées, même avec SO.
Don P
J'aurais adoré, mais encore une fois, la dernière fois que j'ai essayé de le faire, j'ai été réprimandé pour avoir dupliqué les réponses.
Wale