Usando console.log () no aplicativo Electron

115

Como posso registrar dados ou mensagens no console do meu aplicativo Electron?

Este Hello World realmente básico abre as ferramentas de desenvolvimento por padrão, mas não consigo usar console.log('hi'). Existe uma alternativa para o 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
fonte

Respostas:

158

console.log funciona, mas para onde ele se conecta depende de você chamá-lo do processo principal ou do processo de renderização.

Se você chamá-lo do processo de renderização (ou seja, JavaScript que está incluído em seu index.htmlarquivo), ele será registrado na janela de ferramentas de desenvolvimento.

Se você chamá-lo a partir do processo principal (ou seja, em main.js), ele funcionará da mesma maneira que no Node - ele será registrado na janela do terminal. Se você estiver iniciando o processo Electron do Terminal usando, electron .poderá ver suas console.logchamadas do processo principal lá.

Alex Warren
fonte
2
Posso console.log()processar o processo principal do processo de renderização?
Fandi Susanto
1
@FandiSusanto, você pode usar o módulo ipcRenderer para enviar uma mensagem para o seu processo principal e, a seguir, console.log () dentro dele.
arthursfreire
23
O que acontecerá no modo de produção, o que `console.log ()` no processo principal fará
Jimmy Obonyo Abor
16
@JimmyObonyoAbor Para conectar um console a um aplicativo eletrônico de produção e obter a saída do console em seu terminal, execute o seguinte em um terminal ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Isso executará o binário MyPrograme permitirá que você visualize os console.logeventos do processo em um terminal.
datUser
como posso ainda registrar coisas no terminal depois de redefinir o aplicativo via app.relaunch()e app.exit(0)???
oldboy
37

Você também pode adicionar uma variável de ambiente no Windows:

ELECTRON_ENABLE_LOGGING=1

Isso irá gerar mensagens de console para o seu terminal.

DJ
fonte
Não vi nenhuma mensagem no console até que esta variável de ambiente foi definida.
DVK
7
Os documentos dizem que deve ser definido como truee que defini-lo como true"imprime o registro interno do Chrome no console", o que não é o que o OP deseja.
pushkin de
@pushkin Também funciona com ELECTRON_ENABLE_LOGGING=1. E quanto ao que o OP quer, o que é então? Dê uma olhada na essência a seguir para ver o efeito.
x-yuri
Em qual arquivo ELECTRON_ENABLE_LOGGING = 1 foi adicionado?
Still_learning
1
@Still_learning você o define como uma variável de ambiente. então, a partir da linha de comando do Windowsset ELECTRON_ENABLE_LOGGING=true
pushkin
30

Existe outra maneira de fazer logon no console de dentro do processo de renderização. Dado que este é o Electron, você pode acessar os módulos nativos do Node. Isso inclui o consolemódulo.

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

Quando este código é executado de dentro do processo de renderização, você obterá Hello World!o terminal a partir do qual executou o Electron.

Consulte https://nodejs.org/api/console.html para obter mais documentação sobre o consolemódulo.

M. Damian Mulligan
fonte
15

Outra possibilidade é acessar o console de processo principal usando remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')
rapidez
fonte
1
Isso funciona muito bem, mas como podemos capturar toda a saída do console; ie- sem ter que chamar uma função especial; de forma que exceções e erros também sejam produzidos?
Derrick de
1
Derrick: Tente definir a variável de ambiente ELECTRON_ENABLE_LOGGING=1(veja a resposta de deejbee)
raphinesse
Estou tentando usar dentro de um script de plano de fundo para uma extensão e não está funcionando, não está claro por quê. (scripts de fundo são carregados como janelas de fundo, basicamente)
Narfanator
7

Somando-se à resposta de M. Damian, aqui está como eu configurei para poder acessar o console do processo principal de qualquer renderizador:

em seu aplicativo principal, adicione:

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

em qualquer renderizador, você pode adicionar:

const remote = require('electron').remote;
const app = remote.app;
...
app.console.log('This will output to the main process console.');
David Figatner
fonte
5
process.stdout.write('your output to command prompt console or node js ')
cscsandy5
fonte
3
Embora este código possa ajudar a resolver o problema, ele não explica por que e / ou como responde à pergunta. Fornecer esse contexto adicional melhoraria significativamente seu valor a longo prazo. Por favor edite sua resposta para adicionar explicação, incluindo o que limitações e premissas se aplicam.
Toby Speight,
5

