ฉันจะบันทึกข้อมูลหรือข้อความไปยังคอนโซลในแอป Electron ได้อย่างไร

สวัสดีโลกขั้นพื้นฐานจริงๆนี้เปิดเครื่องมือสำหรับนักพัฒนาโดยค่าเริ่มต้นโดยที่ฉันไม่สามารถใช้งานconsole.log('hi')ได้ มีทางเลือกอื่นสำหรับ 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 ใช้งานได้ แต่จะบันทึกไปที่ใดขึ้นอยู่กับว่าคุณเรียกใช้จากกระบวนการหลักหรือกระบวนการแสดงผล

หากคุณเรียกใช้จากกระบวนการ renderer (เช่น JavaScript ที่รวมอยู่ในindex.htmlไฟล์ของคุณ) ระบบจะบันทึกลงในหน้าต่างเครื่องมือ dev

หากคุณเรียกใช้จากกระบวนการหลัก (เช่นในmain.js) มันจะทำงานในลักษณะเดียวกับที่ทำในโหนด - มันจะเข้าสู่หน้าต่างเทอร์มินัล หากคุณกำลังเริ่มกระบวนการ Electron จาก Terminal โดยใช้electron .คุณสามารถดูการconsole.logโทรของคุณจากกระบวนการหลักที่นั่น

คุณยังสามารถเพิ่มตัวแปรสภาพแวดล้อมใน windows:

ELECTRON_ENABLE_LOGGING=1

สิ่งนี้จะส่งออกข้อความคอนโซลไปยังเทอร์มินัลของคุณ

มีอีกวิธีหนึ่งในการเข้าสู่คอนโซลจากภายในกระบวนการเรนเดอร์ เนื่องจากนี่คือ Electron คุณสามารถเข้าถึงโมดูลเนทีฟของ Node ได้ ซึ่งรวมถึงconsoleโมดูล

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

เมื่อรหัสนี้ถูกเรียกใช้จากภายในกระบวนการ renderer คุณจะเข้าไปHello World!ในเทอร์มินัลที่คุณเรียกใช้ Electron

โปรดดูhttps://nodejs.org/api/console.htmlสำหรับเอกสารเพิ่มเติมเกี่ยวกับconsoleโมดูล

ความเป็นไปได้อื่นคือการเข้าถึงคอนโซลกระบวนการหลักโดยใช้remote.getGlobal(name):

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

เมื่อเพิ่มคำตอบของ M. Damian นี่คือวิธีตั้งค่าเพื่อให้สามารถเข้าถึงคอนโซลของกระบวนการหลักจากตัวแสดงผลใด ๆ

ในแอปหลักของคุณให้เพิ่ม:

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

ในโหมดแสดงภาพคุณสามารถเพิ่ม:

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

คุณสามารถใช้ npm package electron-log https://www.npmjs.com/package/electron-log

มันจะบันทึกข้อผิดพลาดของคุณเตือนข้อมูล verbose ดีบั๊กผลลัพธ์โง่ ๆ ในบันทึกระบบปฏิบัติการดั้งเดิมของคุณ

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

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

นี่คือการติดตามคำตอบของ cscsandy5 สำหรับข้อมูลเพิ่มเติมข้อมูลจากที่นี่

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

รหัสนี้ใช้งานได้ดีเพียงแค่ส่งออกข้อความดีบักธรรมดาไปยังหน้าต่างเทอร์มินัลที่คุณเปิดใช้งานแอปอิเล็กตรอนและเป็นสิ่งที่ console.log สร้างขึ้นด้านบนของ

นี่คือตัวอย่าง snippet (ตามบทช่วยสอน electon tutorialspoint) ของสคริปต์ jQuery ที่จะเขียนสวัสดีกับเทอร์มินัลทุกครั้งที่กดปุ่ม (คำเตือน: คุณต้องเพิ่มตัวแบ่งบรรทัดของคุณเองในสตริงเอาต์พุต!)

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

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

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

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

