Feilsøke utvidelseskomponenter
Bruk utviklerverktøyene i Chrome og Edge til å feilsøke bakgrunnstjenestearbeidere, popup-vinduer og innholdsskript effektivt.
Feilsøke utvidelseskomponenter er en gratis leksjon i Utvikling av nettleserutvidelser (Chrome og Edge) 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 nettleserutvidelser (Chrome og Edge), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Velkommen til feilsøking av utvidelser
Feilsøking er prosessen med å finne og rette feil i koden. For nettleserutvidelser er det viktig å forstå hvordan De feilsøker ulike deler, som bakgrunnsskript, popup-vinduer og innholdsskript.
Siden utvidelser kjører i unike miljøer, må standardteknikkene for feilsøking av nettsider justeres noe. Vi skal se på hvordan De kan bruke Chrome- og Edge-utviklerverktøy effektivt.
Åpne utviklerverktøy for utvidelser
For å feilsøke utvidelsen bruker De først og fremst nettleserens utviklerverktøy (DevTools). Hvordan De åpner dem, avhenger av hvilken del av utvidelsen De vil undersøke.
- Gå til
chrome://extensions(elleredge://extensions). - Kontroller at «Developer mode» er aktivert.
- Finn utvidelsen, og klikk på «Inspect views» for bakgrunnsskript eller bestemte popup-vinduer.
Undersøke bakgrunnsskript
Bakgrunnstjenestearbeidere er hendelsesstyrte skript som kjører i bakgrunnen. De har ikke et synlig brukergrensesnitt, så DevTools-forekomsten deres er separat.
- På siden
chrome://extensionsfinner De koblingen «Inspect views» under utvidelsen, nærmere bestemt for «service worker» eller «background page». - Når De klikker på koblingen, åpnes et eget DevTools-vindu der De kan se konsolllogger, angi bruddpunkter og undersøke variabler for bakgrunnsskriptet.
Praktisk oppgave: Bakgrunnsskript
La oss se et enkelt bakgrunnsskript i praksis og hvordan De feilsøker det. Dette skriptet logger bare en melding når utvidelsen starter.
Når De har lastet inn utvidelsen, åpner De DevTools for bakgrunnstjenestearbeideren fra chrome://extensions. I konsollen ser De «Background script loaded!» og andre meldinger.
// 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øke popup-vinduer og alternativer
Popup-vinduer og alternatifsider er i praksis vanlige HTML-sider med sitt eget JavaScript og CSS. Det betyr at De feilsøker dem på samme måte som alle andre nettsider.
- For et popup-vindu: Høyreklikk hvor som helst i popup-vinduet når det er åpent, og velg «Inspect» eller «Inspect Element».
- For en alternatifsides: Åpne alternatifsiden, vanligvis fra siden for administrasjon av utvidelsen eller via en direkte lenke, og høyreklikk deretter og velg «Inspect».
Dette åpner et standard DevTools-vindu for den aktuelle brukergrensesnittkomponenten.
Praktisk oppgave: Popup-grensesnitt
Her er JavaScript-koden for en enkel popup. Når De åpner popupen, kjører dette skriptet og logger en melding. De kan inspisere elementene i popupen og konsollutdataene direkte.
Slik feilsøker De: Klikk på utvidelsesikonet for å åpne popupen, høyreklikk deretter på popupen og velg "Inspect". Se på fanene 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!');
});
}
});Inspisere innholdsskript
Innholdsskript kjører i konteksten til en nettside. Det betyr at de kan samhandle med sidens DOM, men også at DevTools er knyttet til selve siden.
- Åpne nettsiden der innholdsskriptet er injisert.
- Åpne sidens DevTools (vanligvis F12 eller høyreklikk -> "Inspect").
- I fanen "Sources" finner De ofte innholdsskriptet under en egen
chrome-extension://- ellermoz-extension://-URL.
Vær oppmerksom på at innholdsskript kjører i en isolert verden. Det betyr at de ikke deler globale variabler direkte med sidens egen JavaScript-kode.
Praktisk oppgave: Innholdsskript
Dette innholdsskriptet endrer bakgrunnsfargen til body-elementet og logger en melding når det injiseres i en nettside. Last det inn som en del av en utvidelse som er konfigurert til å kjøre på et bestemt nettsted (f.eks. *://*/*).
Slik feilsøker De: Gå til en nettside der skriptet er injisert, åpne sidens DevTools og se på Console. De finner også skriptet i 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);Viktige verktøy for feilsøking
DevTools tilbyr mer enn bare visning av feil og har flere kraftige funksjoner:
- Breakpoints: Sett kjøringen på pause ved bestemte kodelinjer for å inspisere variabler og gå gjennom programmet trinn for trinn. Klikk på linjenummeret i fanen "Sources" for å sette et stoppunkt.
- Console API: Bruk
console.log(),console.warn()ogconsole.error()for rask utskrift. Bruk ogsåconsole.dir()til å inspisere objekter. - Network Tab: Overvåk alle nettverksforespørsler som gjøres av utvidelsen eller siden den samhandler med.
- Elements Tab: Inspiser og endre HTML og CSS for popupen, alternativsiden eller nettsiden (for innholdsskript).
Avanserte tips for feilsøking
Her er noen flere tips for effektiv feilsøking:
- Source Maps: Hvis De bruker et byggeverktøy (for eksempel Webpack eller Rollup), bør De sørge for at det genereres source maps, slik at det blir enklere å feilsøke den opprinnelige kildekoden.
debugger;-setning: Legg inndebugger;direkte i JavaScript-koden for å utløse et stoppunkt programmatisk når DevTools er åpnet.- Preserve Log: Aktiver "Preserve log" i konsollinnstillingene i DevTools for å hindre at konsollen tømmes ved navigering eller omstart av service worker.
- Conditional Breakpoints: Høyreklikk på et stoppunkt for å legge til betingelser, slik at kjøringen bare settes på pause når et bestemt uttrykk er sant.
Quiz om feilsøking av komponenter
De har lært hvordan De får tilgang til DevTools for ulike deler av utvidelsen. La oss teste forståelsen Deres.
Oppsummering av feilsøking av utvidelser
Godt jobbet! De har lært det viktigste om feilsøking av nettleserutvidelser.
- Bakgrunnsbaserte service workers feilsøkes via den dedikerte lenken "Inspect views" på
chrome://extensions. - Popuper og alternativssider feilsøkes som vanlige nettsider: høyreklikk og velg "Inspect".
- Innholdsskript feilsøkes ved å åpne DevTools for nettsiden de er injisert i.
- Bruk stoppunkter, konsolllogging og andre DevTools-funksjoner for å finne og løse problemer i utvidelsen på en effektiv måte.
Det er viktig å beherske disse teknikkene for å kunne bygge robuste og feilfrie utvidelser!
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
- 48
Ofte stilte spørsmål
Er leksjonen «Feilsøke utvidelseskomponenter» gratis?
Ja – hele teksten i «Feilsøke utvidelseskomponenter» 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 nettleserutvidelser (Chrome og Edge)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av nettleserutvidelser (Chrome og Edge) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Feilsøke utvidelseskomponenter»?
Bruk utviklerverktøyene i Chrome og Edge til å feilsøke bakgrunnstjenestearbeidere, popup-vinduer og innholdsskript effektivt. Du øver på Utvikling av nettleserutvidelser (Chrome og Edge) 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 nettleserutvidelser (Chrome og Edge)?
Ingen tidligere erfaring er nødvendig. Utvikling av nettleserutvidelser (Chrome og Edge) 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 utvidelseskomponenter»?
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 nettleserutvidelser (Chrome og Edge)-leksjonen?
Ja. Alle Utvikling av nettleserutvidelser (Chrome og Edge)-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
- Feilsøke utvidelseskomponenter
- Skrive enhetstester for utvidelser
- Strategier for ytelsesoptimalisering
- Logging, feilrapportering og diagnostikk