Utveckling av webbläsartillägg (Chrome och Edge) · Lektion

Felsöka tilläggets komponenter

Använd Chrome- och Edge Developer Tools för att effektivt felsöka bakgrundstjänstarbetare, popupfönster och innehållsskript.

Lektion 1 av 412 steg

Felsöka tilläggets komponenter är en gratis lektion i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av webbläsartillägg (Chrome och Edge), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Välkommen till felsökning av tillägg

Felsökning är processen att hitta och åtgärda fel i koden. För webbläsartillägg är det viktigt att förstå hur olika delar, till exempel bakgrundsskript, popupfönster och content scripts, felsöks.

Eftersom tillägg körs i unika miljöer behöver standardmetoderna för webbfelsökning anpassas något. Vi ska undersöka hur ni effektivt använder Chrome och Edge Developer Tools.

Öppna DevTools för tillägg

För att felsöka tillägget använder ni främst webbläsarens Developer Tools (DevTools). Hur ni öppnar dem beror på vilken del av tillägget ni vill granska.

Gå till chrome://extensions (eller edge://extensions).
Kontrollera att ”Utvecklarläge” är aktiverat.
Hitta tillägget och klicka på ”Inspect views” för bakgrundsskript eller specifika popupfönster.

Granska bakgrundsskript

Bakgrundsservice workers är händelsestyrda skript som körs i bakgrunden. De har inget synligt användargränssnitt, så deras DevTools-instans är separat.

Leta efter länken ”Inspect views” på sidan chrome://extensions, under tillägget, specifikt för ”service worker” eller ”background page”.
När ni klickar på länken öppnas ett särskilt DevTools-fönster där ni kan se konsolloggar, ange brytpunkter och granska variabler för bakgrundsskriptet.

Praktiskt: bakgrundsskript

Nu ska vi se ett enkelt bakgrundsskript i praktiken och hur det felsöks. Skriptet loggar bara ett meddelande när tillägget startar.

När ni har läst in tillägget öppnar ni dess DevTools för bakgrundsservice workern från chrome://extensions. I konsolen ser ni ”Background script loaded!” och andra meddelanden.

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

Granska popupfönster och alternativ

Popupfönster och alternativsidor är i princip vanliga HTML-sidor med egen JavaScript och CSS. Därför felsöker ni dem på samma sätt som vilken annan webbsida som helst.

För ett popupfönster: Högerklicka var som helst i popupfönstret när det är öppet och välj ”Inspect” eller ”Inspect Element”.
För en alternativsida: Öppna alternativsidan, vanligtvis från sidan för tilläggshantering eller via en direktlänk, högerklicka sedan och välj ”Inspect”.

Detta öppnar ett vanligt DevTools-fönster för den aktuella UI-komponenten.

Praktiskt: popupgränssnitt

Här är JavaScript-koden för ett enkelt popupfönster. När du öppnar popupfönstret körs detta skript och loggar ett meddelande. Du kan inspektera popupfönstrets element och konsolutdata direkt.

Så här felsöker du: Klicka på tilläggsikonen för att öppna popupfönstret, högerklicka sedan på popupfönstret och välj "Inspect". Kontrollera flikarna Console och 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!');
    });
  }
});

Inspektera innehållsskript

Innehållsskript körs i kontexten av en webbsida. Det innebär att de kan interagera med sidans DOM, men också att deras DevTools är kopplade till själva sidan.

Öppna webbsidan där ditt innehållsskript har injicerats.
Öppna sidans DevTools (vanligtvis F12 eller högerklicka -> "Inspect").
I fliken "Sources" hittar du ofta ditt innehållsskript under en särskild chrome-extension://- eller moz-extension://-URL.

Observera att innehållsskript körs i en isolerad värld, vilket innebär att de inte delar globala variabler direkt med sidans egen JavaScript-kod.

Praktisk övning: innehållsskript

Detta innehållsskript ändrar body-elementets bakgrundsfärg och loggar ett meddelande när det injiceras i en webbsida. Läs in detta som en del av ett tillägg som har konfigurerats för att köras på en specifik webbplats (t.ex. *://*/*).

Så här felsöker du: Gå till en webbsida där ditt skript har injicerats, öppna sidans DevTools och kontrollera Console. Du hittar också skriptet i fliken 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);

Viktiga felsökningsverktyg

DevTools erbjuder mer än att bara visa fel och innehåller flera kraftfulla funktioner:

Breakpoints: Pausa körningen på specifika kodrader för att inspektera variabler och stega igenom programmet. Klicka på radnumret i fliken "Sources" för att ange en.
Console API: Använd console.log(), console.warn() och console.error() för snabb utskrift. Använd även console.dir() för att inspektera objekt.
Network Tab: Övervaka alla nätverksförfrågningar som görs av tillägget eller sidan som det interagerar med.
Elements Tab: Inspektera och ändra HTML och CSS i popupfönstret, på inställningssidan eller på webbsidan (för innehållsskript).

Avancerade felsökningstips

Här är några fler tips för effektiv felsökning:

Source Maps: Om du använder ett byggverktyg (som Webpack eller Rollup) bör du se till att källkartor genereras, så att det blir enklare att felsöka den ursprungliga källkoden.
debugger;-sats: Lägg till debugger; direkt i JavaScript-koden för att programmatiskt utlösa en brytpunkt när DevTools är öppna.
Preserve Log: Aktivera "Preserve log" i DevTools konsolinställningar för att förhindra att konsolen rensas vid navigering eller omstarter av service workers.
Conditional Breakpoints: Högerklicka på en brytpunkt för att lägga till villkor, så att körningen endast pausas när ett visst uttryck är sant.

Frågesport om felsökningskomponenter

Du har lärt dig hur du öppnar DevTools för olika delar av ditt tillägg. Nu testar vi dina kunskaper.

Besvara frågan i den interaktiva lektionen

Sammanfattning av felsökning av tillägg

Bra jobbat! Du har lärt dig grunderna i felsökning av webbläsartillägg.

Bakgrundsservice workers felsöks via den särskilda länken "Inspect views" på chrome://extensions.
Popupfönster och inställningssidor felsöks som vanliga webbsidor: högerklicka och välj "Inspect".
Innehållsskript felsöks genom att öppna DevTools för webbsidan där de har injicerats.
Använd brytpunkter, konsolloggning och andra DevTools-funktioner för att effektivt hitta och åtgärda problem i tillägget.

Att behärska dessa tekniker är viktigt för att kunna bygga robusta och felfria tillägg!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Felsöka tilläggets komponenter” gratis?

Ja – hela texten till ”Felsöka tilläggets komponenter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av webbläsartillägg (Chrome och Edge), kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av webbläsartillägg (Chrome och Edge) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Felsöka tilläggets komponenter”?

Använd Chrome- och Edge Developer Tools för att effektivt felsöka bakgrundstjänstarbetare, popupfönster och innehållsskript. Ni övar på Utveckling av webbläsartillägg (Chrome och Edge) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av webbläsartillägg (Chrome och Edge)?

Du behöver inga förkunskaper. Utbildningen i Utveckling av webbläsartillägg (Chrome och Edge) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Felsöka tilläggets komponenter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av webbläsartillägg (Chrome och Edge)-lektionen?

Ja. Varje Utveckling av webbläsartillägg (Chrome och Edge)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Felsöka tilläggets komponenter
Skriva enhetstester för tillägg
Strategier för prestandaoptimering
Loggning, felrapportering och diagnostik

← Tillbaka till Utveckling av webbläsartillägg (Chrome och Edge)