Использование console.log () в приложении Electron

118

Как я могу записывать данные или сообщения на консоль в моем приложении Electron?

Этот действительно простой привет мир открывает инструменты разработчика по умолчанию, я не могу их использовать console.log('hi'). Есть ли альтернатива Электрону?

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;
  });
});
Дон П
источник

Ответы:

161

console.log работает, но куда он входит, зависит от того, вызываете ли вы его из основного процесса или из процесса рендеринга.

Если вы вызываете его из процесса рендеринга (т.е. JavaScript, который включен из вашего index.htmlфайла), он будет зарегистрирован в окне инструментов разработчика.

Если вы вызовете его из основного процесса (т.е. из main.js), он будет работать так же, как и в Node - он войдет в окно терминала. Если вы запускаете процесс Electron из Терминала, electron .вы можете видеть там свои console.logвызовы из основного процесса.

Алекс Уоррен
источник
2
Могу ли я console.log()перейти к основному процессу из процесса рендеринга?
Fandi Susanto
1
@FandiSusanto, вы можете использовать модуль ipcRenderer для отправки сообщения вашему основному процессу, а затем console.log () внутри него.
arthursfreire
23
Что упирается в производственный режим, что будет делать console.log () в основном процессе
Джимми Обоньо Абор
16
@JimmyObonyoAbor Чтобы подключить консоль к производственному электронному приложению и получить вывод консоли в терминале, выполните в терминале следующее ./path/to/release/MyProgram.app/Contents/MacOS/MyProgram. Это запустит двоичный файл MyProgramи позволит вам просматривать console.logсобытия процесса в терминале.
datUser 01
как я могу все еще записывать данные на терминал после сброса приложения с помощью app.relaunch()и app.exit(0)???
oldboy
38

Вы также можете добавить переменную среды в окнах:

ELECTRON_ENABLE_LOGGING=1

Это выведет консольные сообщения на ваш терминал.

ди-джеби
источник
Я не видел никаких сообщений в консоли, пока не была установлена ​​эта переменная среды.
ДВК
7
В документах говорится, что для этого должно быть установлено значение, trueи что установка для него true«печатает внутреннее ведение журнала Chrome на консоль», что не то, что хочет OP.
Пушкин
@pushkin Он тоже работает ELECTRON_ENABLE_LOGGING=1. А что же тогда хочет ОП? Взгляните на следующую суть, чтобы увидеть эффект.
x-
К какому файлу добавлен ELECTRON_ENABLE_LOGGING = 1?
Still_learning
1
@Still_learning вы устанавливаете его как переменную среды. так из командной строки Windowsset ELECTRON_ENABLE_LOGGING=true
PUSHKIN
30

Есть еще один способ входа в консоль изнутри процесса рендеринга. Учитывая, что это 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модулю.

М. Дамиан Маллиган
источник
15

Еще одна возможность - получить доступ к главной консоли процесса с помощью remote.getGlobal(name):

const con = require('electron').remote.getGlobal('console')
con.log('This will be output to the main process console.')
рафинез
источник
1
Это отлично работает, но как мы можем поймать весь вывод консоли; т.е. без вызова специальной функции; так что исключения и ошибки тоже выводятся?
Деррик
1
Деррик: Попробуйте установить переменную окружения ELECTRON_ENABLE_LOGGING=1(см. Ответ
диджеби
Я пытаюсь использовать внутри фоновый скрипт для расширения, но он не работает, неясно, почему. (фоновые скрипты загружаются как фоновые окна, в основном)
Нарфанатор
7

Добавляя к ответу М. Дамиана, вот как я его настроил, чтобы получить доступ к консоли основного процесса с любого средства визуализации.

В основном приложении добавьте:

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.');
Дэвид Фигатнер
источник
6
process.stdout.write('your output to command prompt console or node js ')
cscsandy5
источник
4
Хотя этот код может помочь решить проблему, он не объясняет, почему и / или как он отвечает на вопрос. Предоставление этого дополнительного контекста значительно повысило бы его ценность в долгосрочной перспективе. Пожалуйста , измените свой ответ , чтобы добавить объяснение, в том числе то , что применять ограничения и допущения.
Тоби Спейт
5

Вы можете использовать электронный журнал пакета npm https://www.npmjs.com/package/electron-log

Он будет регистрировать ваши ошибки, предупреждения, информацию, подробные, отладочные, глупые результаты в вашем собственном журнале ОС.

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

log.info('Hello, log');
log.error('Damn it, an error');
StefanSL
источник
4

Это продолжение ответа cscsandy5 для дополнительной информации, информация отсюда

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

Этот код отлично подходит для вывода простого сообщения отладки в окно терминала, из которого вы запустили электронное приложение, и на его основе строится console.log.

Вот пример фрагмента (на основе учебника по электронике 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);
});
Харрисон Телфер
источник
2

Все, что написал Алекс Уоррен, правда. Здесь важно то, как запускается Электрон. Если вы используете стандартный сценарий в файле package.json, он не будет работать. Чтобы заставить console.log()работать, замените старый скрипт на этот новый.

Старый:

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

Новый:

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

Теперь все console.log()звонки отображаются и в терминале.

лобзик
источник
2

Вот что я использую:

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, здесь вы можете увидеть реальный вариант использования.

Карлос Галарса
источник
Однако данные должны быть закодированы (как строка JSON?), Чтобы избежать инъекций кода JS.
Zmey
2

После некоторого расследования, вот мое понимание:

Код

(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

Выходная логика

  • two и его вывод console.log :
    • main process= NodeJS process= здесьElectron UI process
      • -> console.login main.jsбудет выводить журнал сюда
    • render process
      • -> console.login 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терминал
крифан
источник
1

Извините, что поднял старую ветку, но это лучший результат "как вывести console.log на терминал" (или аналогичные поисковые запросы.

Для тех, кто хочет получить немного больше контроля над тем, что выводится на терминал, вы можете использовать webContents.on ('console-message') следующим образом:

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

Видеть:

webContents Документация

запись webContents в документах BrowserWindow

М. Ричардсон
источник
1

console.log()отлично подойдет для отладки. Поскольку electronон построен поверх браузера, он DevToolsподдерживает, что вы можете использовать инструменты разработчика для отладки. Однако есть истерическое поведение console.log()метода. Когда вы вызываете console.log()из main processэлектронного приложения, оно выводится в окно терминала, откуда вы только что запустили приложение, а когда вы вызываете его из renderer processнего, выводится в консоль DevTools.

Киран Мания
источник
1

При этом вы можете использовать инструменты разработчика в главном окне браузера для просмотра журналов.

    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)

Фредди Дэниел
источник
1

Что ж, это 2019 год, и я не могу поверить, что никто не упомянул этот трюк во всех ответах выше. Хорошо, а как насчет входа в консоль браузера прямо из главного окна? Я дал свой ответ здесь: https://stackoverflow.com/a/58913251/8764808 Взгляните.

рубчик
источник
Спасибо, @Wale! Не могли бы вы вставить свой ответ? Я не возражаю против ссылки на другой вопрос, но многие моды здесь недовольны перекрестными ссылками даже с помощью SO.
Don P
Я бы действительно хотел, но, опять же, в последний раз, когда я попытался сделать это, меня отчитали за дублирование ответов.
Wale