google-chrome-extension
Foutopsporing in Chrome-extensies

De ontwikkelaarstools gebruiken om uw extensie te debuggen

Een Chrome-extensie is verdeeld in maximaal 4 delen:

• de achtergrondpagina
• de pop-uppagina
• een of meer inhoudsscripts
• de optiepagina

Elk onderdeel, omdat ze van nature gescheiden zijn, vereisen individuele foutopsporing.

Houd er rekening mee dat deze pagina's gescheiden zijn, wat betekent dat variabelen niet rechtstreeks tussen hen worden gedeeld en dat een console.log() in een van deze pagina's niet zichtbaar is in de logboeken van een ander onderdeel.

Met behulp van de chrome devtools:

Chrome-extensies hebben dezelfde foutopsporing als andere webapps en webpagina's. Debuggen wordt meestal gedaan met het gebruik van Chrome's devtools-inspecteur, geopend met behulp van de sneltoets voor respectievelijk Windows en Mac: ctrl + shift + i en cmd + shift + i of door met de rechtermuisknop op de pagina te klikken en inspecteren te selecteren.

Vanuit de inspecteur kan een ontwikkelaar html-elementen controleren en hoe css deze beïnvloedt, of de console gebruiken om de waarden van JavaScript-variabelen te inspecteren en de uitgangen te lezen van elke console.log() s die de ontwikkelaar (s) heeft opgezet.

Meer informatie over het gebruik van de inspecteur is te vinden op Chrome Devtools .

Inspecteren van de pop-up, optiespagina en andere pagina's die toegankelijk zijn met chrome: //..... yourExtensionId.../:

De pop-uppagina en de optiepagina zijn elk eenvoudig toegankelijk door ze te inspecteren wanneer ze geopend zijn.

Extra HTML-pagina's die deel uitmaken van de extensie, maar die noch de pop-uppagina noch de optiepagina zijn, worden op dezelfde manier opgespoord.

De achtergrondpagina inspecteren:

Om toegang te krijgen tot uw achtergrondpagina, moet u eerst naar de Chrome-extensiepagina gaan op chrome: // extensions / . Zorg ervoor dat het vinkje 'Ontwikkelaarsmodus' is ingeschakeld.

Klik vervolgens op uw achtergrondscript naast "Weergaven inspecteren " om uw achtergrondpagina te inspecteren.

Inhoudsscripts inspecteren:

Inhoudsscripts worden uitgevoerd langs de websites waarin ze zijn ingevoegd. U kunt het inhoudsscript inspecteren door eerst de website te inspecteren waar het inhoudsscript is ingevoegd. In de console kunt u elke console.log() door uw extensie wordt uitgevoerd, maar u kunt de variabelen van het inhoudsscript niet wijzigen of inspecteren.

Om dit op te lossen, moet u op de vervolgkeuzelijst klikken die meestal op 'top' en uw extensie selecteren in de lijst met extensies.

Van daaruit heeft u toegang tot de variabelen binnen uw extensie.