Udvikling af browserudvidelser til Chrome og Edge · Lektion

Fejlfinding af udvidelsens komponenter

Brug Chrome- og Edge-udviklerværktøjerne til effektivt at foretage fejlfinding af baggrundsservice workers, pop op-vinduer og content scripts.

Lektion 1 af 412 trin

Fejlfinding af udvidelsens komponenter er en gratis Udvikling af browserudvidelser til Chrome og Edge-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 browserudvidelser til Chrome og Edge, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Velkommen til fejlfinding af udvidelser

Fejlfinding er processen med at finde og rette fejl i din kode. For browserudvidelser er det afgørende at forstå, hvordan du fejlsøger forskellige dele, f.eks. baggrundsscripts, pop op-vinduer og content scripts.

Da udvidelser kører i særlige miljøer, kræver de almindelige teknikker til fejlfinding af webapps en mindre tilpasning. Vi undersøger, hvordan du effektivt bruger udviklerværktøjerne i Chrome og Edge.

Åbning af udviklerværktøjer til udvidelser

Hvis du vil fejlsøge din udvidelse, skal du primært bruge browserens udviklerværktøjer (DevTools). Hvordan du åbner dem, afhænger af, hvilken del af udvidelsen du vil undersøge.

Gå til chrome://extensions (eller edge://extensions).
Sørg for, at "Udviklertilstand" er aktiveret.
Find din udvidelse, og klik på "Undersøg visninger" for baggrundsscripts eller bestemte pop op-vinduer.

Undersøgelse af baggrundsscripts

Baggrundsservicearbejdere er hændelsesdrevne scripts, der kører i baggrunden. De har ingen synlig brugergrænseflade, så deres DevTools-instans er separat.

På siden chrome://extensions skal du under din udvidelse finde linket "Undersøg visninger", specifikt for "service worker" eller "baggrundsside".
Når du klikker på dette link, åbnes et dedikeret DevTools-vindue, hvor du kan se konsollogge, angive breakpoints og undersøge variabler i dit baggrundsscript.

Praktisk øvelse: Baggrundsscript

Lad os se et enkelt baggrundsscript i funktion og se, hvordan du fejlsøger det. Dette script logger blot en meddelelse, når udvidelsen starter.

Når du har indlæst denne udvidelse, skal du åbne DevTools for dens baggrundsservicearbejder fra chrome://extensions. I konsollen kan du se "Background script loaded!" og andre meddelelser.

// background.js
console.log("Background script loaded!");

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed or updated!");
});

chrome.action.onClicked.addListener((tab) => {
  console.log("Extension icon clicked!");
  // This would typically trigger a popup or other action
});

Undersøgelse af pop op-vinduer og indstillinger

Pop op-vinduer og sider med indstillinger er grundlæggende almindelige HTML-sider med deres egen JavaScript og CSS. Det betyder, at du fejlsøger dem på samme måde som alle andre websider.

For et pop op-vindue: Højreklik et vilkårligt sted i pop op-vinduet, mens det er åbent, og vælg "Undersøg" eller "Undersøg element".
For en indstillingsside: Åbn indstillingssiden, normalt fra siden til administration af udvidelser eller via et direkte link, højreklik derefter, og vælg "Undersøg".

Dette åbner et almindeligt DevTools-vindue for den pågældende brugergrænsefladekomponent.

Praktisk øvelse: Brugergrænsefladen i et pop op-vindue

Her er JavaScript-koden til et grundlæggende pop op-vindue. Når du åbner pop op-vinduet, kører dette script og logger en meddelelse. Du kan inspicere elementerne i pop op-vinduet og konsoloutputtet direkte.

Sådan fejlsøger du: Klik på udvidelsesikonet for at åbne pop op-vinduet, højreklik derefter på pop op-vinduet, og vælg "Inspect". Se fanerne Console og Elements.

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Popup script loaded!');
  const button = document.getElementById('myButton');
  if (button) {
    button.addEventListener('click', () => {
      alert('Button clicked!');
      console.log('Button was clicked!');
    });
  }
});

Inspektion af content scripts

Content scripts kører i konteksten af en webside. Det betyder, at de kan interagere med websidens DOM, men også at deres DevTools er knyttet til selve websiden.

Åbn den webside, hvor dit content script er injiceret.
Åbn websidens DevTools (normalt F12 eller højreklik -> "Inspect").
På fanen "Sources" finder du ofte dit content script under en særlig chrome-extension://- eller moz-extension://-URL.

