Hvordan ser du HTML-kilden til en side?

Å se HTML-koden bak en nettside er enklere enn mange tror, og du trenger ingen spesialprogrammer for å gjøre det. Alle moderne nettlesere har en innebygd funksjon som viser deg nøyaktig hvilken kode siden er bygd opp av. Dette er en gullgruve hvis du vil lære deg webutvikling, feilsøke din egen side eller rett og slett er nysgjerrig på hvordan andre har løst ting. I denne guiden går vi gjennom hvordan du gjør det steg for steg i de vanligste nettleserne, forskjellen på «vis kildekode» og «inspiser», hvordan det fungerer på mobil, og hva du faktisk har lov til å gjøre med det du finner.

Hva betyr det å se kildekoden til en side?

Kildekoden er selve oppskriften nettleseren bruker for å bygge opp en side. Når du besøker en nettadresse, sender serveren en tekstfil skrevet i HTML (HyperText Markup Language) tilbake til nettleseren din. Denne filen inneholder all tekst, lenker, overskrifter og referanser til bilder, stilark og skript. Nettleseren leser denne koden og «tegner opp» den pene siden du ser på skjermen.

Når du velger «Vis sidekilde», får du se denne råteksten slik den kom fra serveren. Du ser HTML-elementer pakket inn i vinkelparenteser, for eksempel <p> for et avsnitt eller <a> for en lenke. I tillegg finner du ofte referanser til CSS-filer, som styrer utseendet, og JavaScript-filer, som styrer funksjonalitet. Vil du forstå hvordan utseendet henger sammen med koden, kan det være nyttig å først lese hva CSS er.

Forskjellen på «Vis kildekode» og «Inspiser»

Dette er den viktigste forskjellen å forstå i dag, og den forvirrer svært mange nybegynnere. De to funksjonene viser nemlig ikke alltid det samme.

• Vis sidekilde (View Page Source): Viser den opprinnelige HTML-koden slik serveren sendte den, før nettleseren har gjort noe med den. Dette er en statisk tekst du ikke kan endre.
• Inspiser / Utviklerverktøy (Inspect / DevTools): Viser den levende versjonen av siden – den såkalte DOM-en (Document Object Model) – slik den ser ut akkurat nå, etter at JavaScript har kjørt og eventuelt lagt til, fjernet eller endret innhold.

På moderne, JavaScript-tunge sider kan disse to være svært forskjellige. Mange nettbutikker og sosiale medier laster for eksempel inn produkter eller innlegg etter at siden er åpnet. Ser du på «Vis sidekilde», finner du kanskje nesten ingenting av innholdet – bare en tom ramme og noen skript. Åpner du «Inspiser», ser du derimot alt, fordi du da kikker på det ferdig sammensatte resultatet. Når du vil lese det du faktisk ser på skjermen, er «Inspiser» som regel riktig verktøy.

Slik ser du kildekoden i de vanligste nettleserne

Fremgangsmåten er nesten lik overalt: høyreklikk et tomt sted på siden og velg menyvalget, eller bruk en hurtigtast. Her er detaljene for hver nettleser. Vet du ikke hvilken du bør bruke, har vi en egen sammenligning av hvilken nettleser som er best.

Google Chrome

Høyreklikk et tomt område på siden og velg «Vis sidekilde» (View page source). Du kan også trykke Ctrl + U på Windows og Linux, eller Cmd + Alt + U på Mac. Kildekoden åpnes i en ny fane. For å åpne utviklerverktøyene i stedet, trykker du F12 eller Ctrl + Shift + I, eller høyreklikker og velger «Inspiser».

Mozilla Firefox

Høyreklikk på siden og velg «Vis sidekilde», eller trykk Ctrl + U (Windows/Linux) og Cmd + U (Mac). Firefox har en ryddig kildekodevisning med fargekoding og linjenummer. Utviklerverktøyene åpnes med F12, og Firefox har også en egen «Inspektør» for å utforske elementer.

Microsoft Edge

Edge fungerer som Chrome fordi begge er bygd på Chromium-motoren. Høyreklikk og velg «Vis kilde», eller trykk Ctrl + U. Legg merke til at den gamle Internet Explorer ble pensjonert av Microsoft 15. juni 2022 og erstattet av Edge. Bruker du fortsatt gamle instruksjoner som nevner Internet Explorer, er de utdaterte – Edge er den riktige nettleseren i dag.

Safari (Mac)

I Safari er funksjonen skjult til du slår den på. Gå til Safari > Innstillinger > Avansert og huk av for «Vis Utvikle-menyen i menylinjen». Deretter kan du velge Utvikle > Vis sidekilde, høyreklikke og velge «Vis sidekilde», eller trykke Cmd + Alt + U. Safari på iPhone og iPad har ikke den samme muligheten – mer om det lenger ned.

