Electron Desktop App Development · Lesson

Debugging Main and Renderer Processes

Master debugging tools and techniques for both the main (Node.js) and renderer (Chromium DevTools) processes in Electron.

Debugging Main and Renderer Processes is a free Electron Desktop App Development lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Electron Desktop App Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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!

Frequently asked questions

Is the “Debugging Main and Renderer Processes” lesson free?

Yes — the full text of “Debugging Main and Renderer Processes” is free to read here on the web, and the Electron Desktop App Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Electron Desktop App Development course, upgrade to CoddyKit PRO.

What will I learn in “Debugging Main and Renderer Processes”?

Master debugging tools and techniques for both the main (Node.js) and renderer (Chromium DevTools) processes in Electron. You practise Electron Desktop App Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Electron Desktop App Development?

No prior experience is required. Electron Desktop App Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Debugging Main and Renderer Processes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Electron Desktop App Development lesson?

Yes. Every Electron Desktop App Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Electron Desktop App Development