Electron Desktop App Development · บทเรียน

การดีบักกระบวนการหลักและกระบวนการแสดงผล

เชี่ยวชาญเครื่องมือและเทคนิคการดีบักสำหรับทั้งกระบวนการหลัก (Node.js) และกระบวนการแสดงผล (Chromium DevTools) ใน Electron

การดีบักกระบวนการหลักและกระบวนการแสดงผล เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Electron Desktop App Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

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!

คำถามที่พบบ่อย

บทเรียน “การดีบักกระบวนการหลักและกระบวนการแสดงผล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การดีบักกระบวนการหลักและกระบวนการแสดงผล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การดีบักกระบวนการหลักและกระบวนการแสดงผล”

เชี่ยวชาญเครื่องมือและเทคนิคการดีบักสำหรับทั้งกระบวนการหลัก (Node.js) และกระบวนการแสดงผล (Chromium DevTools) ใน Electron คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Electron Desktop App Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Electron Desktop App Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การดีบักกระบวนการหลักและกระบวนการแสดงผล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

ได้ บทเรียน Electron Desktop App Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Electron Desktop App Development