Saltar al contenido principal

Depuración en Windows

Si usted tiene bloqueos o problemas en Electron que cree que no son causados ​​por la aplicación de JavaScript, sino por Electron, la depuración puede ser un poco difícil, especialmente para desarrolladores que no están acostumbrados a la depuración nativa/C++. Sin embargo, usando Visual Studio, el servidor de símbolos de Electron y el código fuente de Electron, puede habilitar la depuración paso a paso con puntos de ruptura dentro de código fuente de Electron.

Vea también: hay una gran cantidad de información sobre la depuración de Chromium, mucha de la cual también se aplica a Electron, en el sitio de desarrolladores de Chromium: Debugging Chromium on Windows.

Requisitos​

  • A debug build of Electron: The easiest way is usually building it yourself, using the tools and prerequisites listed in the build instructions for Windows. Aunque puede adjuntar y depurar Electrón a medida que lo descarga directamente, encontrará que está muy optimizado, lo que dificulta considerablemente la depuración: el depurador no podrá mostrarle el contenido de todas las variables y la ruta de ejecución puede parecer extraña debido a las llamadas en línea, las llamadas de cola y otras optimizaciones del compilador.

  • Visual Studio con herramientas de C++: las ediciones de la comunidad gratuitas de Visual Studio 2013 y 2015 funcionan. Once installed, configure Visual Studio to use Electron's Symbol server. Le permitirá a Visual Studio obtener una mejor comprensión de lo que sucede dentro de Electron, haciendo que sea más fácil presentar las variables en un formato de lectura.

  • ProcMon: la herramienta gratuita SysInternals le permite inspeccionar los parámetros de los procesos, los manejadores de archivos y las operaciones de registro.

A y depuración Electron​

Para iniciar una sesión de depuración, abra PowerShell/CMD y ejecute su versión de depuración de Electron, usando la aplicación para abrir como parámetro.

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

Establecer puntos de interrupción​

Luego, abre Visual Studio. Electron no está construido con Visual Studio y, por lo tanto, no contiene un archivo de proyecto - sin embargo, usted puede abrir los archivos de código fuente "Como archivo", lo que significa que Visual Studio los abrirá por sí mismo. Usted puede todavía establecer puntos de interrupción - Visual Studio automáticamente descifrará que el código fuente coincide con el código que se ejecuta en el proceso adjunto y se romperá en consecuencia.

Relevant code files can be found in ./shell/.

Adjuntado​

Usted puede conectar el depurador de Visual Studio a un proceso en ejecución en una computadora local o remota. Después de que se esté ejecutando el proceso, haga clic en Depurar / Adjuntar al proceso (o presione CTRL+ALT+P) para abrir el cuadro de diálogo "Adjuntar al proceso". Usted puede usar esta capacidad para depurar aplicaciones que se ejecutan en una computadora local o remota, depurará múltiples procesos simultáneamente.

Si Electron se ejecuta con una cuenta de usuario diferente, seleccione mostrar procesos de todos los usuarios en la casilla. Tenga en cuenta que dependiendo de cuántos BrowserWindows su aplicación tenga abiertos, verá múltiples procesos. Una típica aplicación de una ventana dará como resultado que Visual Studio le presente dos entradas Electron.exe: una para el proceso principal y otra para el proceso renderizado. Dado que la lista solo le da nombres, actualmente no hay una forma confiable de descubrir cuál es cuál.

¿A qué proceso debo adjuntarme?​

Código ejecutado dentro del proceso principal (es decir, código encontrado en o eventualmente ejecutado por su archivo JavaScript principal) se ejecutara dentro del proceso principal, mientras que otro código se ejecutara dentro de su respectivo proceso renderer.

Puede estar conectado a varios programas cuando se está depurando, pero solamente un programa está activo en el depurador en cualquier momento. Puedes configurar el programa activo en la barra de herramientas Ubicación de depuración o en la ventana de procesos.

Usando ProcMon para Observar un Proceso​

Mientras que Visual Studio es fantástico para inspeccionar rutas de código específicas, la fortaleza de ProcMon está realmente en observar todo lo que su aplicación está haciendo con el sistema operativo: captura los detalles de archivo, registro, red, proceso y perfil detallado de los procesos. Intenta registrar todos los eventos que se producen y puede ser bastante abrumador, pero si intenta comprender qué y cómo está trabajando su aplicación en el sistema operativo, puede ser un recurso valioso.

Para obtener una introducción a las funciones de depuración básicas y avanzadas de ProcMon, consulte el video proveído por Microsoft this video tutorial.

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”.