Отладка

У программы на Electron два вида кода, и отлаживают их по-разному. Страницу — инструментами разработчика Chromium (DevTools), как сайт. Главный процесс — как программу на Node.js: через вывод в терминал и отладчик, подключённый по флагу --inspect.

DevTools для страницы

Стандартное меню Electron содержит пункт View → Toggle Developer Tools, он же Ctrl+Shift+I (Cmd+Option+I на Mac). Если меню своё, DevTools можно открыть из кода:

// main.js
win.loadFile('index.html');
 
if (!app.isPackaged) {
  win.webContents.openDevTools();
}

app.isPackaged равен false при запуске через npm start и true в собранной программе. Так DevTools откроются только во время разработки. В них работают консоль, точки останова, вкладки Elements и Network.

Вывод главного процесса

console.log в main.js пишет в терминал, из которого запущена программа:

// main.js
ipcMain.handle('notes:save', async (event, notes) => {
  console.log('Сохраняю заметок:', notes.length);
  await saveNotes(notes);
});

При каждом сохранении в терминале появится строка с числом заметок. Необработанные ошибки главного процесса тоже выводятся там.

Отладчик главного процесса

Чтобы ставить точки останова в main.js, запустите Electron с флагом --inspect. Добавьте скрипт в package.json:

{
  "scripts": {
    "start": "electron .",
    "debug": "electron --inspect=5858 ."
  }
}

Выполните npm run debug, откройте в Chrome адрес chrome://inspect и в разделе Remote Target нажмите inspect — откроются DevTools главного процесса.

Отладка в VS Code

VS Code может запускать Electron сам. Создайте файл .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": ["."]
    }
  ]
}

Нажмите F5 — программа запустится, а точки останова в main.js будут срабатывать прямо в редакторе.

Падение страницы

Если процесс отрисовки упадёт, окно станет белым, а главный процесс получит событие:

// main.js
win.webContents.on('render-process-gone', (event, details) => {
  console.log('Страница упала:', details.reason);
});

details.reason объясняет причину, например 'crashed' или 'oom' (нехватка памяти). Окно после этого можно перезагрузить методом win.reload().

Частая ошибка

Новички ищут вывод console.log из main.js в DevTools окна и не находят его. DevTools показывают только процесс отрисовки и preload. Сообщения главного процесса смотрите в терминале, где выполнена команда npm start.