Electron - Depuración

Tenemos dos procesos que ejecutan nuestra aplicación: el proceso principal y el proceso de renderizado.

Dado que el proceso de renderizado es el que se ejecuta en la ventana de nuestro navegador, podemos usar Chrome Devtools para depurarlo. Para abrir DevTools, use el atajo "Ctrl + Shift + I" o la tecla <F12>. Puedes ver cómo usar devtools aquí .

Cuando abra DevTools, su aplicación se verá como se muestra en la siguiente captura de pantalla:

Depurar el proceso principal

Las DevTools en una ventana del navegador Electron solo pueden depurar JavaScript que se ejecuta en esa ventana (es decir, las páginas web). Para depurar JavaScript que se ejecuta en el proceso principal, necesitará usar un depurador externo e iniciar Electron con el interruptor --debug o --debug-brk .

Electron escuchará los mensajes del protocolo del depurador V8 en el puerto especificado; un depurador externo deberá conectarse a este puerto. El puerto predeterminado es 5858.

Ejecute su aplicación usando lo siguiente:

$ electron --debug = 5858 ./main.js

Ahora necesitará un depurador que admita el protocolo de depuración V8. Puede usar VSCode o node-inspector para este propósito. Por ejemplo, sigamos estos pasos y configuremos VSCode para este propósito. Siga estos pasos para configurarlo:

Descargue e instale VSCode . Abra su proyecto Electron en VSCode.

Agregar un archivo .vscode/launch.json con la siguiente configuración -

{
   "version": "1.0.0",
   "configurations": [
      {
         "name": "Debug Main Process",
         "type": "node",
         "request": "launch",
         "cwd": "${workspaceRoot}",
         "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
         "program": "${workspaceRoot}/main.js"
      }
   ]
}

Note - Para Windows, use "${workspaceRoot}/node_modules/.bin/electron.cmd" para runtimeExecutable.

Establezca algunos puntos de interrupción en main.jsy comience a depurar en la vista de depuración. Cuando llegue a los puntos de interrupción, la pantalla se verá así:

El depurador VSCode es muy poderoso y lo ayudará a corregir errores rápidamente. También tienes otras opciones comonode-inspector para depurar aplicaciones electrónicas.