Electron - Depuração

Temos dois processos que executam nosso aplicativo - o processo principal e o processo de renderização.

Como o processo de renderização é o que está sendo executado na janela do navegador, podemos usar o Chrome Devtools para depurá-lo. Para abrir DevTools, use o atalho "Ctrl + Shift + I" ou a tecla <F12>. Você pode verificar como usar devtools aqui .

Ao abrir o DevTools, seu aplicativo terá a aparência mostrada na imagem a seguir -

Depurando o Processo Principal

O DevTools em uma janela do navegador Electron só pode depurar o JavaScript executado nessa janela (ou seja, as páginas da web). Para depurar o JavaScript executado no processo principal, você precisará usar um depurador externo e iniciar o Electron com a opção --debug ou --debug-brk .

O Electron escutará as mensagens do protocolo do depurador V8 na porta especificada; um depurador externo precisará se conectar a esta porta. A porta padrão é 5858.

Execute seu aplicativo usando o seguinte -

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

Agora você precisará de um depurador que suporte o protocolo do depurador V8. Você pode usar o VSCode ou o node-inspector para essa finalidade. Por exemplo, vamos seguir essas etapas e configurar o VSCode para esse propósito. Siga estas etapas para configurá-lo -

Baixe e instale o VSCode . Abra seu projeto Electron no VSCode.

Adicionar um arquivo .vscode/launch.json com a seguinte configuração -

{
   "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.

Defina alguns pontos de interrupção em main.jse inicie a depuração na Visualização de depuração. Quando você atinge os pontos de interrupção, a tela se parece com isto -

O depurador VSCode é muito poderoso e o ajudará a corrigir erros rapidamente. Você também tem outras opções comonode-inspector para depurar aplicativos de elétrons.