Для отладки с помощью кода Visual Studio мы можем использовать представление «Отладка» для настройки файла launch.json.

  • Щелкните представление «Отладка» на левой панели. Вы увидите, что конфигурации не выбраны.
  • Щелкните значок шестеренки с надписью «Настроить или исправить launch.json», чтобы создать файл launch.json. Visual Studio Code автоматически создаст новый каталог \SampleApp\.vscode.
  • Измените настройки в разделе «Запуск» для runtimeExecutable и runtimeArgs.
"runtimeExecutable": "${workspaceRoot}\\node_modules\\electron-prebuilt\\dist\\electron.exe",
"runtimeArgs": [
    ".",
    "--enable-logging"
 ]
  • Теперь вы можете установить точку останова в main.js и нажать F5, чтобы начать отладку.

Теперь вы можете отлаживать свой основной процесс. По мере того, как вы продолжите свою электронную разработку в браузере, вы также захотите иметь возможность отлаживать приложение, работающее в процессе рендеринга. К счастью, как вы видели, инструменты разработки Chrome открываются благодаря вызову openDevTools() в файле main.js. Однако вы также можете установить Расширение Visual Studio Code для отладки Chrome (vscode-chrome-debug). Чтобы включить этот отладчик:

  • В меню «Вид» выберите «Командная палитра…».
  • Выберите «Установить расширения», найдите «Отладчик для Chrome» и нажмите «Установить».
  • Появится синяя кнопка Включить. Нажмите «Включить», а затем при появлении запроса на перезагрузку нажмите «ОК».
  • В файле launch.json создайте новую запись в разделе «Конфигурации».
{
    "name": "Debug",
    "type": "chrome",
    "request": "launch",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
    "runtimeArgs": [
        "${workspaceRoot}/main.js",
        "--remote-debugging-port=9222"
    ],
    "webRoot": "${workspaceRoot}"
},

ВНИМАНИЕ: это вас разозлит…отладчик Chrome ОЧЕНЬ СИЛЬНЫЙ, поэтому самый безопасный (и, вероятно, единственный) способ использовать эту конфигурацию отладки — убедиться, что все файлы Chrome. exe-процессы были остановлены. Закройте все окна браузера Chrome и используйте диспетчер задач Windows, чтобы убить все другие процессы Chrome.exe.

  • Теперь давайте добавим простой JavaScript для проверки нашей конфигурации отладки. Сначала добавьте новую папку с именем «app» в каталог вашего приложения, а затем создайте файл app.js внутри каталога приложения. Измените файл index.html, чтобы добавить кнопку с событием нажатия для вызова функции. Например:
//app.js
function test() {
    console.log('click...');
}
<!-- index.html --&gt;
<button>Test</button>
<script src="app/app.js"></script>
  • Установите точку останова в строке кода console.log и нажмите F5.
  • Нажмите кнопку «Тест», и вы должны попасть в точку останова.

Honestly, the pain of debugging in Visual Studio Code in the renderer process is such a pain in the ass, right now it isn't worth it. Better to use the Chrome tools by default, but for those of you interested in using Visual Studio Code instead, you also have that option.
Packaging and Deploying
By far the simplest way I've found to package and build an Electron application (so far) is to use electron-builder. Let's create an installer for our application.
  • Создайте папку с именем «build» в каталоге вашего приложения.
  • Вам понадобится действительный ico-файл 256x256 с именем icon.ico. Вы можете открыть Microsoft Paint, изменить размер холста до 256x256 пикселей, отключить сохранение пропорций и сохранить файл в формате .png.

  • Затем найдите онлайн-конвертер ICO, например http://icoconvert.com/, чтобы преобразовать файл в .ico, сохранив его в папке сборки. Недопустимый формат файла приведет к тому, что построитель выдаст исключение.
  • Затем вы можете создать или использовать существующий анимированный GIF для вашей установки. Файл должен называться install-spinner.gif. Я неравнодушен к «времени желе с арахисовым маслом», поэтому я использую его. :)
  • Используйте NPM для установки электронного строителя
npm install electron-builder
  • Вы должны указать «автора» и «описание» в файле package.json вместе с разделом сборки и скриптов. Измените файл package.json, чтобы он выглядел следующим образом:
{
    "name" : "SampleApp",
    "description": "This is a sample application.",
    "author": "Sean Chase",
    "version" : "0.1.0",
    "main" : "main.js",
    "build": {
        "appId": " SampleApp",
        "app-category-type": "public.app-category.productivity",
        "win": {
            "msi": false,
            "iconUrl": "https://raw.githubusercontent.com/unboxedsolutions/ElectronSampleApp/master/build/icon.ico"
        }
    },
    "scripts": {
        "postinstall": "install-app-deps",
        "start": "electron ./app --enable-logging",
        "dev": "NODE_ENV='development' npm run start",
        "pack": "build --dir",
        "dist": "build --x64 --ia32"
    } 
}
  • В командной строке запустите следующую команду сборки из каталога вашего приложения.
node_modules\.bin\build --win --x64
Your application should build into a "dist" folder. Your icon file should appear on the Setup EXE file and your animated GIF (the dancing banana if you are into "peanut butter jelly time") should appear when you run the setup file.

Если у вас есть сертификат для подписи кода (для которого вам понадобится сертификат из ЦС), вы, вероятно, уже знаете, как выполнить подпись кода. Если нет, то сейчас, если вы хотите создать самозаверяющий сертификат, чтобы понять процесс, вот основные шаги. Это будет абсолютно необходимо, если/когда вы опубликуете свое приложение. Для прохождения урока этого делать не нужно.

makecert -r -pe -n "CN=UnboxedSolutions Development PreRelease" -ss CA -sr CurrentUser -a sha256 -cy authority -sky signature -sv prerelease.pvk prerelease.cer
certutil -user -addstore Root prerelease.cer
makecert -pe -n "CN=UnboxedSolutions PCS" -a sha256 -cy end -sky signature -ic prerelease.cer -iv prerelease.pvk -sv npcs.pvk npcs.cer
pvk2pfx -pvk npcs.pvk -spc npcs.cer -pfx npcs.pfx
signtool sign /v /f npcs.pfx "dist\win\SampleApp Setup 0.1.0.exe

В следующем сообщении в блоге я расскажу вам, как обрабатывать события белки, и мы создадим конечную точку для обработки автоматических обновлений с помощью простой службы REST, которая возвращает данные из файла RELEASES и возвращает соответствующий пакет NuGet (файл .nupkg) . Файлы для этого сообщения в блоге находятся в моем репозитории github по адресу https://github.com/unboxedsolutions/ElectronSampleApp.