Você pode usar o pacote npm electron-log https://www.npmjs.com/package/electron-log

Ele irá registrar seu erro, aviso, informações, verbose, depuração, saídas bobas em seu log do sistema operacional nativo.

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

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

Esta é uma continuação da resposta de cscsandy5 para algumas informações adicionais, informações aqui

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

Este código funciona muito bem apenas para enviar uma mensagem de depuração simples para a janela do terminal a partir da qual você iniciou o aplicativo electron e é sobre o que console.log é construído.

Aqui está um trecho de exemplo (baseado em tutorialspoint electon tutorial) de um script jQuery que escreverá olá para o terminal toda vez que o botão for pressionado (aviso: você precisa adicionar suas próprias quebras de linha nas strings de saída!)

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

Tudo o que Alex Warren escreveu é verdade. Importante aqui é como o Electron é iniciado. Se você usar o script padrão no arquivo package.json, ele não funcionará. Para fazer console.log()funcionar, substitua o script antigo por este novo.

Antigo:

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

Novo:

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

Agora, todas as console.log()chamadas são exibidas no terminal também.

mandíbula
fonte
2

Isso é o que eu 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 + "');");
}

Exemplo de uso (igual 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 no arquivo logger.js, aqui você pode ver um caso de uso real.

Carlos Galarza
fonte
Porém, os dados precisam ser codificados (como string JSON?) Para evitar injeções de código JS.
Zmey
2

Após alguma investigação, aqui está o meu entendimento:

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 use openDevToolspara abrirElectron Dev Tools

(2) render.js

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

(3) render.jsé chamado por:index.html

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

console.log

Saída Lógica

  • dois processos e sua saída console.log :
    • main process= NodeJS process= aquiElectron UI process
      • -> console.logem main.jsirá gerar o log para aqui
    • render process
      • -> console.logem render.jsirá gerar o log para aqui

Exemplo de captura de tela

  • DEBUG = modo de desenvolvimento
    • corre ./node_modules/.bin/electron .
  • Produção = modo de liberação = o xxx.app compactado poreletron-builder
    • corre /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • adicionado export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log TAMBÉM saída para o main processterminal
crifan
fonte
1

Desculpe levantar um tópico antigo, mas este é o principal resultado para "como enviar console.log para o terminal" (ou pesquisas semelhantes.

Para quem deseja obter um pouco mais de controle sobre o que é enviado para o terminal, você pode usar webContents.on ('console-message') assim:

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

Vejo:

Documentação webContents

entrada webContents nos documentos do BrowserWindow

M. Richardson
fonte
1

console.log()funcionará bem para depuração. Como o electroné construído em cima do navegador, ele tem DevToolssuporte para você usar devtools para fins de depuração. No entanto, existe um comportamento histérico do console.log()método. Quando você chama o aplicativo console.log()from main processdo electron, ele será enviado para a janela do terminal de onde você acabou de renderer processiniciar o aplicativo e, quando você chamá- lo, será enviado para o console do DevTools.

Kiran Maniya
fonte
1

Com isso, você pode usar as ferramentas de desenvolvedor da janela principal do navegador para ver os logs

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

O exemplo logEverywhere('test') será gerado // testno painel do console das ferramentas de desenvolvedor da janela principal do navegador

Você pode precisar aprimorar este método para aceitar vários argumentos (você pode fazer isso com o operador spread por es6)

Freddy Daniel
fonte
1

Bem, estamos em 2019 e não acredito que ninguém mencionou esse truque em todas as respostas acima. Ok, então, que tal fazer login diretamente no console do navegador diretamente do principal? Forneci minha resposta aqui: https://stackoverflow.com/a/58913251/8764808 Dê uma olhada.

Wale
fonte
Obrigado @Wale! Você se importaria de inserir sua resposta? Eu não me importo com o link para outra pergunta, mas muitos mods aqui ficam irritados com a ligação cruzada de respostas, mesmo com SO.
Don P
Eu teria adorado, mas, novamente, a última vez que tentei fazer isso, fui repreendido por duplicar respostas.
Wale de