Перейти к основному содержанию

Отладка под Windows

Если вы наблюдаете аварии или проблемы в работе Electron, которые, как вы считаете, вызваны самим Electron, а не приложением на JavaScript, отладка может быть немного сложной, особенно для разработчиков ранее не занимавшихся отладкой кода на C++. However, using Visual Studio, Electron's hosted Symbol Server, and the Electron source code, you can enable step-through debugging with breakpoints inside Electron's source code.

См. также: Есть много информации об отладке Chromium, большая часть из которых относится и к Electron, на сайте разработчиков Chromium: Отладка Chromium на Windows.

Требования​

  • Отладочная сборка Electron: Обычно проще всего собрать ее самостоятельно, используя инструменты и предварительные требования, перечисленные в инструкции по сборке под Windows. Вы конечно можете скачать обычную сборку Electron и подключиться для отладки к ней, но вы обнаружите, что она сильно оптимизирована, и это существенно затрудняет отладку: отладчик не сможет показать вам содержимое всех переменных, так же путь выполнения может казаться странным вследствие встраивания функций (inlining), хвостовых вызовов (trail calls) и других оптимизаций, выполненных компилятором.

  • Visual Studio с инструментами C++: бесплатная общественная редакция Visual Studio, можно использовать версии VS2013 и VS2015. Once installed, configure Visual Studio to use Electron's Symbol server. Это позволит Visual Studio получить лучшее представление о том, что происходит внутри Electron, что позводит представить переменные в удобочитаемом формате.

  • ProcMon: бесплатный инструмент от SysInternals, позволяющий вам просматривать параметры процессов, файловые дескрипторы, и операции над реестром.

Подключение к Electron для отладки​

Для запуска сеанса отладки, откройте PowerShell/CMD и запустите отладочную сборку Electron, указав приложение в качестве параметра.

$ ./out/Testing/electron.exe ~/my-electron-app/

Задание точек останова​

Затем, откройте Visual Studio. Electron не был собран из Visual Studio, и поэтому код не содержит файла проекта; тем не менее, вы можете открывать исходные файлы просто "как файл", то есть Visual Studio откроет их сами по себе. Тем не менее, вы можете ставить точки останова - Visual Studio автоматически определит, что этот исходный код соответствует исполняемому коду в подключенном процессе, и остановится на указанной точке останова.

Соответствующие файлы кода можно найти в ./shell/.

Подключение​

Вы можете подключить отладчик Visual Studio к запущенному процессу, на локальном или удаленном компьютере. После того как процесс был запущен, нажмите Debug / Attach to Process (или нажмите CTRL + ALT + P), чтобы открыть диалоговое окно «Attach to Process». Вы можете использовать эту возможность для отладки приложений, выполняемых на локальном или удаленном компьютере, и для одновременной отладки нескольких процессов.

Если Electron выполняется под учетной записью другого пользователя, установите флажок Show processes from all users. Обратите внимание, что вы увидите несколько процессов, их количество зависит от того, сколько BrowserWindows открыто в вашем приложении. Типичное одноокнонное приложение будет выглядеть в Visual Studio как два процесса Electron.exe - один для основного процесса и один для процесса визуализации. Поскольку список показывает вам только имена, в настоящее время нет надежного способа выяснить какой из них к чему относится.

К какому процессу я должен подключиться?​

Code executed within the main process (that is, code found in or eventually run by your main JavaScript file) will run inside the main process, while other code will execute inside its respective renderer process.

Вы можете подключиться к несколько программам для отладки, но только одна программа будет активна в отладчике в каждый момент времени. Вы можете задать активную программу в панели инструментов Debug Location либо в окне Processes.

Использование ProcMon для наблюдения за процессом​

В то время как Visual Studio отлично подходит для изучения конкретных путей выполнения, ProcMon действительно силен в наблюдении за всем, что делает ваше приложение с операционной системой - включая файлы, реестр, сеть, процессы и детальное профилирование процессов. Он пытается протоколировать все происходящие события, что может быть даже весьма излишним, но если вы стремитесь понять, что и как делает ваше приложение с операционной системой, это может быть ценным ресурсом.

В качестве введения в базовые и расширенные возможности отладки через ProcMon можно рекомендовать это видео руководство от Microsoft.

Using WinDbg​

It's possible to debug crashes and issues in the Renderer process with WinDbg.

To attach to a debug a process with WinDbg:

  1. Add --renderer-startup-dialog as a command line flag to Electron.
  2. Launch the app you are intending to debug.
  3. A dialog box will appear with a pid: “Renderer starting with pid: 1234”.
  4. Launch WinDbg and choose “File > Attach to process” in the application menu.
  5. Enter in pid from the dialog box in Step 3.
  6. See that the debugger will be in a paused state, and that there is a command line in the app to enter text into.
  7. Type “g” into the above command line to start the debuggee.
  8. Press the enter key to continue the program.
  9. Go back to the dialog box and press “ok”.