Vær opmærksom på, at content scripts kører i en isoleret verden. Det betyder, at de ikke deler globale variable direkte med websidens egen JavaScript-kode.

Praktisk øvelse: Content script

Dette content script ændrer baggrundsfarven på body-elementet og logger en meddelelse, når det injiceres på en webside. Indlæs det som en del af en udvidelse, der er konfigureret til at køre på et bestemt websted (f.eks. *://*/*).

Sådan fejlsøger du: Gå til en webside, hvor dit script er injiceret, åbn websidens DevTools, og se i Console. Du kan også finde scriptet på fanen Sources.

// content.js
console.log("Content script injected!");

// Example: Change background color
document.body.style.backgroundColor = "lightblue";

// Example: Add a button to the page
const newButton = document.createElement("button");
newButton.textContent = "Extension Button";
newButton.style.position = "fixed";
newButton.style.bottom = "10px";
newButton.style.right = "10px";
newButton.addEventListener("click", () => {
  alert("Button from extension clicked!");
});
document.body.appendChild(newButton);

Vigtige værktøjer til fejlsøgning

Ud over blot at vise fejl tilbyder DevTools effektive funktioner:

Breakpoints: Sæt kørsel på pause ved bestemte kodelinjer for at inspicere variable og gennemgå programmet trin for trin. Klik på linjenummeret på fanen "Sources" for at sætte et.
Console API: Brug console.log(), console.warn() og console.error() til hurtigt output. Brug også console.dir() til inspektion af objekter.
Fanen Network: Overvåg alle netværksanmodninger, som din udvidelse eller den webside, den interagerer med, foretager.
Fanen Elements: Inspicer og rediger HTML og CSS for dit pop op-vindue, din indstillingsside eller websiden (for content scripts).

Avancerede tips til fejlsøgning

Her er nogle flere tips til effektiv fejlsøgning:

Source Maps: Hvis du bruger et buildværktøj (f.eks. Webpack eller Rollup), skal du sikre dig, at der genereres source maps, så det bliver lettere at fejlsøge den oprindelige kildekode.
Sætningen debugger;: Tilføj debugger; direkte i din JavaScript-kode for programmatisk at udløse et breakpoint, når DevTools er åbne.
Bevar log: Aktivér "Preserve log" i indstillingerne for DevTools-konsollen for at forhindre, at konsollen ryddes ved navigation eller genstart af service workers.
Betingede breakpoints: Højreklik på et breakpoint for at tilføje betingelser, så kørsel kun sættes på pause, når et bestemt udtryk er sandt.

Quiz om fejlsøgning af komponenter

Du har lært, hvordan du får adgang til DevTools for forskellige dele af din udvidelse. Lad os teste din forståelse.

Besvar den i den interaktive lektion

Opsummering af fejlsøgning af udvidelser

Godt gået! Du har lært det grundlæggende i fejlsøgning af browserudvidelser.

Baggrundsservice workers fejlsøges via deres dedikerede "Inspect views"-link på chrome://extensions.
Pop op-vinduer og indstillingssider fejlsøges som almindelige websider: højreklik, og vælg "Inspect".
Content scripts fejlsøges ved at åbne DevTools for den webside, de er injiceret på.
Brug breakpoints, konsollogning og andre DevTools-funktioner til effektivt at finde og løse problemer i din udvidelse.

Det er afgørende at beherske disse teknikker for at kunne bygge robuste og fejlfri udvidelser!

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: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Fejlfinding af udvidelsens komponenter” gratis?

Ja — hele teksten til “Fejlfinding af udvidelsens komponenter” 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 browserudvidelser til Chrome og Edge-kurset, skal du opgradere til CoddyKit PRO. Udvikling af browserudvidelser til Chrome og Edge-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Fejlfinding af udvidelsens komponenter”?

Brug Chrome- og Edge-udviklerværktøjerne til effektivt at foretage fejlfinding af baggrundsservice workers, pop op-vinduer og content scripts. Du øver dig i Udvikling af browserudvidelser til Chrome og Edge 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 browserudvidelser til Chrome og Edge?

Der kræves ingen tidligere erfaring. Udvikling af browserudvidelser til Chrome og Edge 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 af udvidelsens komponenter”?

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 browserudvidelser til Chrome og Edge-lektion?

Ja. Alle Udvikling af browserudvidelser til Chrome og Edge-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

← Tilbage til Udvikling af browserudvidelser til Chrome og Edge