Отладка и тестирование Electron

Приложения Electron включаютглавный процесс и процесс рендерингадве среды выполнения, поэтому стратегии отладки и тестирования нужно разрабатывать для разных процессов.
Хорошо организованные процессы отладки и тестирования могут повысить эффективность разработки и стабильность приложения.

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

Отладка с помощью Chrome DevTools

  • Доступ к главному процессу Electron можно получить через--inspectили--inspect-brkЗапуск и отладка с помощью Chrome DevTools.

  • Пример запуска:

    electron --inspect=9222 .
  • Введите в адресной строке Chromechrome://inspect, который подключается к главному процессу для отладки с точками останова, просмотра стеков вызовов и выполнения выражений.

Отладка с точками останова в VS Code

  • Настройка в VS Codelaunch.json：

    {
  "type": "node",
  "request": "launch",
  "name": "Electron Main",
  "program": "${workspaceFolder}/node_modules/electron/cli.js",
  "args": ["."],
  "runtimeExecutable": null,
  "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" },
  "sourceMaps": true,
  "protocol": "inspector"
}
  • Это позволяет устанавливать точки останова непосредственно в файлах главного процесса, отлаживать логику и IPC-взаимодействие.

Логирование

  • Использованиеconsole.logили сторонние библиотеки логирования (например,winstonЗаписывайте информацию о работе главного процесса.
  • Рекомендуемые категории логов: info, warn, error, для удобной диагностики проблем.

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

Откройте инструменты разработчика.

  • Вызовите в процессе рендеринга:

    mainWindow.webContents.openDevTools()
  • Можно напрямую просматривать DOM, отладку JS, сетевые запросы и панели производительности.

Удалённая отладка

  • Процесс рендеринга также может включить порт удалённой отладки:

    electron --remote-debugging-port=9223 .
  • Вы можете подключиться к удалённой отладке в Chrome DevTools; это подходит для многооконной отладки или отладки на разных устройствах.

React / Vue DevTools

  • Для процессов рендеринга, использующих фронтенд-фреймворки, установите соответствующие DevTools:

    npm install --save-dev electron-devtools-installer

  • Пример:

    const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')

app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS)
    .then(name => console.log(`已安装: ${name}`))
    .catch(err => console.log('安装失败:', err))
})
  • Вы можете отлаживать состояние компонентов, props и события, повышая эффективность фронтенд-разработки.

Автоматизированное тестирование

Фреймворк для тестирования Spectron

  • Spectron — официально рекомендованный инструмент для сквозного тестирования Electron, основанный на WebDriver.
  • Можно тестировать запуск приложения, поведение окон, нажатия кнопок и вызовы IPC.
    npm install --save-dev spectron mocha chai

  • Пример:

    const Application = require('spectron').Application
const assert = require('chai').assert
const path = require('path')

describe('应用启动测试', function () {
  this.timeout(10000)
  let app

  before(async () => {
    app = new Application({
      path: require('electron'), // Electron 可执行文件
      args: [path.join(__dirname, '..')]
    })
    await app.start()
  })

  after(async () => { if (app && app.isRunning()) await app.stop() })

  it('窗口数量应为 1', async () => {
    const count = await app.client.getWindowCount()
    assert.equal(count, 1)
  })
})

Модульное тестирование

  • Можно писать модульные тесты для логики главного процесса и модулей процесса рендеринга.
  • Рекомендуется использовать Jest или Mocha + Chai:npm install --save-dev jest

Сквозное тестирование

  • Проверка пользовательских сценариев работы, таких как правильность нажатия кнопок, открытия новых окон и взаимодействия с данными.
  • Можно комбинировать с Spectron или Playwright + Electron.

Интеграция CI/CD

Настройте тестирование Electron на платформах непрерывной интеграции (GitHub Actions, GitLab CI):

  • Установите Node.js + Electron
  • Запустите модульные тесты и сквозные тесты
  • Сгенерируйте отчеты о покрытии и загрузите их

Итог

Ключевые моменты отладки и тестирования Electron:

  • главный процесс: отладка с точками останова в Chrome DevTools или VS Code + логи
  • процесс рендеринга: инструменты разработчика + DevTools фронтенд-фреймворка
  • Автоматизированное тестирование: Spectron, модульное тестирование, сквозное тестирование + CI/CD
  • Цель: повысить эффективность разработки, выявить потенциальные проблемы, обеспечить стабильность приложения
Другие расширения