Utvikling av Electron-skrivebordsapper · leksjon

Feilsøke main- og renderer-prosessene

Bli fortrolig med feilsøkingsverktøy og -teknikker for både main-prosessen (Node.js) og renderer-prosessen (Chromium DevTools) i Electron.

Leksjon 1 av 412 trinn

Feilsøke main- og renderer-prosessene er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Velkommen til feilsøking i Electron

Har De noen gang lurt på hvorfor Electron-appen ikke oppfører seg som forventet? Feilsøking er Deres superkraft! Den hjelper Dem med å finne og løse problemer i koden.

Electron-apper har to hovedtyper prosesser: Main Process og Renderer Processes. Hver av dem krever en egen tilnærming til feilsøking, og vi skal se på begge!

Forklaring av Main Process

Tenk på Main Process som hjernen i Electron-applikasjonen Deres. Det er et Node.js-miljø som:

håndterer applikasjonens livssyklus (åpning og lukking),
håndterer samhandling med operativsystemet (menyer og dialogbokser),
oppretter og administrerer renderer-prosesser (appvinduene Deres).

Siden dette er et Node.js-miljø, feilsøker vi det på samme måte som en Node.js-applikasjon.

Aktivere feilsøking av Main Process

For å feilsøke main process må vi fortelle Electron at den skal åpne en feilsøkingsport. Dette kan De gjøre ved å legge til et kommandolinjeflagg når appen starter.

Flagget --inspect åpner en port for V8 Inspector Protocol, som Chrome DevTools kan koble seg 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();
});

Koble DevTools til Main Process

Når Electron-appen kjører med flagget --inspect, kan De koble Chrome DevTools til den.

Åpne Google Chrome (eller Edge).
Skriv inn chrome://inspect i adressefeltet.
Under delen «Devices» skal De se Electron-appen oppført med en «target» og en «inspect»-kobling. Klikk på «inspect».

Dette åpner et eget DevTools-vindu for main process!

Eksempel på feilsøking av Main Process

La oss sette et stoppunkt i koden for main process. Kjør denne koden, åpne deretter chrome://inspect og klikk på «inspect» for målet. Finn main.js i DevTools-fanen «Sources», klikk på linje 9 for å sette et stoppunkt, og fortsett deretter kjøringen. Hva skjer?

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

Forklaring av Renderer Process

Renderer Process er stedet der brukergrensesnittet Deres kjører. Hvert BrowserWindow i Electron kjører i sin egen renderer-prosess. Den fungerer i praksis som et nettlesermiljø, omtrent som en fane i Chrome.

Den gjengir HTML, CSS og JavaScript.
Den samhandler med DOM.
Den er isolert fra det opprinnelige operativsystemet.

Renderer-prosesser feilsøker De på samme måte som nettsider!

Feilsøke Renderer Process

Feilsøking av renderer process ligner i stor grad på feilsøking av en vanlig nettside. Electron tilbyr en enkel måte å åpne Chromium DevTools for alle BrowserWindow-forekomster.

Metoden webContents.openDevTools() kan kalles på en BrowserWindow-instans for å åpne 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å feilsøking av Renderer Process

La oss opprette en enkel renderer-prosess. Kjør denne koden. DevTools for vinduet åpnes automatisk. Finn index.html eller renderer.js (hvis De kobler inn en slik) i fanen «Sources», sett et stoppunkt på alert-linjen, og last siden inn på nytt. Hva skjer?

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

Viktige DevTools-funksjoner

DevTools for både main process og renderer process tilbyr kraftige funksjoner:

Console: Vis logger og kjør JavaScript-kommandoer.
Sources: Sett stoppunkter, gå gjennom koden trinn for trinn og inspiser variabler.
Network: Overvåk nettverksforespørsler (bare renderer).
Elements: Inspiser og endre HTML/CSS (bare renderer).
Application: Inspiser lokal lagring og øktlagring (bare renderer).

Når De behersker disse funksjonene, går feilsøkingen betydelig raskere.

Avanserte tips for feilsøking

Gå utover grunnleggende stoppunkter:

Betingede stoppunkter: Sett kjøringen på pause bare når en betingelse er oppfylt.
Loggpunkter: Logg variabelverdier uten å sette kjøringen på pause.
Nøkkelordet debugger;: Sett det direkte inn i koden for å tvinge frem en pause.
console.trace();: Se kallstakken for en funksjon.

Disse teknikkene gjør det enklere å finne vanskelige feil på en effektiv måte.

Kunnskapssjekk: feilsøking

De har lært om feilsøking av begge Electron-prosessene. La oss se om De klarer å skille mellom dem!

Besvar den i den interaktive leksjonen

Oppsummering: Feilsøking i Electron

Godt jobbet! Nå forstår De de viktigste konseptene for feilsøking i Electron:

Main Process (Node.js) håndterer appens livssyklus og opprinnelige funksjoner, og feilsøkes via chrome://inspect etter at flagget --inspect er aktivert.
Renderer Processes (Chromium) håndterer brukergrensesnittet og feilsøkes ved hjelp av mainWindow.webContents.openDevTools().
Begge benytter kraftige funksjoner i Chromium DevTools, for eksempel stoppunkter, konsoll og inspeksjon av kildekode.

Lykke til med feiljakten!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Feilsøke main- og renderer-prosessene» gratis?

Ja – hele teksten i «Feilsøke main- og renderer-prosessene» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Feilsøke main- og renderer-prosessene»?

Bli fortrolig med feilsøkingsverktøy og -teknikker for både main-prosessen (Node.js) og renderer-prosessen (Chromium DevTools) i Electron. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Feilsøke main- og renderer-prosessene»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av Electron-skrivebordsapper