Electron Desktop App Development · Lección

Depuración de los procesos principal y de renderizado

Domine las herramientas y técnicas de depuración de los procesos principal (Node.js) y de renderizado (Chromium DevTools) en Electron.

Depuración de los procesos principal y de renderizado es una lección gratuita de Electron Desktop App Development en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Electron Desktop App Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Electron Desktop App Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en 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!

Preguntas frecuentes

¿La lección «Depuración de los procesos principal y de renderizado» es gratis?

Sí — el texto completo de «Depuración de los procesos principal y de renderizado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Electron Desktop App Development, actualiza a CoddyKit PRO. El curso de Electron Desktop App Development incluye 4 lecciones en total.

¿Qué aprenderé en «Depuración de los procesos principal y de renderizado»?

Domine las herramientas y técnicas de depuración de los procesos principal (Node.js) y de renderizado (Chromium DevTools) en Electron. Practicas Electron Desktop App Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Electron Desktop App Development?

No se requiere experiencia previa. Electron Desktop App Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Depuración de los procesos principal y de renderizado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Electron Desktop App Development?

Sí. Cada lección de Electron Desktop App Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Depuración de los procesos principal y de renderizado
Pruebas unitarias con Spectron
Flujos de pruebas de extremo a extremo
Pruebas E2E modernas con Playwright

← Volver a Electron Desktop App Development