Usando console.log () en la aplicación Electron

116

¿Cómo puedo registrar datos o mensajes en la consola en mi aplicación Electron?

Este hola mundo realmente básico abre las herramientas de desarrollo de forma predeterminada, por lo que no puedo usar console.log('hi'). ¿Existe una alternativa para 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
fuente

Respuestas:

158

console.log funciona, pero dónde se registra depende de si lo llama desde el proceso principal o desde el proceso del renderizador.

Si lo llama desde el proceso de renderizado (es decir, JavaScript que se incluye en su index.htmlarchivo), se registrará en la ventana de herramientas de desarrollo.

Si lo llama desde el proceso principal (es decir, en main.js), funcionará de la misma manera que en Node: se registrará en la ventana de terminal. Si está iniciando su proceso de Electron desde la Terminal usando electron ., puede ver sus console.logllamadas desde el proceso principal allí.

Alex Warren
fuente
2
¿Puedo console.log()realizar el proceso principal desde el proceso del renderizador?
Fandi Susanto
1
@FandiSusanto, puede usar el módulo ipcRenderer para enviar un mensaje a su proceso principal y, luego, console.log () dentro de él.
Artursfreire
23
Lo que colinda en el modo de producción, lo que hará` console.log () `en el proceso principal
Jimmy Obonyo Abor
16
@JimmyObonyoAbor Para conectar una consola a una aplicación electrónica de producción y obtener la salida de la consola en su terminal, ejecute lo siguiente en una terminal ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Esto ejecutará el binario MyProgramy le permitirá ver los console.logeventos del proceso en una terminal.
datUser
¿Cómo puedo registrar cosas en el terminal después de restablecer la aplicación a través de app.relaunch()y app.exit(0)???
oldboy
38

También puede agregar una variable de entorno en Windows:

ELECTRON_ENABLE_LOGGING=1

Esto enviará mensajes de la consola a su terminal.

deejbee
fuente
No vi ningún mensaje en la consola hasta que se estableció esta variable de entorno.
DVK
7
Los documentos dicen que debería establecerse en truey que establecerlo en true"imprime el registro interno de Chrome en la consola", que no es lo que OP quiere.
Pushkin
@pushkin También funciona con ELECTRON_ENABLE_LOGGING=1. Y en cuanto a lo que quiere el OP, ¿qué es entonces? Eche un vistazo a la siguiente esencia para ver el efecto.
x-yuri
¿A qué archivo se agrega ELECTRON_ENABLE_LOGGING = 1?
Still_learning
1
@Still_learning lo configura como una variable de entorno. así que desde la línea de comandos de Windowsset ELECTRON_ENABLE_LOGGING=true
pushkin
30

Hay otra forma de iniciar sesión en la consola desde el interior del proceso de renderizado. Dado que esto es Electron, puede acceder a los módulos nativos de Node. Esto incluye el consolemódulo.

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

Cuando este código se ejecuta desde dentro del proceso de renderizado, accederá Hello World!a la terminal desde la que ejecutó Electron.

Consulte https://nodejs.org/api/console.html para obtener más documentación sobre el consolemódulo.

M. Damian Mulligan
fuente
15

Otra posibilidad más es acceder a la consola de proceso principal usando remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')
raphinesse
fuente
1
Esto funciona muy bien, pero ¿cómo podemos capturar toda la salida de la consola? es decir, sin tener que llamar a una función especial; tal que también se generen excepciones y errores?
Derrick
1
Derrick: intente configurar la variable de entorno ELECTRON_ENABLE_LOGGING=1(consulte la respuesta de deejbee)
raphinesse
Estoy tratando de usar dentro de un script en segundo plano para una extensión, y no funciona, no está claro por qué. (Los scripts de fondo se cargan como ventanas de fondo, básicamente)
Narfanator
7

Agregando a la respuesta de M. Damian, así es como lo configuré para poder acceder a la consola del proceso principal desde cualquier renderizador.

En su aplicación principal, agregue:

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

En cualquier renderizador, puede agregar:

const remote = require('electron').remote;
const app = remote.app;
...
app.console.log('This will output to the main process console.');
David Figatner
fuente
5
process.stdout.write('your output to command prompt console or node js ')
cscsandy5
fuente
4
Aunque este código puede ayudar a resolver el problema, no explica por qué y / o cómo responde la pregunta. Proporcionar este contexto adicional mejoraría significativamente su valor a largo plazo. Por favor, editar su respuesta para agregar explicación, incluyendo lo que se aplican limitaciones y supuestos.
Toby Speight
5

