Browserextensies ontwikkelen (Chrome en Edge) · Les

Extensiecomponenten debuggen

Gebruik Chrome- en Edge Developer Tools om achtergrondserviceworkers, pop-ups en contentscripts efficiënt te debuggen.

Les 1 van 412 stappen

Extensiecomponenten debuggen is een gratis Browserextensies ontwikkelen (Chrome en Edge)-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Browserextensies ontwikkelen (Chrome en Edge). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Welkom bij het debuggen van extensies

Debuggen is het proces van fouten in je code vinden en oplossen. Voor browserextensies is het belangrijk dat je begrijpt hoe je verschillende onderdelen debugt, zoals achtergrondscripts, pop-ups en contentscripts.

Omdat extensies in unieke omgevingen worden uitgevoerd, moeten de gebruikelijke technieken voor webdebugging iets worden aangepast. We bekijken hoe je de ontwikkelaarstools van Chrome en Edge effectief gebruikt.

DevTools voor extensies openen

Om je extensie te debuggen gebruik je voornamelijk de ontwikkelaarstools van de browser (DevTools). Hoe je deze opent, hangt af van het onderdeel van je extensie dat je wilt inspecteren.

Ga naar chrome://extensions (of edge://extensions).
Controleer of de "ontwikkelaarsmodus" is ingeschakeld.
Zoek je extensie en klik op "Weergaven inspecteren" voor achtergrondscripts of specifieke pop-ups.

Achtergrondscripts inspecteren

Achtergrondserviceworkers zijn gebeurtenisgestuurde scripts die op de achtergrond worden uitgevoerd. Ze hebben geen zichtbare gebruikersinterface, dus hun DevTools-exemplaar staat los hiervan.

Zoek op de pagina chrome://extensions onder je extensie de link "Weergaven inspecteren", specifiek voor "serviceworker" of "achtergrondpagina".
Als je op deze link klikt, wordt een speciaal DevTools-venster geopend waarin je consolelogboeken kunt bekijken, onderbrekingspunten kunt instellen en variabelen van je achtergrondscripts kunt inspecteren.

Praktijk: achtergrondscripts

Bekijk een eenvoudig achtergrondscripts in actie en leer hoe je het debugt. Dit script logt alleen een bericht wanneer de extensie wordt gestart.

Open na het laden van deze extensie de DevTools van de achtergrondserviceworker via chrome://extensions. In de console zie je "Achtergrondscripts geladen!" en andere berichten.

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

Pop-ups en opties inspecteren

Pop-ups en optiepagina's zijn in feite gewone HTML-pagina's met hun eigen JavaScript en CSS. Je debugt ze dus net als elke andere webpagina.

Voor een pop-up: klik met de rechtermuisknop ergens op de geopende pop-up en selecteer "Inspecteren" of "Element inspecteren".
Voor een optiepagina: open de optiepagina, meestal via de pagina voor extensiebeheer of een directe link, klik vervolgens met de rechtermuisknop en kies "Inspecteren".

Hiermee wordt een standaard DevTools-venster voor dat specifieke UI-onderdeel geopend.

Praktijk: pop-upinterface

Hier is de JavaScript voor een eenvoudige pop-up. Wanneer je de pop-up opent, wordt dit script uitgevoerd en wordt er een bericht gelogd. Je kunt de elementen van deze pop-up en de uitvoer in de console rechtstreeks inspecteren.

Ga als volgt te werk om fouten op te sporen: klik op het pictogram van je extensie om de pop-up te openen, klik vervolgens met de rechtermuisknop op de pop-up en kies "Inspecteren". Controleer de tabbladen Console en 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!');
    });
  }
});

Contentscripts inspecteren

Contentscripts worden uitgevoerd in de context van een webpagina. Dit betekent dat ze met de DOM van de pagina kunnen werken, maar ook dat hun DevTools aan de pagina zelf zijn gekoppeld.

Open de webpagina waarin je contentscript is geïnjecteerd.
Open de DevTools van de pagina (meestal met F12 of door met de rechtermuisknop te klikken en vervolgens "Inspecteren" te kiezen).
In het tabblad "Sources" vind je je contentscript vaak onder een speciale URL van het type chrome-extension:// of moz-extension://.

