Udvikling af desktopapps med Electron · Lektion

Fejlfinding i main- og renderer-processer

Mestr fejlfindingsværktøjer og -teknikker til både main-processen (Node.js) og renderer-processen (Chromium DevTools) i Electron.

Lektion 1 af 412 trin

Fejlfinding i main- og renderer-processer er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Velkommen til fejlfinding i Electron

Har du nogensinde undret dig over, hvorfor din Electron-app ikke opfører sig som forventet? Fejlfinding er din superkraft! Den hjælper dig med at finde og løse problemer i din kode.

Electron-apps har to hovedtyper af processer: hovedprocessen og rendererprocesser. Hver type kræver en forskellig tilgang til fejlfinding, og vi gennemgår dem begge!

Hovedprocessen forklaret

Tænk på hovedprocessen som hjernen i din Electron-applikation. Det er et Node.js-miljø, der:

håndterer applikationens livscyklus (åbning og lukning)
håndterer interaktioner med operativsystemet (menuer og dialogbokse)
opretter og håndterer rendererprocesser (dine appvinduer)

Da det er et Node.js-miljø, fejlsøger vi det som en Node.js-applikation.

Aktivering af fejlfinding af hovedprocessen

For at fejlsøge hovedprocessen skal vi fortælle Electron, at den skal åbne en fejlfindingsport. Det kan du gøre ved at tilføje et kommandolinjeflag, når din app starter.

Flaget --inspect åbner en port til V8 Inspector Protocol, som Chrome DevTools kan oprette forbindelse til.

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();
});

Tilslutning af DevTools til hovedprocessen

Når din Electron-app kører med flaget --inspect, kan du oprette forbindelse til den med Chrome DevTools.

Åbn Google Chrome (eller Edge).
Skriv chrome://inspect i adresselinjen.
Under sektionen 'Devices' burde du kunne se din Electron-app med et 'target' og et 'inspect'-link. Klik på 'inspect'.

Det åbner et dedikeret DevTools-vindue til din hovedproces!

Eksempel på fejlfinding af hovedprocessen

Lad os sætte et breakpoint i koden til vores hovedproces. Kør denne kode, åbn derefter chrome://inspect, og klik på 'inspect' for målet. Find main.js på fanen 'Sources' i DevTools, klik på linje 9 for at sætte et breakpoint, og genoptag derefter kørslen. Hvad sker der?

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();
});

Rendererprocessen forklaret

Rendererprocessen er det sted, hvor din brugergrænseflade findes. Hvert BrowserWindow i Electron kører i sin egen rendererproces. Det er grundlæggende et webbrowsermiljø, der minder om en fane i Chrome.

Den gengiver din HTML, CSS og JavaScript.
Den interagerer med DOM'en.
Den er isoleret fra det oprindelige operativsystem.

Du fejlsøger rendererprocesser på samme måde, som du fejlsøger websider!

Fejlfinding af rendererprocessen

Fejlfinding af rendererprocessen minder meget om fejlfinding af en almindelig webside. Electron tilbyder en enkel måde at åbne Chromium DevTools for ethvert BrowserWindow.

Metoden webContents.openDevTools() kan kaldes på en BrowserWindow-instans for at starte 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();
});

Eksempel på fejlfinding af rendererprocessen

Lad os oprette en simpel rendererproces. Kør denne kode. DevTools for vinduet åbnes automatisk. Find index.html eller renderer.js (hvis du har tilknyttet en af dem) på fanen 'Sources', sæt et breakpoint på linjen med alert, og genindlæs siden. Hvad sker der?

<!-- 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>

Vigtige DevTools-funktioner

DevTools til både hoved- og rendererprocesser tilbyder effektive funktioner:

Console: Se logge, og kør JavaScript-kommandoer.
Sources: Sæt breakpoints, gennemgå koden trin for trin, og undersøg variabler.
Network: Overvåg netværksanmodninger (kun rendererprocessen).
Elements: Undersøg og rediger HTML/CSS (kun rendererprocessen).
Application: Undersøg lokalt lager og sessionslager (kun rendererprocessen).

Når du mestrer disse funktioner, går din fejlfinding betydeligt hurtigere.

Avancerede tip til fejlfinding

Gå videre end grundlæggende breakpoints:

Betingede breakpoints: Sæt kun udførelsen på pause, når en betingelse er sand.
Logpunkter: Log variabelværdier uden at sætte udførelsen på pause.
Nøgleordet debugger;: Indsæt det direkte i din kode for at tvinge en pause.
console.trace();: Se kaldstakken for en funktion.

Disse teknikker hjælper dig med at finde svære fejl mere effektivt.

Videnstjek om fejlfinding

Du har lært om fejlfinding af begge Electron-processer. Lad os se, om du kan skelne mellem dem!

Besvar den i den interaktive lektion

Opsummering: Fejlfinding i Electron

Godt klaret! Nu forstår du de vigtigste begreber inden for fejlfinding i Electron:

Hovedprocessen (Node.js) håndterer appens livscyklus og oprindelige interaktioner og fejlsøges via chrome://inspect, efter at flaget --inspect er aktiveret.
Rendererprocesser (Chromium) håndterer brugergrænsefladen og fejlsøges ved hjælp af mainWindow.webContents.openDevTools().
Begge processer bruger effektive Chromium DevTools-funktioner som breakpoints, konsollen og undersøgelse af kildekode.

God jagt på fejlene!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 47

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Fejlfinding i main- og renderer-processer” gratis?

Ja — hele teksten til “Fejlfinding i main- og renderer-processer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Fejlfinding i main- og renderer-processer”?

Mestr fejlfindingsværktøjer og -teknikker til både main-processen (Node.js) og renderer-processen (Chromium DevTools) i Electron. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Fejlfinding i main- og renderer-processer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Fejlfinding i main- og renderer-processer
Enhedstest med Spectron
End-to-end-testarbejdsgange
Moderne E2E-test med Playwright

← Tilbage til Udvikling af desktopapps med Electron