Puede utilizar el paquete npm electron-log https://www.npmjs.com/package/electron-log

Registrará su error, advertencia, información, detallado, depuración, salidas tontas en su registro de sistema operativo nativo.

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

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

Este es un seguimiento de la respuesta de cscsandy5 para obtener información adicional, información de aquí

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

Este código funciona muy bien para enviar un simple mensaje de depuración a la ventana de terminal desde la que inició la aplicación electron y es sobre lo que se construye console.log.

Aquí hay un fragmento de ejemplo (basado en el tutorial de tutorialspoint electon) de un script de jQuery que escribirá hola en el terminal cada vez que se presione el botón (advertencia: ¡debe agregar sus propios saltos de línea en las cadenas de salida!)

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
fuente
2

Todo lo que escribió Alex Warren es cierto. Aquí es importante cómo se inicia Electron. Si usa el script estándar en el archivo package.json , no funcionará. Para que console.log()funcione, reemplace el antiguo script por este nuevo.

El viejo:

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

Uno nuevo:

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

Ahora todas las console.log()llamadas también se muestran en el terminal.

jixaw
fuente
2

Esto es lo que 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 + "');");
}

Uso de ejemplo (igual que console.log):

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

Fuente: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main en el archivo logger.js, aquí puede ver un caso de uso real.

Carlos Galarza
fuente
Sin embargo, los datos deben codificarse (¿como una cadena JSON?) Para evitar inyecciones de código JS.
Zmey
2

Después de alguna investigación, aquí mi entendimiento:

Código

(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: que uso openDevToolspara abrirElectron Dev Tools

(2) render.js

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

(3) render.jses llamado por:index.html

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

console.log

Lógica de salida

  • dos procesos y su salida console.log :
    • main process= NodeJS process= aquíElectron UI process
      • -> console.login main.jsdará salida al registro aquí
    • render process
      • -> console.login render.jsdará salida al registro aquí

Ejemplo de captura de pantalla

  • DEBUG = Modo de desarrollo
    • correr ./node_modules/.bin/electron .
  • Producción = Modo de lanzamiento = el paquete xxx.app cargado poreletron-builder
    • correr /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • agregado export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log TAMBIÉN salida a la main processterminal
crifan
fuente
1

Perdón por levantar un hilo antiguo, pero este es el resultado principal de "cómo enviar console.log a la terminal" (o búsquedas similares.

Para cualquiera que busque obtener un poco más de control sobre lo que se envía al terminal, puede usar webContents.on ('console-message') así:

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

Ver:

WebContents Documentación

entrada webContents en los documentos de BrowserWindow

M. Richardson
fuente
1

console.log()funcionará bien para la depuración. Como electronestá construido sobre el navegador, tiene DevToolssoporte, puede usar devtools con fines de depuración. Sin embargo, hay un comportamiento histérico de console.log()método. Cuando llame a la aplicación console.log()from main processof electron, saldrá a la ventana de terminal desde donde acaba de iniciar la aplicación y cuando la llame desde renderer process, saldrá a la consola DevTools.

Kiran Maniya
fuente
1

Con esto, puede usar las herramientas de desarrollo de la ventana principal del navegador para ver los registros

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

El ejemplo logEverywhere('test') aparecerá // testen el panel de la consola de las herramientas de desarrollo de la ventana principal del navegador.

Es posible que necesite mejorar este método para aceptar múltiples argumentos (puede hacerlo con el operador de propagación por es6)

Freddy Daniel
fuente
1

Bueno, esto es 2019 y no puedo creer que nadie haya mencionado este truco en todas las respuestas anteriores. Bien, entonces, ¿qué tal iniciar sesión directamente en la consola del navegador directamente desde la pantalla principal? Proporcioné mi respuesta aquí: https://stackoverflow.com/a/58913251/8764808 Eche un vistazo.

Wale
fuente
¡Gracias @Wale! ¿Le importaría incluir su respuesta? No me importa el enlace a otra pregunta, pero muchos mods aquí se enojan con las respuestas de enlace cruzado incluso con SO.
Don P
De hecho, me hubiera encantado, pero de nuevo, la última vez que intenté hacer eso, fui reprendido por duplicar respuestas.
Wale