Uansett om du jobber som webdesigner og trenger å feilsøke et nettsteds kode, eller om du bare er nysgjerrig på hvordan koden bak en nettside ser ut, kan du enkelt se HTML-kilden direkte i Google Chrome. Det finnes to metoder for å gjøre dette: ved å bruke «Vis kilde» eller «Inspiser» via utviklerverktøy.
Se kilden med «Vis sidekilde»
Start nettleseren Chrome og naviger til den nettsiden du vil granske kildekoden for. Høyreklikk hvor som helst på siden og velg «Vis sidekilde», eller trykk Ctrl + U for å åpne kildekoden i en ny fane.
En ny fane vil åpne seg og vise deg all HTML-koden for den aktuelle nettsiden, fullt utfoldet og uten formatering.
Dersom du er på jakt etter et spesifikt element eller en bestemt del av HTML-koden, kan det være tungvint og tidkrevende å benytte «Vis kilde», særlig hvis siden bruker store mengder JavaScript og CSS.
Utforsk koden ved hjelp av utviklerverktøy
Denne metoden bruker utviklerverktøypanelet i Chrome og gir en mye mer oversiktlig måte å undersøke kildekoden på. HTML-koden er enklere å lese her, takket være bedre formatering og muligheten til å skjule elementer du ikke er interessert i.
Åpne Chrome og gå til den siden du ønsker å undersøke. Trykk deretter Ctrl + Shift + i. Et panel vil da åpne seg ved siden av nettsiden du ser på.
Klikk på den lille grå pilen ved siden av et element for å folde det ut og se innholdet i detalj.
Hvis du ikke ønsker å se hele sidens kode umiddelbart, men heller vil inspisere et bestemt element, kan du høyreklikke på det aktuelle elementet på siden og velge «Inspiser».
Når panelet åpner seg denne gangen, vil det umiddelbart hoppe til den delen av koden som inneholder det elementet du klikket på.
Dersom du ønsker å endre plasseringen av panelet, kan du flytte det til bunnen, venstre eller høyre side, eller du kan åpne det som et eget vindu. Klikk på menyikonet (tre prikker), og velg deretter enten å løsne panelet til et eget vindu, dokke det til venstre, til bunnen eller til høyre.
Det er alt som skal til. Når du er ferdig med å undersøke koden, lukker du enten fanen med kildekoden eller klikker på «X» i utviklerverktøypanelet for å gå tilbake til nettsiden.