Electron 앱의 콘솔에 데이터 또는 메시지를 어떻게 기록 할 수 있습니까?

이 정말 기본적인 hello world는 기본적으로 개발 도구를 엽니 다 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 작동하지만 로그 위치는 기본 프로세스에서 호출하는지 렌더러 프로세스에서 호출하는지에 따라 다릅니다.

렌더러 프로세스 (예 : index.html파일에 포함 된 JavaScript)에서 호출 하면 개발 도구 창에 기록됩니다.

메인 프로세스 (예 :)에서 호출하면 main.jsNode에서와 같은 방식으로 작동합니다. 터미널 창에 기록됩니다. 터미널에서 Electron 프로세스를 시작 하는 경우 메인 프로세스 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!');

이 코드가 렌더러 프로세스 내부에서 실행되면 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 패키지 electron-log https://www.npmjs.com/package/electron-log를 사용할 수 있습니다.

네이티브 OS 로그에 오류, 경고, 정보, 상세 정보, 디버그, 어리석은 출력을 기록합니다.

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가 그 위에 빌드되는 것입니다.

다음은 버튼을 누를 때마다 터미널에 hello를 작성하는 jQuery 스크립트의 예제 스 니펫 (tutorialspoint electon tutorial 기반)입니다 (경고 : 출력 문자열에 자체 줄 바꿈을 추가해야합니다!).

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이 쓴 모든 것은 사실입니다. 여기서 중요한 것은 Electron이 시작되는 방법입니다. 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 in the logger.js file, here you can see a real use case.

몇 가지 조사 후 여기 내 이해가 있습니다.

암호

(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은 에 의해 pacakgedeletron-builder
  • 운영 /path_to_your_packaged_mac_app/xxx.app/Contents/MacOS/yourBinaryExecutable
    • 
  • 추가 export ELECTRON_ENABLE_LOGGING=true, render.jsconsole.log 또한main process 터미널에 출력
    • 

오래된 쓰레드를 불러 와서 미안하지만 이것은 "how to output console.log to terminal"(또는 유사한 검색.

터미널에 출력되는 내용을 좀 더 제어하려는 경우 webContents.on ( 'console-message')를 다음과 같이 사용할 수 있습니다.

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

보다:

webContents 문서

BrowserWindow 문서의 webContents 항목

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기본 브라우저 창의 개발자 도구의 콘솔 패널에 출력 됩니다.

여러 인수를 허용하려면이 방법을 향상시켜야 할 수 있습니다 (es6에 의해 확산 연산자로 수행 할 수 있음).

글쎄, 이것은 2019 년이며 위의 모든 답변에서 아무도이 트릭을 언급하지 않았다는 것을 믿을 수 없습니다. 좋습니다. 메인에서 직접 브라우저 콘솔에 직접 로그인하는 것은 어떻습니까? 나는 여기에 내 대답을 제공했다 : https://stackoverflow.com/a/58913251/8764808 보세요.