0Pricing
Electron Desktop App Development · Lekcja

Debugowanie procesów głównego i renderera

Opanuj narzędzia i techniki debugowania zarówno procesu głównego (Node.js), jak i procesu renderera (Chromium DevTools) w Electron.

Debugowanie procesów głównego i renderera to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Debugowanie procesów głównego i renderera” jest bezpłatna?

Tak — pełny tekst „Debugowanie procesów głównego i renderera” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Debugowanie procesów głównego i renderera”?

Opanuj narzędzia i techniki debugowania zarówno procesu głównego (Node.js), jak i procesu renderera (Chromium DevTools) w Electron. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?

Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Debugowanie procesów głównego i renderera”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?

Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Debugowanie procesów głównego i renderera
  2. Testy jednostkowe z Spectron
  3. Przepływy testów end-to-end
  4. Nowoczesne testy E2E z Playwright
← Powrót do Electron Desktop App Development