ทุกสิ่งที่Alex Warren เขียนเป็นความจริง สิ่งสำคัญคือวิธีการเริ่มต้นของอิเล็กตรอน หากคุณใช้สคริปต์มาตรฐานในไฟล์package.jsonมันจะไม่ทำงาน เพื่อให้console.log()งานแทนที่สคริปต์เก่าด้วยสคริปต์ใหม่นี้

อันเก่า:

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

อันใหม่:

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

ตอนนี้การconsole.log()โทรทั้งหมดจะแสดงในเทอร์มินัลด้วย

นี่คือสิ่งที่ฉันใช้:

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

ตัวอย่างการใช้งาน (เช่นเดียวกับconsole.log):

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

ที่มา: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/mainในไฟล์ logger.js คุณจะเห็นกรณีการใช้งานจริงที่นี่

หลังจากการตรวจสอบบางส่วนนี่คือความเข้าใจของฉัน:

รหัส

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

หมายเหตุ: ที่ใช้openDevToolsเปิดElectron Dev Tools

(2) render.js

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

(3) render.jsเรียกโดย:index.html

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

console.log

ตรรกะเอาต์พุต

• สองกระบวนการและเอาต์พุตconsole.log :
  • main process= NodeJS process= ที่นี่Electron UI process
    • -> console.logในmain.jsจะส่งออกบันทึกไปที่นี่
  • render process
    • -> console.logในrender.jsจะส่งออกบันทึกไปที่นี่

ตัวอย่างภาพหน้าจอ

• DEBUG =โหมด การพัฒนา
  • วิ่ง ./node_modules/.bin/electron .
    • 
• การผลิต =โหมดการเปิดตัว = xxx.appบรรจุโดยeletron-builder
  • วิ่ง /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • เพิ่มexport ELECTRON_ENABLE_LOGGING=trueแล้วrender.jsconsole.log ยังเอาต์พุตไปยังmain processเทอร์มินัล
    • 

ขออภัยที่ต้องยกกระทู้เก่า แต่นี่เป็นผลการค้นหาอันดับต้น ๆ สำหรับ "วิธีเอาท์พุท console.log ไปที่ terminal" (หรือการค้นหาที่คล้ายกัน

สำหรับใครก็ตามที่ต้องการควบคุมสิ่งที่ส่งออกไปยังเทอร์มินัลมากขึ้นอีกเล็กน้อยคุณสามารถใช้ webContents.on ('console-message') ดังนี้:

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

ดู:

เอกสาร webContents

รายการ webContents บนเอกสาร BrowserWindow

console.log()จะทำงานได้ดีสำหรับการดีบัก เนื่องจากelectronสร้างขึ้นที่ด้านบนของเบราว์เซอร์จึงมีDevToolsการสนับสนุนคุณจึงสามารถใช้ devtools เพื่อวัตถุประสงค์ในการดีบัก อย่างไรก็ตามมีพฤติกรรมตีโพยตีพายของconsole.log()วิธีการ เมื่อคุณเรียกใช้แอปconsole.log()from main processof electron แอปจะส่งออกไปยังหน้าต่างเทอร์มินัลจากจุดที่คุณเพิ่งเปิดใช้แอปและเมื่อคุณเรียกใช้จากแอปrenderer processจะส่งออกไปยังคอนโซล DevTools

ด้วยสิ่งนี้คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาของหน้าต่างเบราว์เซอร์หลักเพื่อดูบันทึก

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

ตัวอย่างlogEverywhere('test') จะแสดงผล// testในแผงคอนโซลของเครื่องมือสำหรับนักพัฒนาของหน้าต่างเบราว์เซอร์หลัก

คุณอาจต้องปรับปรุงวิธีนี้เพื่อยอมรับหลาย args (คุณสามารถทำได้ด้วยตัวดำเนินการกระจายโดย es6)

นี่คือปี 2019 และฉันไม่อยากเชื่อเลยว่าไม่มีใครพูดถึงเคล็ดลับนี้ในคำตอบทั้งหมดข้างต้น ตกลงแล้วจะเข้าสู่คอนโซลเบราว์เซอร์โดยตรงจากหลักได้อย่างไร? ฉันให้คำตอบที่นี่: https://stackoverflow.com/a/58913251/8764808 ลองดู