Electron - debugowanie

Mamy dwa procesy, które uruchamiają naszą aplikację - proces główny i proces renderowania.

Ponieważ proces renderowania jest wykonywany w naszym oknie przeglądarki, możemy użyć narzędzi Chrome Devtools do debugowania. Aby otworzyć DevTools, użyj skrótu „Ctrl + Shift + I” lub klawisza <F12>. Możesz sprawdzić, jak używać devtools tutaj .

Po otwarciu DevTools Twoja aplikacja będzie wyglądać tak, jak pokazano na poniższym zrzucie ekranu -

Debugowanie procesu głównego

DevTools w oknie przeglądarki Electron mogą tylko debugować JavaScript, który jest wykonywany w tym oknie (tj. Strony internetowe). Aby debugować JavaScript, który jest wykonywany w głównym procesie, będziesz musiał użyć zewnętrznego debuggera i uruchomić Electron z przełącznikiem --debug lub --debug-brk .

Electron nasłuchuje komunikatów protokołu debuggera V8 na określonym porcie; zewnętrzny debugger będzie musiał podłączyć się do tego portu. Domyślny port to 5858.

Uruchom aplikację, korzystając z:

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

Teraz będziesz potrzebować debuggera obsługującego protokół debuggera V8. W tym celu możesz użyć VSCode lub node-inspector. Na przykład wykonajmy te kroki i skonfigurujmy VSCode w tym celu. Wykonaj następujące kroki, aby go skonfigurować -

Pobierz i zainstaluj VSCode . Otwórz swój projekt Electron w VSCode.

Dodaj plik .vscode/launch.json z następującą konfiguracją -

{
   "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 - W przypadku systemu Windows użyj "${workspaceRoot}/node_modules/.bin/electron.cmd" dla runtimeExecutable.

Ustaw kilka punktów przerwania w main.jsi rozpocznij debugowanie w widoku debugowania. Kiedy trafisz w punkty przerwania, ekran będzie wyglądał mniej więcej tak -

Debugger VSCode jest bardzo wydajny i pomoże Ci szybko naprawić błędy. Masz również inne opcje, takie jaknode-inspector do debugowania aplikacji electron.