Bagaimana saya bisa mencatat data atau pesan ke konsol di aplikasi Electron saya?

Halo dunia yang sangat mendasar ini membuka alat dev secara default, oleh saya tidak dapat menggunakan console.log('hi'). Apakah ada alternatif untuk 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 berfungsi, tetapi tempat log masuk bergantung pada apakah Anda memanggilnya dari proses utama atau proses perender.

Jika Anda memanggilnya dari proses renderer (yaitu JavaScript yang disertakan dari index.htmlfile Anda ) itu akan dicatat ke jendela alat dev.

Jika Anda memanggilnya dari proses utama (yaitu masuk main.js), ini akan bekerja dengan cara yang sama seperti di Node - ini akan masuk ke jendela terminal. Jika Anda memulai proses Elektron dari Terminal menggunakan electron .Anda dapat melihat console.logpanggilan Anda dari proses utama di sana.

Anda juga dapat menambahkan variabel lingkungan di windows:

ELECTRON_ENABLE_LOGGING=1

Ini akan mengeluarkan pesan konsol ke terminal Anda.

Ada cara lain untuk masuk ke konsol dari dalam proses renderer. Mengingat ini adalah Electron, Anda dapat mengakses modul asli Node. Ini termasuk consolemodul.

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

Ketika kode ini dijalankan dari dalam proses renderer, Anda akan masuk Hello World!ke terminal tempat Anda menjalankan Electron.

Lihat https://nodejs.org/api/console.html untuk dokumentasi lebih lanjut tentang consolemodul.

Namun kemungkinan lain adalah mengakses konsol proses utama menggunakan remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')

Menambah jawaban M. Damian, berikut cara saya mengaturnya sehingga saya dapat mengakses konsol proses utama dari perender mana pun.

Di aplikasi utama Anda, tambahkan:

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

Di perender mana pun, Anda dapat menambahkan:

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

Anda dapat menggunakan electron-log paket npm https://www.npmjs.com/package/electron-log

Ini akan mencatat kesalahan Anda, memperingatkan, info, verbose, debug, keluaran konyol di log os asli Anda.

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

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

Ini adalah tindak lanjut jawaban cscsandy5 untuk beberapa informasi tambahan, info dari sini

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

Kode ini bekerja sangat baik untuk hanya mengeluarkan pesan debug sederhana ke jendela terminal tempat Anda meluncurkan aplikasi elektron dan dari situlah console.log dibangun di atasnya.

Berikut adalah contoh cuplikan (berdasarkan tutorial tutorialspoint electon) dari skrip jQuery yang akan menulis halo ke terminal setiap kali tombol ditekan (peringatan: Anda perlu menambahkan jeda baris Anda sendiri di string keluaran!)

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

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

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

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

Semua yang ditulis Alex Warren benar. Penting di sini adalah bagaimana Electron dimulai. Jika Anda menggunakan skrip standar di file package.json itu tidak akan berfungsi. Untuk membuat console.log()pekerjaan, ganti skrip lama dengan yang baru ini.

Yang lama:

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

Baru:

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

Sekarang semua console.log()panggilan juga ditampilkan di terminal.

Ini yang saya gunakan:

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

Contoh penggunaan (sama seperti console.log):

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

Sumber: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main di file logger.js, di sini Anda dapat melihat kasus penggunaan yang sebenarnya.

Setelah beberapa penyelidikan, berikut pemahaman saya:

Kode

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

Catatan: yang digunakan openDevToolsuntuk membukaElectron Dev Tools

(2) render.js

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

(3) render.jsdipanggil oleh:index.html

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

console.log

Logika Keluaran

• dua proses dan keluaran console.lognya :
  • main process= NodeJS process= di siniElectron UI process
    • -> console.login main.jsakan menampilkan log ke sini
  • render process
    • -> console.login render.jsakan menampilkan log ke sini

Contoh Screenshot

• DEBUG = Mode pengembangan
  • Lari ./node_modules/.bin/electron .
    • 
• Produksi = Mode rilis = xxx.app yang dikemas oleheletron-builder
  • Lari /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • ditambahkan export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log JUGA output ke main processterminal
    • 

Maaf mengangkat utas lama tetapi ini adalah hasil teratas untuk "cara mengeluarkan console.log ke terminal" (atau penelusuran serupa.

Bagi siapa pun yang ingin mendapatkan sedikit lebih banyak kendali atas apa yang output ke terminal, Anda dapat menggunakan webContents.on ('console-message') seperti:

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

Lihat:

webContents Documentation

webContents entri pada dokumen BrowserWindow

console.log()akan bekerja dengan baik untuk debugging. Karena electrondibangun di atas browser, ia memiliki DevToolsdukungan Anda dapat menggunakan devtools untuk tujuan debugging. Namun, ada perilaku console.log()metode yang histeris . Ketika Anda memanggil console.log()dari main processaplikasi elektron, itu akan keluar ke jendela terminal dari mana Anda baru saja meluncurkan aplikasi dan ketika Anda memanggilnya dari renderer processitu akan keluar ke konsol DevTools.

Dengan ini Anda dapat menggunakan alat pengembang dari jendela Browser utama untuk melihat log

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

Contoh logEverywhere('test') akan menampilkan // testpanel konsol alat pengembang jendela browser utama

Anda mungkin perlu meningkatkan metode ini untuk menerima banyak argumen (Anda dapat melakukannya dengan operator penyebaran oleh es6)

Nah, ini tahun 2019 dan saya tidak percaya tidak ada yang menyebutkan trik ini di semua jawaban di atas. Oke, jadi, bagaimana kalau langsung masuk ke konsol browser langsung dari utama? Saya memberikan jawaban saya di sini: https://stackoverflow.com/a/58913251/8764808 Coba lihat.