Nettstedet du leser består av blant annet kildekoden. Det er informasjonen din nettleser laster ned og oversetter til det du leser akkurat nå.
De fleste nettlesere gir muligheten til å se kildekoden til en nettside uten ekstra programvare som kreves, uansett hvilken type enhet du er på.
Noen tilbyr selv avansert funksjonalitet og struktur, noe som gjør det enklere å lese HTML og annen programmeringskode på siden.
Hvorfor vil du se kildekoden?
Det er flere grunner til at du kanskje vil se en kildes kildekode for en side. Hvis du er en webutvikler, vil du kanskje ta en titt under dekslene på en annen programmers spesielle stil eller implementering. Kanskje du er i kvalitetssikring, og prøver å finne ut hvorfor en bestemt del av en nettside gjengir eller oppfører seg som den er.
Du kan også være en nybegynner som prøver å lære å kode dine egne sider og leter etter noen virkelige eksempler. Selvfølgelig er det mulig at du ikke faller inn i noen av disse kategoriene og bare vil se kilden ut av ren nysgjerrighet.
Oppført nedenfor er instruksjoner om hvordan du viser kildekoden i din valgte nettleser.
Google Chrome
Kjører på: Chrome OS, Linux, MacOS, Windows
Den stasjonære versjonen av Chrome tilbyr tre forskjellige metoder for visning av en kildes kildekode, den første og enkleste ved å bruke følgende hurtigtast: CTRL + U (COMMAND + OPTION + U på macOS).
Når du trykker på, åpner denne snarveien en ny nettleserfane som viser HTML og annen kode for den aktive siden. Denne kilden er fargekodd og strukturert på en måte som gjør det enklere å komprimere og finne det du leter etter. Du kan også komme dit ved å skrive inn følgende tekst i Chrome adresselinje, vedlagt til venstre på websiden, og velg Tast inn nøkkel: se kilde: (dvs. se-kilde: https: //www.Go-Travels.com).
Den tredje metoden er via Chrome's utviklerverktøy, noe som gjør at du kan ta en dypere dykk inn i sidens kode, samt tilpasse det til test og utviklingsformål. Utviklerverktøyets grensesnitt kan åpnes og lukkes ved å bruke denne hurtigtast: CTRL + SHIFT + I (COMMAND + OPTION + I på macOS). Du kan også starte dem ved å ta følgende sti.
-
Velg Chrome hovedmeny-knapp, plassert øverst i høyre hjørne og representert av tre vertikalt rettede punkter.
-
Når rullegardinmenyen vises, holder du musemarkøren over Flere verktøy alternativ.
-
Når undermenyen vises, velger du Utviklerverktøy.
Android
Å se en webside kilde i Chrome for Android er så enkelt som å legge til følgende tekst på forsiden av adressen (eller nettadressen) og sende den inn: se kilde:. Et eksempel på dette ville være view-source: https: //www.Go-Travels.com . HTML og annen kode fra den aktuelle siden vil bli umiddelbart vist i det aktive vinduet.
iOS
Selv om det ikke finnes noen innfødte metoder for å vise kildekoden ved hjelp av Chrome på iPad, iPhone eller iPod touch, er det enkleste og mest effektive å bruke en tredjepartsløsning, for eksempel View Source-appen.
Tilgjengelig for $ 0,99 i App Store, spør Vis kilde deg om å skrive inn nettadressen til websiden (eller kopiere / lime den fra Chrome adresselinje, som noen ganger er den enkleste veien å ta), og det er det. I tillegg til å vise HTML og annen kildekode, har appen også faner som viser individuelle sideverdier, dokumentobjektmodellen (DOM), samt sidestørrelse, informasjonskapsler og andre interessante detaljer.
Microsoft Edge
Kjører på: Windows
Edge-nettleseren lar deg vise, analysere og til og med manipulere den nåværende sidens kildekode gjennom grensesnittet for utviklerverktøy. For å få tilgang til dette praktiske verktøysettet kan du bruke en av disse hurtigtastene: F12 eller CTRL + U. Hvis du foretrekker musen i stedet, klikker du på Edge-menyknappen (tre prikker plassert øverst i høyre hjørne) og velger F12 Utviklerverktøy alternativet fra listen.
Etter at dev-verktøyene kjøres for første gang, legger Edge to ekstra alternativer til nettleserens kontekstmeny (tilgjengelig ved å høyreklikke hvor som helst på en nettside): Inspisér element og Se kilde, den sistnevnte som åpner debugger del av dev verktøy grensesnitt befolket med kildekoden.
Mozilla Firefox
Kjører på: Linux, MacOS, Windows
Hvis du vil vise en kildes kildekode i en desktop versjon av Firefox, kan du trykke på CTRL + U (COMMAND + U på macOS) på tastaturet ditt, som åpner en ny fane som inneholder HTML og annen kode for den aktive nettsiden.
Hvis du skriver inn følgende tekst i adressefeltet til Firefox, direkte til venstre for sidens nettadresse, vil den samme kilden dukke opp i den aktuelle kategorien i stedet: se kilde: ( dvs. visnings-kilde: https: //www.dotdash.com ).
En annen måte å få tilgang til en side kildekode er gjennom Firefox utviklerverktøy, tilgjengelig ved å gjøre følgende trinn.
-
Velg hovedmenyknappen, plassert øverst i høyre hjørne av nettleservinduet og representert av tre horisontale linjer.
-
Når popup-menyen vises, klikker du på Utvikler "skiftenøkkel" ikon.
-
Webutviklerens kontekstmeny skal nå være synlig. Velg Sidekilde alternativ.
Firefox lar deg også se kildekoden for en bestemt del av en side, noe som gjør det enkelt å isolere problemer. For å gjøre det, må du først markere området du er interessert i med musen. Høyreklikk deretter og velg Se utvalgskilde fra nettleserens kontekstmeny.
Android
Visning av kildekode i Android-versjonen av Firefox kan oppnås ved å prefikse nettadressens nettadresse med følgende tekst: se kilde:. Hvis du for eksempel vil se HTML-kilden for Dotdash, kan du sende inn følgende tekst i nettleserens adressefelt: view-source: https: //www.dotdash.com .
iOS
Vår anbefalte metode for visning av kildekoden til nettsiden på iPad, iPhone eller iPod touch er gjennom View Source-appen, tilgjengelig i App Store for $ 0.99. Selv om det ikke er integrert direkte med Firefox, kan du enkelt kopiere og lime inn en nettadresse fra nettleseren til appen for å avdekke HTML og annen kode som er knyttet til den aktuelle siden.
Apple Safari
Kjører på iOS og macOS
iOS
Selv om Safari for iOS ikke inkluderer muligheten til å vise sidekilden som standard, integrerer nettleseren ganske sømløst med View Source-appen, som er tilgjengelig i App Store for $ 0.99.
Etter at du har installert denne tredjepartsappen, går du tilbake til Safari-nettleseren og trykker på Del-knappen, plassert nederst på skjermen og representert av en firkant og en pil opp. IOS-delarket skal nå være synlig, og legger over den nederste halvdelen av Safari-vinduet. Bla til høyre og velg Se kilde knapp.
En fargekodet, strukturert representasjon av den aktive sidens kildekode skal nå vises, sammen med andre faner som lar deg vise sidebestillinger, skript og mer.
Mac os
Hvis du vil vise kildekoden til en side i den desktopversjonen av Safari, må du først aktivere den Utvikle Meny. Trinnene nedenfor går gjennom aktivering av denne skjulte menyen og visning av en HTML-kilde for en side.
-
Å velge Safari i nettlesermenyen, plassert øverst på skjermen.
-
Når rullegardinmenyen vises, velger du Preferanser alternativ.
-
Safari-preferanser skal nå være synlige. Klikk på Avansert ikonet, plassert på høyre side av toppraden.
-
Mot bunnen av avanserte delen er et alternativ merket Vis Utvikle-menyen i menylinjen, ledsaget av en tom boks. Velg denne boksen en gang for å legge merke til i det, og lukk vinduet Innstillinger ved å klikke på den røde "x" som finnes i øvre venstre hjørne.
-
Velg Utvikle menyen, plassert øverst på skjermen.
-
Når rullegardinmenyen vises, velger du Vis sidekilde. Du kan også bruke følgende snarvei i snarvei: COMMAND + OPTION + U.
Opera
Kjører på: Linux, MacOS, Windows
Hvis du vil vise kildekoden fra den aktive websiden i Opera-nettleseren, bruker du følgende hurtigtast: CTRL + U (COMMAND + OPTION + U på macOS). Hvis du foretrekker å laste kilden i gjeldende fan i stedet, skriver du inn følgende tekst til venstre for sidens URL i adressefeltet og treffer Skriv inn: Vis-kilde: ( dvs. visningskilde: https: //www.Go-Travels.com ).
Den desktop-versjonen av Opera lar deg også se HTML-kilde, CSS og andre elementer ved hjelp av integrerte utviklerverktøy. Hvis du vil starte dette grensesnittet, som som standard vises på høyre side av hovedvinduet, trykker du på følgende tastatursnarvei: CTRL + SHIFT + I (COMMAND + OPTION + I på macOS).
Operas verktøysett er også tilgjengelig ved å ta følgende trinn.
-
Velg Opera-logoen, plassert øverst til venstre i nettleservinduet.
-
Når rullegardinmenyen vises, holder du musemarkøren over Flere verktøy alternativ.
-
Klikk på Vis utvikler-menyen.
-
Velg Opera-logoen igjen.
-
Når rullegardinmenyen vises, holder du markøren over Utvikler.
-
Når undermenyen vises, velger du Utviklerverktøy.
Vivaldi
Det er flere måter å vise sidekilden i Vivaldi-nettleseren. Den enkleste er via CTRL + U tastatursnarvei, som presenterer kode fra den aktive siden i en ny kategori.
Du kan også legge til følgende tekst til forsiden av sidens URL, som viser kildekoden i den nåværende kategorien: se kilde:. Et eksempel på dette ville være view-source: http: //www.dotdash.com .
En annen metode er gjennom nettleserens integrerte utviklerverktøy, tilgjengelig ved å trykke på CTRL + SHIFT + I kombinasjon eller gjennom Utviklerverktøy alternativ i nettleseren Verktøy meny - funnet ved å velge V logo i øvre venstre hjørne. Ved hjelp av dev-verktøyene kan en mye mer grundig analyse av sidens kilde.
