Källkoden för en webbsida
Det finns två olika sätt att se på källkoden till en webbsida. Dels hämtas källkoden till webbsidan från en webbserver (eller liknande). Detta är källkoden till den html-fil som bygger upp din webbsida.
Webbläsaren tar emot källkoden och börjar läsa igenom den för att se om det är fler resurser som behöver laddas för att visa sidan. Dessa resurser kan till exempel vara bilder, stylesheet och javascript.
När samtliga resurser är hämtade så kommer webbläsaren att “parsa” källkoden, gå igenom källkoden och tolka den. Även om delar i webbsidans källkod är fel så kommer webbläsaren att försöka tolka den. När all kod är tolkad så “renderas” webbsidan av webbläsaren och visas upp med alla dess delar.
Som utvecklare kan det vara bra att veta hur vi kan se webbsidans källkod, dels den ursprungliga källkoden och dels den parsade och tolkade källkoden. Låt oss därför titta på följande delar i hur en webbsida laddas hem, parsas och renderas.
Vilka delar laddas av webbläsaren
En webbsida startar när man anger en länk, en url, i webbläsarens adressfält. Denna url pekar på en specifik resurs någonstans på nätet.
En url består av ett protokoll, en domänadress och en sökväg till en resurs. Det kan finnas fler delar i en url, men dessa är de vanligaste.
När en url hämtas så kan det innebära att flera requester sker för att hämta fler resurser så att webbsidan blir komplett. Man kan se alla resurser som hämtas genom att öppna devtools och titta på filken “Networks”.
Du hittar devtools antingen via F12 eller genom att högerklicka med musen och välja “Inspect”.
Cachning av sidans resurser
I devtools networks kan du se statuskoden för varje resurs. En statuskod “200 Success” säger att resursen hittades och laddades.
Ibland kan du se statuskoden “304 Not modified” vilket betyder att resursen inte har ändrats och ibland ser du även att webbläsaren valt att cacha en viss resurs.
När du normalt sett laddar om en sida med ctrl-r (Windows, Linux) eller cmd r (Mac) så effektiviserar webbläsaren requesten genom att cacha delar av webbsidan.
Ibland vill man dock forcera att alla delar av sidan laddas om, även de som är cachade, och det gör man via shift ctrl r (Windows, Linux) eller shift cmd r (Mac). Då laddas sidan om inklusive alla cachade resurser.
Detta verktyg kan vara bra vid felsökning när du vill se vilka resurser som laddas till sidan.
HTTP-protokollet
När vi hämtar en webbsida används HTTP-protokollet av webbläsaren för att kommunicera med webbservern. HTTP-protokollet består av en request och ett respons. En request/response-cykel har normalt sett inget minne utan måste innehålla allt som behövs för att requesten skall kunna hanteras.
Varje request och varje respons består av en header och en body. Dessa kan vi analysera i devtools networks genom att klicka på den resurs vi vill studera i detalj.
När man bygger mer avancerade tjänster och applikationer så kan det vara viktigt att säkerställa att rätt detaljer finns med i request och respons.
Det finns andra protokoll som en webbläsare förstår, men normalt använder vi http i inledningen av urlen för att säga vilket protokoll vi använder. Numer används i princip enbart varianten https som är en krypterad form av protokollet.
Högerklicka och visa källkod
När webbläsaren hämtar webbsidan från webbservern så levereras den som källkod, den kod som skall användas av webbläsaren för att rendera och visa själva webbsidan.
Vi kan hitta källkoden till webbsidan genom att högerklicka på musen i webbläsarens fönster och välja menyvalet “View Page Source”, eller “Visa källkod”.
Du får då upp en sida som visar källkoden för sidan.
I detta fallet är källkoden som ligger i filen me.html exakt samma som webbläsaren ser.
Denna resurs kan vara viktig att använda när du felsöker din webbsida. Du öppnar källkoden för en webbsida genom att högerklicka med musen och välja “Visa källkod” eller “View page source”.
Developer tools och inspect
När webbläsaren hämtar webbsidan från webbservern så kommer den som källkod. Därefter tar webbläsaren och “parsar” (läser igenom) källkoden och renderar webbsidan för att slutligen visa upp den.
Vid renderingen kan källkoden till sidan ibland modifieras av webbläsaren. Detta händer till exempel om källkoden inte stämmer överens med givna riktlinjer och standarder. Vi kan säga att webbläsaren “patchar” (försöker laga) källkoden så att den fungerar.
Den patchade varianten av källkod kan man se via devtools.
Vi har alltså följande steg för att visa upp en webbsida.
- Källkoden som ligger i filen
me.htmlpå webbservern. - Källkoden som webbläsaren hämtar från webbservern, den data som skickas över nätet från webbservern till webbläsaren. Se den genom att “högerklicka och visa källkod”.
- Den parsade och eventuellt patchade källkoden. Se den via “inspect” och “devtools”.
Läs mer
Följande resurser finns om du vill läsa mer detaljer.