Opera og Brave

Også disse er bygd på Chromium og oppfører seg som Chrome. Høyreklikk og velg «Vis sidekilde», eller bruk Ctrl + U (Windows/Linux) og Cmd + Alt + U (Mac).

Tre måter å åpne kildekoden på

Uansett nettleser har du som regel tre veier til målet. Det kan være greit å kjenne alle tre, fordi den ene noen ganger passer bedre enn de andre.

1. Høyreklikk-menyen: Den enkleste metoden. Høyreklikk et sted på siden der det ikke ligger et bilde eller en lenke, og velg «Vis sidekilde».
2. Hurtigtast: Raskest når du gjør det ofte. Ctrl + U (eller Cmd-varianten på Mac) åpner koden direkte.
3. view-source: i adressefeltet: Skriv view-source: rett foran nettadressen, for eksempel view-source:https://dittnettsted.com, og trykk Enter. Dette fungerer i Chrome, Firefox, Edge og Opera, og er nyttig når høyreklikk er deaktivert på siden.

Verdt å vite: noen nettsteder prøver å blokkere høyreklikk for å gjøre det vanskeligere å kopiere innhold. Det stopper deg sjelden helt – både hurtigtasten og view-source-trikset virker vanligvis likevel. Vil du selv slå av høyreklikk på egne bilder, har vi en guide for å deaktivere høyreklikk-menyen i WordPress.

Slik bruker du utviklerverktøyene (DevTools)

Utviklerverktøyene, ofte kalt DevTools eller «Inspiser», er mye kraftigere enn en enkel kildekodevisning. Her kan du ikke bare lese koden, men også se hvordan CSS-reglene henger sammen med hvert enkelt element, teste endringer live og finne feil.

Åpne dem med F12, Ctrl + Shift + I (Windows/Linux) eller Cmd + Alt + I (Mac), eller ved å høyreklikke på et element og velge «Inspiser». De mest nyttige fanene for nybegynnere er:

• Elements / Inspektør: Viser DOM-en. Klikker du på et element, markeres det på siden, og du ser hvilke CSS-regler som gjelder.
• Console: Viser feilmeldinger og lar deg kjøre JavaScript. Et godt sted å begynne feilsøking hvis noe ikke virker.
• Network / Nettverk: Viser alle filer siden laster inn, og hvor lang tid de bruker – nyttig for å forstå hvorfor en side er treg.

Endringene du gjør i utviklerverktøyene er midlertidige og påvirker bare din egen skjerm. Oppdaterer du siden, er alt tilbake slik det var. Det gjør DevTools til en trygg lekegrind for å eksperimentere. Vil du gå videre og redigere kode på ordentlig, finnes det mange gratis HTML- og CSS-editorer å velge mellom.

Kan du se kildekoden på mobil?

På mobil er det mer tungvint, og mulighetene er begrenset. Her er situasjonen i korte trekk.

• iPhone og iPad (Safari): Safari på iOS har ingen innebygd «Vis sidekilde». Den enkleste løsningen er å koble telefonen til en Mac og bruke Safaris utviklerverktøy på datamaskinen, eller å installere en egen app fra App Store som viser kildekode.
• Android (Chrome): Det gamle view-source:-trikset i adressefeltet fungerer ikke like pålitelig som før. Den beste metoden er å koble telefonen til en PC med USB og bruke «Remote debugging» i Chrome DevTools på datamaskinen.

For de aller fleste er det altså enklest å se på siden fra en vanlig datamaskin når du vil studere koden grundig. Mobilløsningene er mest aktuelle når du feilsøker hvordan en side faktisk oppfører seg på en liten skjerm.

Hva kan du lære av å lese andres kode?

Å kikke på kildekoden til sider du liker, er en av de beste gratis måtene å lære webutvikling på. Når du forstår grunnleggende HTML, kan du blant annet finne ut av:

• Struktur: Hvordan sider deles inn i seksjoner, overskrifter og navigasjon.
• Lenker og knapper: Hvordan en <a>-tag settes sammen. Vil du lære dette fra bunnen, har vi en egen guide til hvordan du lager en HTML-lenke.
• Metadata: Hvilken tittel, beskrivelse og hvilke SEO-tagger som ligger i <head>-delen av siden.
• Teknologier: Hvilke rammeverk, skript eller sporingsverktøy en side bruker.

Jo flere vanlige HTML-tagger du kjenner, desto mer gir koden mening. Et godt tips er å sammenligne en enkel side med en avansert og se hvordan kompleksiteten øker.

Er det lov å se og kopiere andres HTML?

