Menggunakan console.log () di aplikasi Electron


116

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

Jawaban:


158

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.


2
Bisakah saya menjalankan console.log()proses utama dari proses renderer?
Fandi Susanto

1
@FandiSusanto, Anda dapat menggunakan modul ipcRenderer untuk mengirim pesan ke proses utama Anda dan, kemudian, console.log () di dalamnya.
arthursfreire

23
Apa yang berbatasan dalam mode produksi, apa yang akan dilakukan `console.log ()` dalam proses utama
Jimmy Obonyo Abor

16
@JimmyObonyoAbor Untuk memasang konsol ke aplikasi elektron produksi dan mendapatkan keluaran konsol di terminal Anda, jalankan perintah berikut di terminal ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Ini akan menjalankan biner MyProgramdan memungkinkan Anda untuk melihat console.logperistiwa proses di terminal.
datUser

bagaimana saya masih bisa memasukkan barang ke terminal setelah mengatur ulang aplikasi melalui app.relaunch()dan app.exit(0)???
oldboy

38

Anda juga dapat menambahkan variabel lingkungan di windows:

ELECTRON_ENABLE_LOGGING=1

Ini akan mengeluarkan pesan konsol ke terminal Anda.


Saya tidak melihat pesan apa pun di konsol hingga variabel lingkungan ini disetel.
DVK

7
The docs mengatakan bahwa harus ditetapkan untuk truedan bahwa pengaturan untuk true"cetakan logging internal yang Chrome untuk konsol", yang tidak apa yang diinginkan OP.
pushkin

@pushkin Ini bekerja dengan ELECTRON_ENABLE_LOGGING=1baik. Dan tentang apa yang diinginkan OP, lalu apa? Lihatlah inti berikut untuk melihat efeknya.
x-yuri

File mana yang ELECTRON_ENABLE_LOGGING = 1 ditambahkan?
Still_learning

1
@Still_learning Anda menyetelnya sebagai variabel lingkungan. jadi dari baris perintah Windowsset ELECTRON_ENABLE_LOGGING=true
pushkin

30

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.


15

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

1
Ini bekerja dengan baik, tapi bagaimana kita bisa menangkap seluruh keluaran konsol; yaitu- tanpa harus memanggil fungsi khusus; sehingga pengecualian dan kesalahan juga dihasilkan?
Derrick

1
Derrick: Coba tetapkan variabel lingkungan ELECTRON_ENABLE_LOGGING=1(lihat jawaban
penyiar

Saya mencoba menggunakan di dalam skrip latar belakang untuk ekstensi, dan itu tidak berfungsi, tidak jelas mengapa. (skrip latar belakang dimuat sebagai jendela latar belakang, pada dasarnya)
Narfanator

7

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

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

4
Meskipun kode ini dapat membantu memecahkan masalah, kode ini tidak menjelaskan mengapa dan / atau bagaimana menjawab pertanyaan tersebut. Memberikan konteks tambahan ini akan secara signifikan meningkatkan nilai jangka panjangnya. Harap edit jawaban Anda untuk menambahkan penjelasan, termasuk batasan dan asumsi apa yang berlaku.
Toby Speight

5

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

4

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

2

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.


2

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.


Data perlu dienkode (sebagai string JSON?) Untuk menghindari injeksi kode JS.
Zmey

2

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

1

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


1

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.


1

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)


1

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.


Terima kasih @Wale! Maukah Anda membuat jawaban Anda sebaris? Saya tidak keberatan dengan tautan ke pertanyaan lain, tetapi banyak mod di sini menjadi kesal tentang jawaban yang menghubungkan silang bahkan dengan SO.
Don P

Saya sebenarnya ingin sekali, tetapi sekali lagi, terakhir kali saya mencoba melakukan itu, saya ditegur karena jawaban ganda.
Wale
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.