Làm cách nào để ghi dữ liệu hoặc tin nhắn vào bảng điều khiển trong ứng dụng Electron của tôi?

Thế giới hello thực sự cơ bản này mở các công cụ dành cho nhà phát triển theo mặc định, tôi không thể sử dụng console.log('hi'). Có giải pháp thay thế cho Electron không?

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 hoạt động, nhưng nơi nó đăng nhập phụ thuộc vào việc bạn gọi nó từ quy trình chính hay quy trình kết xuất.

Nếu bạn gọi nó từ quá trình kết xuất (tức là JavaScript được bao gồm từ index.htmltệp của bạn ), nó sẽ được ghi vào cửa sổ công cụ nhà phát triển.

Nếu bạn gọi nó từ tiến trình chính (tức là trong main.js), nó sẽ hoạt động giống như trong Node - nó sẽ đăng nhập vào cửa sổ đầu cuối. Nếu bạn đang bắt đầu quy trình Electron của mình từ Terminal bằng cách sử dụng, electron .bạn có thể thấy các console.logcuộc gọi của mình từ quy trình chính ở đó.

Bạn cũng có thể thêm một biến môi trường trong windows:

ELECTRON_ENABLE_LOGGING=1

Thao tác này sẽ xuất thông báo bảng điều khiển tới thiết bị đầu cuối của bạn.

Có một cách khác để đăng nhập vào bảng điều khiển từ bên trong quá trình kết xuất. Vì đây là Electron, bạn có thể truy cập các mô-đun gốc của Node. Điều này bao gồm consolemô-đun.

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

Khi mã này được chạy từ bên trong quá trình kết xuất, bạn sẽ nhận được Hello World! thiết bị đầu cuối mà bạn đã chạy Electron từ đó.

Xem https://nodejs.org/api/console.html để biết thêm tài liệu về consolemô-đun.

Tuy nhiên, một khả năng khác là truy cập bảng điều khiển quy trình chính bằng cách sử dụng remote.getGlobal(name):

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

Thêm vào câu trả lời của M. Damian, đây là cách tôi thiết lập nó để tôi có thể truy cập bảng điều khiển của quy trình chính từ bất kỳ trình kết xuất nào.

Trong ứng dụng chính của bạn, hãy thêm:

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

Trong bất kỳ trình kết xuất nào, bạn có thể thêm:

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

Bạn có thể sử dụng gói npm electron-log https://www.npmjs.com/package/electron-log

Nó sẽ ghi lại lỗi của bạn, cảnh báo, thông tin, chi tiết, gỡ lỗi, kết quả ngớ ngẩn trong nhật ký hệ điều hành gốc của bạn.

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

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

Đây là phần tiếp theo câu trả lời của cscsandy5 để biết một số thông tin bổ sung, thông tin từ đây

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

Mã này hoạt động tuyệt vời khi chỉ xuất một thông báo gỡ lỗi đơn giản đến cửa sổ đầu cuối mà bạn đã khởi chạy ứng dụng electron từ đó và là thứ mà console.log được xây dựng trên đó.

Đây là một đoạn mã ví dụ (dựa trên hướng dẫn điện tử hướng dẫn) của một tập lệnh jQuery sẽ viết lời chào đến thiết bị đầu cuối mỗi khi nút được nhấn (cảnh báo: bạn cần thêm dấu ngắt dòng của riêng mình trong chuỗi đầu ra!)

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

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

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

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

Tất cả những gì Alex Warren viết đều là sự thật. Quan trọng ở đây là cách Electron được khởi động. Nếu bạn sử dụng tập lệnh chuẩn trong tệp package.json, nó sẽ không hoạt động. Để làm choconsole.log() công việc thay thế tập lệnh cũ bằng tập lệnh mới này.

Người già:

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

Cái mới:

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

Bây giờ tất cả các console.log()cuộc gọi cũng được hiển thị trong thiết bị đầu cuối.

Đây là những gì tôi sử dụng:

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

Ví dụ sử dụng (giống như console.log):

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

Nguồn: https://github.com/fuse-box/fuse-box-electron-seed/tree/master/src/main trong tệp logger.js, tại đây bạn có thể xem trường hợp sử dụng thực tế.

Sau một số điều tra, đây là sự hiểu biết của tôi:

Mã

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

Lưu ý: sử dụng openDevToolsđể mởElectron Dev Tools

(2) render.js

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

(3) render.jsđược gọi bằng:index.html

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

console.log

Logic đầu ra

• hai tiến trình và đầu ra console.log của nó :
  • main process= NodeJS process= đâyElectron UI process
    • -> console.login main.jssẽ xuất log đến đây
  • render process
    • -> console.login render.jssẽ xuất log đến đây

Ví dụ về ảnh chụp màn hình

• DEBUG = Chế độ phát triển
  • chạy ./node_modules/.bin/electron .
    • 
• Sản xuất = Chế độ phát hành = xxx.app nhịp độ bởieletron-builder
  • chạy /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • đã thêm export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log CŨNG xuất ra main processđầu cuối
    • 

Rất tiếc khi nêu ra một chủ đề cũ nhưng đây là kết quả hàng đầu cho "cách xuất console.log sang terminal" (hoặc các tìm kiếm tương tự.

Đối với bất kỳ ai muốn kiểm soát nhiều hơn một chút đối với những gì được xuất ra thiết bị đầu cuối, bạn có thể sử dụng webContents.on ('console-message') như sau:

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

Xem:

Tài liệu webContents

Mục nhập webContents trên tài liệu BrowserWindow

console.log()sẽ hoạt động tốt để gỡ lỗi. Vì electronđược xây dựng trên đầu trình duyệt, nó có DevToolshỗ trợ bạn có thể sử dụng công cụ phát triển cho mục đích gỡ lỗi. Tuy nhiên, có một hành vi cuồng loạn của console.log()phương pháp. Khi bạn gọi ứng dụng console.log()from main processof electron, nó sẽ xuất ra cửa sổ đầu cuối từ nơi bạn vừa khởi chạy ứng dụng và khi bạn gọi nó từ renderer processnó sẽ xuất ra bảng điều khiển DevTools.

Với điều này, bạn có thể sử dụng các công cụ dành cho nhà phát triển của cửa sổ Trình duyệt chính để xem nhật ký

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

Ví dụ logEverywhere('test') sẽ xuất ra // testtrong bảng điều khiển bảng điều khiển của các công cụ dành cho nhà phát triển của cửa sổ trình duyệt chính

Bạn có thể cần cải tiến phương pháp này để chấp nhận nhiều args (Bạn có thể thực hiện nó với toán tử spread bằng es6)

Chà, đây là năm 2019 và tôi không thể tin rằng không ai đề cập đến thủ thuật này trong tất cả các câu trả lời ở trên. Ok, vậy bạn đăng nhập trực tiếp vào bảng điều khiển trình duyệt trực tiếp từ main thì sao? Tôi đã cung cấp câu trả lời của mình tại đây: https://stackoverflow.com/a/58913251/8764808 Hãy xem.