Electron Desktop App Development · Aula

Depuração dos Processos Principal e de Renderização

Domine ferramentas e técnicas de depuração para os processos principal (Node.js) e de renderização (DevTools do Chromium) no Electron.

Depuração dos Processos Principal e de Renderização é uma aula grátis de Electron Desktop App Development no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Electron Desktop App Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Electron Desktop App Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Welcome to Electron Debugging

Ever wondered why your Electron app isn't behaving as expected? Debugging is your superpower! It helps you find and fix issues in your code.

Electron apps have two main types of processes: the Main Process and Renderer Processes. Each needs a different approach to debugging, and we'll cover both!

The Main Process Explained

Think of the Main Process as the brain of your Electron application. It's a Node.js environment that:

Manages the application's lifecycle (opening, closing).
Handles native operating system interactions (menus, dialogs).
Creates and manages renderer processes (your app windows).

Since it's a Node.js environment, we'll debug it like a Node.js application.

Enabling Main Process Debugging

To debug the main process, we need to tell Electron to open a debugging port. You can do this by adding a command line switch when your app starts.

The --inspect flag opens a V8 Inspector Protocol port, which Chrome DevTools can connect to.

const { app, BrowserWindow } = require('electron');

// Add this line BEFORE app.whenReady()
app.commandLine.appendSwitch('inspect', '5858');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  mainWindow.loadFile('index.html');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Attaching DevTools to Main

Once your Electron app is running with the --inspect flag, you can connect Chrome DevTools to it.

Open Google Chrome (or Edge).
Type chrome://inspect into the address bar.
Under the 'Devices' section, you should see your Electron app listed with a 'target' and an 'inspect' link. Click 'inspect'.

This opens a dedicated DevTools window for your main process!

Main Process Debug Example

Let's put a breakpoint in our main process code. Run this code, then open chrome://inspect and click 'inspect' on the target. In the DevTools 'Sources' tab, find main.js, click on line 9 to set a breakpoint, and then resume execution. What happens?

const { app, BrowserWindow } = require('electron');

app.commandLine.appendSwitch('inspect', '5858');

app.whenReady().then(() => {
  const message = 'Hello from Main Process!';
  console.log(message); // Set breakpoint here!

  const mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadFile('index.html');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

The Renderer Process Explained

The Renderer Process is where your user interface lives. Each BrowserWindow in Electron runs in its own renderer process. It's essentially a web browser environment, similar to a tab in Chrome.

It renders your HTML, CSS, and JavaScript.
It interacts with the DOM.
It's isolated from the native OS.

You'll debug renderer processes just like you debug web pages!

Debugging the Renderer Process

Debugging the renderer process is much like debugging a regular web page. Electron provides a simple way to open the Chromium DevTools for any BrowserWindow.

The webContents.openDevTools() method can be called on a BrowserWindow instance to launch the DevTools.

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  mainWindow.loadFile('index.html');

  // Open the DevTools for the renderer process
  mainWindow.webContents.openDevTools();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Renderer Process Debug Example

Let's create a simple renderer process. Run this code. The DevTools for the window will open automatically. In the 'Sources' tab, find index.html or renderer.js (if you link one), set a breakpoint on the alert line, and reload the page. What happens?

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Renderer Debug</title>
</head>
<body>
  <h1>Renderer Process Debug</h1>
  <button id="myButton">Click Me</button>
  <script>
    document.getElementById('myButton').addEventListener('click', () => {
      const greeting = 'Hello from Renderer!';
      alert(greeting); // Set breakpoint here!
      console.log(greeting);
    });
  </script>
</body>
</html>

Essential DevTools Features

Both main and renderer process DevTools offer powerful features:

Console: View logs, run JavaScript commands.
Sources: Set breakpoints, step through code, inspect variables.
Network: Monitor network requests (renderer only).
Elements: Inspect and modify HTML/CSS (renderer only).
Application: Inspect local storage, session storage (renderer only).

Mastering these will significantly speed up your debugging.

Advanced Debugging Tips

Go beyond basic breakpoints:

Conditional Breakpoints: Only pause when a condition is true.
Logpoints: Log variable values without pausing execution.
debugger; keyword: Insert directly into your code to force a pause.
console.trace();: See the call stack for a function.

These techniques help pinpoint elusive bugs more efficiently.

Debugging Knowledge Check

You've learned about debugging both Electron processes. Let's see if you can distinguish between them!

Recap: Debugging Electron

Great job! You now understand the core concepts of debugging in Electron:

The Main Process (Node.js) handles app lifecycle and native interactions, debugged via chrome://inspect after enabling the --inspect flag.
Renderer Processes (Chromium) handle the UI, debugged using mainWindow.webContents.openDevTools().
Both leverage powerful Chromium DevTools features like breakpoints, console, and source inspection.

Happy bug hunting!

Perguntas Frequentes

A aula “Depuração dos Processos Principal e de Renderização” é grátis?

Sim — o texto completo de “Depuração dos Processos Principal e de Renderização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Electron Desktop App Development, atualize para CoddyKit PRO. O curso de Electron Desktop App Development inclui 4 aulas no total.

O que vou aprender em “Depuração dos Processos Principal e de Renderização”?

Domine ferramentas e técnicas de depuração para os processos principal (Node.js) e de renderização (DevTools do Chromium) no Electron. Você pratica Electron Desktop App Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Electron Desktop App Development?

Nenhuma experiência prévia é necessária. Electron Desktop App Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Depuração dos Processos Principal e de Renderização”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Electron Desktop App Development?

Sim. Cada aula de Electron Desktop App Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Depuração dos Processos Principal e de Renderização
Testes de Unidade com Spectron
Fluxos de Testes de Ponta a Ponta
Testes E2E Modernos com Playwright

← Voltar para Electron Desktop App Development