5 – Att felsöka en hemsida

I takt med att HTML och CSS-dokumenten växer behöver vi kunna felsöka dem mer. Om något inte fungerar på en liten sida kan man oftast efter lite testande hitta felet. I takt med att dokumentet ökar i komplexitet behöver vi ett robustare system.

Inbyggt i alla moderna webbläsare finns något som kallas för debugger eller utvecklingsverktyg. Jag använder oftast läsaren Google Chrome för jag tycker dess debugg-verktyg är kraftfullast. Exemplet utgår ifrån det.

När du surfar till din sida kan du högerklicka på ett element som är fel och välja Inspect. Nu kommer ett fönster upp där du kan se din HTML och din CSS.

Chrome debugger inspect
För att öppna debuggern i Chrome högerklickar du och väljer Inspect. På svenska heter det nog Granska.

De nya fönstret som dyker upp innehåller mängder med funktioner. Vi kommer börja med att titta på HTML och CSS-felsökningen men det finns även möjligheter att mäta vilka delar av hemsidan som är långsam eller snabb och felsöka flera sorters kod som t.ex. JavaScript.

I Chromes debugger ser du din HTML till vänster och din CSS till höger
I Chromes debugger ser du din HTML till vänster och din CSS till höger

På vänster sida ser du hela din HTML. Där kan du klicka runt mellan dina olika element. Varje gång du väljer ett element ser du all CSS som påverkar den till höger.

På höger sida kan du stänga av CSS-attributen för att se hur de påverkar sidan. Du gör det med den lilla kryssrutan. Du kan ändra värdet på ditt attribut genom att klicka på det och du kan till och med lägga till helt ny CSS.

Ändra CSS direkt i debuggern
Ändra CSS direkt i debuggern

Övningar & frågor

  • Öppna dina senaste HTML-dokument i debuggern. Titta och experimentera.
  • Stäng av och sätt igång olika CSS-deklarationer
  • Byt bakgrundsfärger
  • Byt typsnitt
  • Byt storlekar
  • Vad händer när du stänger webbläsaren? Sparas dina ändringar?
  • Vad händer när du laddar om hemsidan? Sparas dina ändringar?
  • Testa att öppna debuggern på valfri hemsida. Ett tipps är att välja en relativt enkel sida. Annars blir det väldigt mycket CSS :)