google-chrome-extension
Felsökning av Chrome-tillägg

Använd utvecklarverktygen för att felsöka ditt tillägg

En kromförlängning är uppdelad i maximalt fyra delar:

• bakgrundssidan
• popup-sidan
• ett eller flera innehållsskript
• sidan med alternativ

Varje del, eftersom de är inneboende separata, kräver individuell felsökning.

Kom ihåg att dessa sidor är separata, vilket innebär att variabler inte delas direkt mellan dem och att en console.log() på en av dessa sidor inte kommer att synas i någon annan parts loggar.

Använda kromutrustning:

Chrome-tillägg felsöks på samma sätt som andra webbappar och webbsidor. Felsökning görs ofta med användning av chroms devtools-inspektör som öppnats med hjälp av kortkommandot för Windows respektive Mac: ctrl + shift + i och cmd + shift + i eller genom att högerklicka på sidan och välja inspektera.

Från inspektören kan en utvecklare kontrollera html-element och hur css påverkar dem, eller använda konsolen för att inspektera värdena på javascriptvariabler och läsa utgångarna från alla console.log() utvecklarna har installerat.

Mer information om inspektörens användning finns på Chrome Devtools .

Kontrollera popup, alternativsidan och andra sidor som är tillgängliga med chrome: //.....yourExtensionId..//:

Pop-up-sidan och alternativsidan kan nås genom att helt enkelt inspektera dem när de är öppna.

Ytterligare html-sidor som ingår i tillägget, men varken är popup- eller alternativsidan felsöks också på samma sätt.

Inspektera bakgrundsidan:

För att komma åt din bakgrundsida måste du först navigera till Chrome-förlängningssidan på chrome: // extensions / . Se till att bocken för utvecklarläge är aktiverad.

Klicka sedan på ditt bakgrundsskript bredvid "Inspektera vyer" för att inspektera din bakgrundsida.

Inspekterar innehållsskript:

Innehållsskript körs på sidan av webbplatserna de sattes in på. Du kan inspektera innehållsskriptet genom att först inspektera webbplatsen där innehållsskriptet är infogat. I konsolen kan du se alla console.log() matas ut av ditt tillägg, men du kommer inte att kunna ändra eller inspektera innehållsskriptets variabler.

För att fixa detta måste du klicka på rullgardinsmenyn som vanligtvis är inställd på 'top' och välja ditt tillägg från listan med tillägg.

Därifrån har du tillgång till variablerna i din anknytning.