Det er fullt lovlig å se kildekoden til enhver offentlig nettside – koden sendes jo til nettleseren din for at siden skal kunne vises. Ingen «eier» selve HTML-språket, og å studere hvordan andre har bygget opp en side regnes som helt greit og har vært en læringsmåte siden webens tidlige dager.

Det du derimot bør være forsiktig med, er å kopiere større deler direkte. Tekst, bilder, logoer og egendesignede grafiske løsninger er som regel beskyttet av opphavsrett, selv om koden er synlig. Å la seg inspirere av en løsning og bygge sin egen versjon er greit; å kopiere et helt design, en ferdig mal eller andres innhold ord for ord er det ikke. En fornuftig regel er: lær av teknikken, men lag ditt eget uttrykk.

Vanlige feil og misforståelser

Selv om funksjonen er enkel, er det noen fallgruver som ofte skaper forvirring:

• Du finner ikke innholdet i kildekoden: På sider som laster inn innhold med JavaScript, ligger ikke teksten i «Vis sidekilde». Bruk «Inspiser» i stedet for å se det ferdige resultatet.
• Du tror du ser CSS og JavaScript i HTML-en: Ofte er stil og skript lagt i egne filer som bare lenkes til fra HTML-en. Du må klikke på disse lenkene for å se selve innholdet.
• Du endrer noe i DevTools og tror det er lagret: Endringer i utviklerverktøyene er midlertidige og forsvinner ved oppdatering. Du endrer aldri den ekte siden hos andre.
• Du leter etter funksjonen på mobil: Som nevnt er dette tungvint på telefon – bruk en datamaskin når du kan.
• Du stoler blindt på det du ser: Vil du vite om koden faktisk er korrekt skrevet, bør du validere koden på hjemmesiden med et offisielt valideringsverktøy.

Med disse forholdene i bakhodet unngår du de vanligste misforståelsene og får mye mer ut av både kildekodevisningen og utviklerverktøyene.

Hvorfor ser koden ofte rotete og uleselig ut?

Første gang mange åpner kildekoden til en stor nettside, blir de møtt av én lang, sammenpresset tekstvegg uten linjeskift. Det er helt normalt og betyr ikke at siden er dårlig laget. Tvert imot er koden som regel «minifisert» med vilje: alle unødvendige mellomrom, linjeskift og kommentarer er fjernet for at filen skal bli så liten som mulig og lastes raskere. Det samme gjøres ofte med CSS- og JavaScript-filer.

For å gjøre koden lesbar igjen har du et par muligheter. I utviklerverktøyene finnes det som regel en «Pretty print»-knapp (ofte markert med «{ }») som formaterer koden pent med innrykk. I tillegg lar både Chrome, Firefox og Edge deg kopiere koden og lime den inn i en editor som rydder opp i formateringen. Husk også at variabel- og klassenavn på moderne sider ofte er automatisk genererte og korte, nettopp fordi koden er bygd og komprimert av et verktøy før den publiseres. Det gjør at produksjonskode nesten alltid ser mer kryptisk ut enn de ryddige eksemplene du finner i lærebøker og nybegynnerguider.

Vanlige spørsmål (FAQ)

Hvordan åpner jeg kildekoden raskest?

Den raskeste metoden i de fleste nettlesere er hurtigtasten Ctrl + U på Windows og Linux, eller Cmd + Alt + U på Mac (Cmd + U i Firefox). Koden åpnes da i en ny fane uten at du trenger å gå via noen meny.

Hva er forskjellen på «Vis sidekilde» og «Inspiser»?

«Vis sidekilde» viser den opprinnelige HTML-koden slik serveren sendte den, mens «Inspiser» viser den levende siden etter at JavaScript har kjørt. På moderne sider kan de to se svært forskjellige ut, og «Inspiser» viser oftest det du faktisk ser på skjermen.

Kan jeg se kildekoden på mobiltelefonen?

Det er mulig, men tungvint. iOS Safari har ingen innebygd funksjon, og Android Chrome støtter ikke lenger view-source:-trikset pålitelig. Den beste løsningen er å koble telefonen til en datamaskin og bruke nettleserens utviklerverktøy der.

Er det lov å se andres HTML-kode?

Ja, det er helt lovlig å se kildekoden til offentlige nettsider, siden koden uansett sendes til nettleseren din. Du bør likevel ikke kopiere tekst, bilder eller ferdige design direkte, fordi slikt innhold ofte er beskyttet av opphavsrett.

Hvorfor ser jeg nesten ingen tekst i kildekoden?

Det skyldes som regel at siden henter innholdet inn med JavaScript etter at den er lastet. Den opprinnelige HTML-en inneholder da bare en ramme, mens selve teksten dukker opp i den levende DOM-en. Bruk «Inspiser» for å se alt innholdet.