Developer tools flik Elements
Devtools innehåller flera utvecklingsverktyg så du kan felsöka och redigera både html och css i webbläsaren.
Om du nu öppnar upp developer tools och väljer fliken “Elements” så kan du se HTML-koden för den renderade sidan. Du kan också klicka på olika delar av HTML-koden och se vilken CSS-kod som ligger bakom. Du kan även uppdatera CSS-konstruktionerna för att testa dig fram med olika konstruktioner och du kan lägga till eller avaktivera andra konstruktioner. Detta är ett bra sätt att utveckla och debugga sin webbsida, man kan se hur CSS-konstruktioner påverka elementet och sin omgivning. När du laddar om sidan så försvinner dina temporära ändringar.
Prova gärna att aktivera, avvaktivera och modifiera olika konstruktioner för att lära dig mer om hur CSS påverkar webbsidans utseende.