Инструменты разработки Electron

Для инструментов разработки Electron рекомендуется VS Code. Если вы не знакомы с VS Code, можете обратиться к нашемуруководству по VS Code。

Ссылка для скачивания VS Code:https://code.visualstudio.com/。

Сам VS Code создан на Electron, поэтому у него есть естественное преимущество в поддержке разработки Electron:

  • Встроенная интеграция с терминалом
  • Мощные возможности отладки
  • Богатая экосистема плагинов
  • Интеграция с Git
  • Умные подсказки IntelliSense
  • Полностью бесплатно и с открытым исходным кодом

Рекомендации обязательных плагинов для VS Code

Название плагина Описание функций
Electron Сниппеты Предоставляет фрагменты кода и автодополнение для API Electron
Prettier – Форматировщик кода Унификация стиля кода, автоформатирование
ESLint Проверка синтаксических ошибок и проблем стиля
Debugger for Chrome Позволяет отлаживать процесс рендеринга фронтенда в VS Code
Node.js Modules Intellisense Автоматически подсказывает функции модулей Node.js
Path Intellisense Интеллектуальные подсказки путей к файлам
npm Intellisense Автоматически предлагает имена пакетов npm
Auto Rename Tag / Auto Close Tag Умное завершение HTML-тегов
GitLens Улучшает визуализацию версий кода Git

Отладка Chrome DevTools (процесс рендеринга)

Процесс рендеринга Electron на самом деле — это страница браузераChromium，
Так вы можете отлаживать его напрямую с помощью Chrome DevTools, точно так же, как отладку веб-страницы.

Включение DevTools

Вmain.jsПри создании окна добавьте:

Пример

const win = new BrowserWindow({
  width: 800,
  height: 600
});
win.loadFile('index.html');

// Открыть DevTools
win.webContents.openDevTools();

Что можно отлаживать

  • Код HTML / CSS / JS
  • Сетевые запросы (Network)
  • Логи консоли (Console)
  • Структура DOM
  • Анализ производительности (Performance)
  • Утечки памяти (Memory)

Подсказка

Отладка процесса рендеринга почти идентична Chrome, поэтому:

  • Вы можете использоватьconsole.log()Вывод отладочной информации
  • Вы также можете напрямую использовать сочетания клавиш Chrome (Cmd + Option + I / Ctrl + Shift + IОткрыть DevTools

Советы по отладке главного процесса Electron

Главный процесс — это не веб-страница, а среда Node.js, поэтому подход к отладке отличается от веб-страниц.

Способ 1: использовать встроенный отладчик VS Code

Создайте в корневом каталоге проекта.vscode/launch.jsonФайл.

Содержимое следующее (можно использовать напрямую):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron 主进程调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/electron/dist/electron.js",
      "args": ["."],
      "outputCapture": "std",
      "runtimeExecutable": null,
      "cwd": "${workspaceFolder}"
    }
  ]
}

затем вmain.jsУстановите в нём точки останова, затем нажмите Debug ▶️.

Способ 2: удалённая отладка из командной строки

Добавьте параметры при запуске:

electron . --inspect=5858

Затем откройте в адресной строке Chrome:

chrome://inspect

Можно удалённо подключиться к главному процессу и отлаживать с точками останова так же, как при отладке Node.js.

Сводка распространённых советов по отладке

Цель отладки Инструменты/методы Описание
Подтормаживание интерфейса окна Chrome DevTools → Performance Анализ времени рендеринга и узких мест выполнения JS
Сбои окна Добавьте try/catch в главный процесс или используйтеelectron-logЛогирование Перехватывайте исключения главного процесса
Ошибки взаимодействия по IPC ВipcMain / ipcRendererДобавьте логирование Отладка обмена между главным и подчинённым процессами
Ошибка пути к файлу Использованиеpath.join(__dirname, 'xxx') Избегайте проблем с относительными путями
Упаковка и отладка Использованиеelectron-builder --dirСначала сборка в режиме каталога Можно запускать и отлаживать напрямую

Рекомендации по продвинутым инструментам

Инструменты Назначение
Electron Forge Официально рекомендуемый инструмент для быстрого создания проектов и упаковки
Electron Builder Мощный инструмент для упаковки и публикации
Electron Reload Автоматически обновляет приложение после изменения файлов
Spectron Используется для автоматизированного тестирования приложений Electron
Devtron Официальное расширение для отладки Electron для анализа внутреннего состояния приложения
React / Vue DevTools Если вы используете фронтенд-фреймворк, отладка состояния компонентов очень удобна

Пишите в VS Code, инспектируйте с помощью DevTools, отлаживайте с помощью launch.json и упаковывайте с помощью Builder — это полный набор инструментов профессионального разработчика Electron.

Другие расширения