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

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.

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

ELECTRON_ENABLE_LOGGING=1

Cela affichera les messages de la console sur votre terminal.

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.

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

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

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

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

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

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.

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.

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
    • 

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

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.

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)

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.