Houd er rekening mee dat contentscripts in een geïsoleerde omgeving worden uitgevoerd. Ze delen hun globale variabelen dus niet rechtstreeks met de eigen JavaScript van de pagina.

Praktisch: contentscript

Dit contentscript verandert de achtergrondkleur van de body en logt een bericht wanneer het in een webpagina wordt geïnjecteerd. Laad dit als onderdeel van een extensie die is ingesteld om op een specifieke site te worden uitgevoerd (bijvoorbeeld *://*/*).

Ga als volgt te werk om fouten op te sporen: navigeer naar een webpagina waarin je script is geïnjecteerd, open de DevTools van de pagina en controleer de Console. Je kunt het script ook vinden in het tabblad 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);

Essentiële hulpmiddelen voor foutopsporing

DevTools bieden meer dan alleen inzicht in fouten. Ze hebben krachtige functies:

Onderbrekingspunten: pauzeer de uitvoering op specifieke regels code om variabelen te inspecteren en stap voor stap door je programma te gaan. Klik op het regelnummer in het tabblad "Sources" om er een in te stellen.
Console-API: gebruik console.log(), console.warn() en console.error() voor snelle uitvoer. Gebruik ook console.dir() om objecten te inspecteren.
Tabblad Network: houd alle netwerkaanvragen bij die door je extensie of door de pagina waarmee deze werkt, worden uitgevoerd.
Tabblad Elements: inspecteer en wijzig de HTML en CSS van je pop-up, optiespagina of de webpagina (voor contentscripts).

Geavanceerde tips voor foutopsporing

Hier zijn nog enkele tips om efficiënt fouten op te sporen:

Bronkaarten: als je een bouwprogramma gebruikt (zoals Webpack of Rollup), zorg er dan voor dat bronkaarten worden gegenereerd. Zo kun je de oorspronkelijke broncode gemakkelijker debuggen.
De instructie debugger;: voeg debugger; rechtstreeks toe aan je JavaScript-code om programmatisch een onderbrekingspunt te activeren wanneer DevTools geopend zijn.
Log behouden: schakel in de console-instellingen van DevTools "Log behouden" in om te voorkomen dat de console wordt gewist tijdens navigatie of wanneer service workers opnieuw worden gestart.
Voorwaardelijke onderbrekingspunten: klik met de rechtermuisknop op een onderbrekingspunt om voorwaarden toe te voegen. Het programma pauzeert dan alleen wanneer een specifieke expressie waar is.

Quiz over onderdelen van foutopsporing

Je hebt geleerd hoe je toegang krijgt tot DevTools voor verschillende onderdelen van je extensie. Laten we je kennis testen.

Beantwoord dit in de interactieve les

Samenvatting: extensies debuggen

Goed gedaan! Je hebt de basisprincipes geleerd van het debuggen van browserextensies.

Op de achtergrond draaiende service workers debug je via hun speciale link "Inspect views" op chrome://extensions.
Pop-ups en optiespagina's debug je net als gewone webpagina's: klik met de rechtermuisknop en kies "Inspecteren".
Contentscripts debug je door de DevTools te openen voor de webpagina waarin ze zijn geïnjecteerd.
Gebruik onderbrekingspunten, logging in de console en andere functies van DevTools om problemen in je extensie efficiënt te vinden en op te lossen.

Het beheersen van deze technieken is essentieel voor het bouwen van robuuste en foutloze extensies!

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Extensiecomponenten debuggen” gratis?

Ja — de volledige tekst van “Extensiecomponenten debuggen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Browserextensies ontwikkelen (Chrome en Edge) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Browserextensies ontwikkelen (Chrome en Edge) bevat in totaal 4 lessen.

Wat leer ik in “Extensiecomponenten debuggen”?

Gebruik Chrome- en Edge Developer Tools om achtergrondserviceworkers, pop-ups en contentscripts efficiënt te debuggen. Je oefent met Browserextensies ontwikkelen (Chrome en Edge) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Browserextensies ontwikkelen (Chrome en Edge) te beginnen?

Ervaring vooraf is niet nodig. Browserextensies ontwikkelen (Chrome en Edge) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Extensiecomponenten debuggen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Browserextensies ontwikkelen (Chrome en Edge)?

Ja. Elke les over Browserextensies ontwikkelen (Chrome en Edge) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Browserextensies ontwikkelen (Chrome en Edge)