Отладка электронного кода

внешний интерфейс GitHub JavaScript Electron

Когда я впервые столкнулся с Electron, при попытке отладить программу, у меня не получилось запуститься, поэтому я сделал запись этого процесса.

Справочный проект

Согласно официальной документации Electron:Отладка основного процесса с помощью VSCode: https://electronjs.org/docs/tutorial/debugging-main-process-vscode

Загрузите соответствующий проект github: github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Импортируйте проект с помощью VSCode

1: Установите VSCode

2: Импортируйте указанный выше проект в меню VSCode «Добавить папку в рабочую область».

Как показано ниже, нажмитеНижняя левая, вы можете увидеть следующие два варианта:

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

Процесс Renderer Debug

Эти два варианта и в папке проекта.vscode\launch.jsonСодержимое соответствует, как показано на следующем рисунке

VScode отлаживает основной процесс

выбрано вышеDebug Main Process, вы можете остановить выполнение кода в точке останова, установленной в коде основного процесса main.js, как показано ниже:

Процесс рендеринга отладки VScode

выбрано вышеDebug Renderer Process, как показано в коде процесса рендеринга render.js ниже, когда вы нажимаете на интерфейс, отображаемый программой, он запускаетclickсобытие, вы можете остановить код в установленной точке останова, как показано ниже:


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

Процесс рендеринга отладки DevTool

Найдите другой способ отладки процесса рендеринга в официальной документации Electron:

Отладка приложения: https://electronjs.org/docs/tutorial/application-debugging
Примечание. Этот метод может только отлаживать процесс рендеринга.

код в основном процессеmain.jsВ:

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

УвеличиватьmainWindow.webContents.openDevTools();

следующим образом:

 function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.webContents.openDevTools();
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

используете ли выотладкаспособ или использоватьзапустить задачуТаким образом, пока программа работает, вы можете открыть интерфейс справа на следующем рисунке по умолчанию в интерфейсе, где работает ваша программа.Developer ToolsОкно отладки такое же, как окно отладки F12 в браузере. Выяснится, что даже если он упакован вебпаком, он может нормально остановиться в точке останова во время отладки.

Проблемы, возникающие при отладке с помощью VScode

при использованииэлектронная домашняя страница githubвведен вelectron/electron-quick-startКогда вы обнаружите, что не можете использовать VScode для отладки основного процесса или процесса рендеринга, даже если вы нажмете приглашение, поместите"protocol": "legacy"изменить на"protocol": "inspector"Это также не может решить проблему, и позже выяснилось, что этот проект использует"electron": "^1.8.4", в то время как выше использовалось"electron": "1.5.1", а при использовании разных электронных версий ссылочная версия nodejs также отличается, и распечатанные логи выглядят следующим образом:

We are using Node.js 8.2.1, Chromium 59.0.3071.115, and Electron 1.8.4.

а также

We are using node 7.4.0, Chromium 54.0.2840.101, and Electron 1.5.1.

Первоначальное подозрение как-то связано с этим.

Если у вас есть какие-либо решения, пожалуйста, оставьте мне сообщение, спасибо!

Категории