Elettrone - Debug

Abbiamo due processi che eseguono la nostra applicazione: il processo principale e il processo di rendering.

Poiché il processo di rendering è quello in esecuzione nella finestra del browser, possiamo utilizzare Chrome Devtools per eseguirne il debug. Per aprire DevTools, usa la scorciatoia "Ctrl + Shift + I" o il tasto <F12>. Puoi controllare come usare devtools qui .

Quando apri DevTools, la tua app apparirà come quella mostrata nello screenshot seguente:

Debug del processo principale

I DevTools in una finestra del browser Electron possono eseguire il debug solo di JavaScript eseguito in quella finestra (cioè le pagine web). Per eseguire il debug di JavaScript eseguito nel processo principale, sarà necessario utilizzare un debugger esterno e avviare Electron con l' opzione --debug o --debug-brk .

Electron ascolterà i messaggi del protocollo del debugger V8 sulla porta specificata; un debugger esterno dovrà connettersi su questa porta. La porta predefinita è 5858.

Esegui la tua app utilizzando quanto segue:

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

Ora avrai bisogno di un debugger che supporti il ​​protocollo del debugger V8. A questo scopo puoi usare VSCode o node-inspector. Ad esempio, seguiamo questi passaggi e configuriamo VSCode per questo scopo. Segui questi passaggi per configurarlo:

Scarica e installa VSCode . Apri il tuo progetto Electron in VSCode.

Aggiungi un file .vscode/launch.json con la seguente configurazione -

{
   "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 - Per Windows, usa "${workspaceRoot}/node_modules/.bin/electron.cmd" per runtimeExecutable.

Imposta alcuni punti di interruzione in main.jse avvia il debug nella visualizzazione Debug. Quando raggiungi i punti di interruzione, lo schermo avrà un aspetto simile a questo:

Il debugger VSCode è molto potente e ti aiuterà a correggere rapidamente gli errori. Hai anche altre opzioni comenode-inspector per eseguire il debug delle app di elettroni.