Руководство по отладке приложений Electron

Electron

Electron – это платформа с открытым исходным кодом, основанная на Node.js и Chromium, для создания настольных приложений. Разработчики могут использовать веб-технологии (HTML, JavaScript и CSS) для завершения разработки всего приложения. На основе Electron реализованы многие известные настольные приложения, такие как VSCode, Slack и GitHub Desktop. В этой статье будут представлены некоторые распространенные методы отладки приложений Electron.

Отладка среды разработки

Процесс приложения Electron разделен на основной процесс и процесс рендеринга, а базовые реализации соответствуют Node.js и Chromium соответственно. Таким образом, способ отладки приложений Electron в основном эквивалентен их комбинации В настоящее время решения, предоставляемые сообществом, относительно полны.

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

Основной процесс Electron — это процесс Node.js. Node.js был представлен после 8--inspectПараметры используются для отладки, а также применяются к основному процессу Electron:

./node_modules/.bin/electron . --inspect

По умолчанию оно будет прослушивать порт 9229. После запуска приложение будет открыто в браузере Chrome (или других браузерах на основе Chromium)chrome://inspectВы можете увидеть соответствующий сеанс отладки, щелкните ссылку сеанса, чтобы открыть инструменты разработки для отладки.

Кроме того, вы можете указать номер порта в параметре командной строки для одновременной отладки нескольких процессов в нескольких приложениях без конфликтов:

./node_modules/.bin/electron . --inspect=1234

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

Только с точки зрения отладки процесс рендеринга Electron можно просто понять как окно Chromium. Таким образом, это в основном то же самое, что и способ отладки веб-страниц в браузере Chrome, то есть после фокусировки на текущем окне используйтеCtrl+Shift+I(Под macOS этоCmd+Option+I) ярлык для открытия devtools. Использование тоже самое.

Метод ярлыка может не дать ожидаемого эффекта в некоторых особых случаях, например, когда окно скрыто и не может быть сфокусировано на окне. На этом этапе вы можете использовать JavaScript API, предоставленный Electron, для открытия инструментов разработки в коде:

const mainWindow = new BrowserWindow();

mainWindow.loadURL("file://path/of/index.html");
mainWindow.webContents.openDevTools();

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

Отладка в VSCode

Вышеупомянутые методы откроют интерфейс devtools, и все операции по отладке будут выполняться в devtools. Для некоторых операций, таких как отладка точки останова кода, его можно дополнительно комбинировать с редактором или IDE, чтобы улучшить процесс разработки. Далее будет кратко описано, как выполнять отладку в VSCode.

Используйте официальный шаблон Electronelectron-quick-startНапример, сначала нужно установить расширение для VSCode:Debugger for Chrome(для отладки процесса рендеринга). Клонируйте репозиторий кода локально и установите зависимости:

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install

Затем добавьте файл в репозиторий.vscode/launch.json, содержание следующее:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9222", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
      "name": "Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ],
  "compounds": [
    {
      "name": "All",
      "configurations": ["Main", "Renderer"]
    }
  ]
}

Затем выберите панель отладки в левой части VSCode и запуститеAllЭтот пункт запускает отладку, в это время вы можетеmain.jsилиrenderer.jsВ файл добавлена ​​точка останова.

Некоторые ключевые моменты в файле конфигурации объясняются ниже:

  1. configurationsДва элемента соответствуют основному процессу и процессу рендеринга соответственно.compoundsКомбинированный сеанс указан вAll,выберитеAllОбе сессии будут запущены одновременно.
  2. в конфигурации рендерераwebRootпараметры используются напрямую${workspaceFolder}, потому что в этом проекте статические ресурсы, на которые ссылается HTML, расположены в корневом каталоге. При фактическом использовании его необходимо обновить до соответствующего пути, чтобы он вступил в силу.
  3. В реальной разработке может быть процесс компиляции, такой как использование TypeScript с инструментом упаковки Webpack, окончательный сгенерированный код и исходный код не находятся на одном пути. В этом случае необходимо создать исходную карту, чтобы установить отношение отображения.

Отладка рабочей среды

Производственная среда немного сложнее, чем среда разработки. Вообще говоря, мы хотим иметь запись для открытия devtools для облегчения отладки, когда что-то пойдет не так, с другой стороны, эта запись не имеет никакого отношения к самому продукту, и мы хотим, чтобы она была скрыта от пользователей. Более распространенным решением является указание набора закрытых сочетаний клавиш, прослушивание соответствующих событий и вызов API JavaScript в обратном вызове для открытия инструментов разработки, а также установка сложных комбинаций сочетаний клавиш, чтобы уменьшить вероятность того, что пользователи прикоснутся к ним по ошибке.

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

Загрузите последнюю версиюПосле установки и открытия Debugtron обнаруживаются и отображаются все установленные приложения Electron:

После нажатия на значок появится ссылка для отладки. Взяв в качестве примера Electron Fiddle, после нажатия на значок для запуска в левой части панели будет отображаться список отлаживаемых сеансов, включая основной процесс и процесс рендеринга, которые можно отличить по меткам. Справа отобразится лог запуска основного процесса:

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

Суммировать

Решение для отладки Electron относительно завершено.В процессе разработки как основной процесс, так и процесс рендеринга могут легко открывать инструменты разработки для отладки, и этот рабочий процесс также можно глубоко интегрировать в VSCode для улучшения опыта разработки.

В производственной среде вы можете использовать Debugtron для отладки, и вы можете получить в основном те же функции, что и в среде разработки, без интеграции дополнительного кода в клиент.

Оригинальная ссылка:GitHub.com/meet 4 из 10/блог…

Категории