Hoved Chrome Slik viser du HTML-kilden i Google Chrome

Slik viser du HTML-kilden i Google Chrome



Hva du bør vite

  • Høyreklikk på nettsiden og velg Vis sidekilde .
  • Snarvei: Trykk Ctrl + I (Windows PC) eller Kommando + Alternativ + I (Mac).
  • For å bruke Chromes utviklerverktøy, velg Meny (tre prikker) > Flere verktøy > Utviklerverktøy .

Denne artikkelen forklarer hvordan du får tilgang til et nettsteds HTML-kildekode i Google Chrome-nettleseren, samt hvordan du får tilgang til og bruker Chromes utviklerverktøy. Å vise et nettsteds kildekode er en utmerket måte for nybegynnere å lære HTML.

Se kildekoden i Chrome

Så hvordan ser du på kildekoden til et nettsted? Her er trinnvise instruksjoner for å gjøre det ved å bruke Google Chrome-nettleseren.

  1. Åpne Google Chrome nettleser (hvis du ikke har Google Chrome installert , dette er en gratis nedlasting).

  2. Naviger til nettsiden du ønsker å undersøke .

  3. Høyreklikk siden og se på menyen som vises. Fra den menyen klikker du Vis sidekilde .

    Se sidekilde i kontekstmenyen for Chrome-nettleseren
  4. Kildekoden for den siden vil nå vises som en ny fane i nettleseren.

  5. Alternativt kan du også bruke hurtigtastene til Ctrl + I på en PC for å åpne et vindu med nettstedets kildekode vist. På en Mac er denne snarveien Kommando + Alternativ + I .

Hilary Allison / Lifewire

bygg inn youtube-video i google lysbilder

Bruk Chromes utviklerverktøy

I tillegg til det enkleVis sidekildemuligheten som Google Chrome tilbyr, kan du også dra nytte av deres utmerkede Utviklerverktøy å grave enda dypere inn i et nettsted. Disse verktøyene lar deg ikke bare se HTML-en, men også CSS-en som gjelder for visningselementer i det HTML-dokumentet.

Slik bruker du Chromes utviklerverktøy:

  1. Åpen Google Chrome .

  2. Navigere til nettsiden du ønsker å undersøke .

  3. Velg meny med tre prikker i øvre høyre hjørne av nettleservinduet.

  4. Hold musepekeren over fra menyen Flere verktøy og velg deretter Utviklerverktøy i menyen som vises.

    Menyelement for utviklerverktøy i Google Chrome
  5. Et vindu åpnes som viser HTML-kildekoden til venstre i ruten og den relaterte CSS-en til høyre.

  6. Alternativt, hvis du høyreklikker et element på en nettside og velg Undersøke fra menyen som vises, vil Chromes utviklerverktøy dukke opp og fremheve den spesifikke delen du valgte i HTML-en med den tilsvarende CSS-en vist til høyre. Det er veldig nyttig hvis du vil lære mer om en bestemt del av et nettsted.

    hvordan sjekke noen liker på instagram
Hvordan inspisere et element på en Mac

Er det lovlig å se kildekode?

I løpet av årene har vi fått mange nye webdesignere til å stille spørsmål ved om det er akseptabelt å se et nettsteds kildekode og bruke den til utdannelsen og til slutt for arbeidet de gjør. Selv om det absolutt ikke er akseptabelt å kopiere et nettsteds kode i engrossalg og gi det ut som din egen på et nettsted, er det faktisk hvor mange fremskritt som er gjort i denne bransjen å bruke den koden som et springbrett for å lære av.

Som vi nevnte i begynnelsen av denne artikkelen, ville du bli hardt presset for å finne en fungerende nettprofesjonell i dag som ikke har lært noe ved å se kilden til et nettsted! Ja, det er lovlig å se kildekoden til et nettsted. Å bruke den koden som en ressurs for å bygge noe lignende er også trygt. Å ta koden som den er og videresende den mens du jobber, er der du begynner å støte på problemer.

hvordan du lagrer gifs fra twitter

Til slutt lærer nettfagfolk av hverandre og forbedrer ofte arbeidet de ser og blir inspirert av, så ikke nøl med å se på et nettsteds kildekode og bruke det som et læringsverktøy.

Mer enn bare HTML

En ting å huske på er at kildefiler kan være svært kompliserte (og jo mer kompleks nettstedet du ser på er, desto mer kompleks er det sannsynligvis nettstedets kode). I tillegg til HTML-strukturen som utgjør siden, vil det også være CSS (cascading style sheets) som dikterer det visuelle utseendet til nettstedet. I tillegg vil mange nettsteder i dag inkludere skriptfiler inkludert med HTML.

Det er sannsynligvis flere skriptfiler inkludert; faktisk hver og en driver forskjellige aspekter av nettstedet. Ærlig talt kan kildekoden til et nettsted virke overveldende, spesielt hvis du er ny på å gjøre dette. Ikke bli frustrert hvis du ikke kan finne ut hva som skjer med det nettstedet umiddelbart. Å se HTML-kilden er bare det første trinnet i denne prosessen. Med litt erfaring vil du begynne å forstå bedre hvordan alle disse delene passer sammen for å lage nettsiden du ser i nettleseren din. Etter hvert som du blir mer kjent med koden, vil du kunne lære mer av den, og den vil ikke virke så skremmende for deg.

FAQ
  • Hvordan redigerer jeg HTML-kode i Chrome?

    Åpne utviklerverktøy i Chrome ved å trykke Ctrl (eller Kommando på en Mac) + Shift + I . Derfra, trykk Ctrl ( Kommando på Mac) + O og velg den lagrede kildefilen du vil redigere for å åpne den.

  • Hvordan viser jeg sidekildekoden i Chrome hvis Vis kilde er deaktivert?

    Hvis et nettsted har deaktivert alternativet Vis kilde, kan du kanskje fortsatt ta en titt under panseret. Velg fra toppen av nettleservinduet Utsikt > Utvikler > Se kilde , som skal trekke opp nettsidens kildekode.

  • Hvordan ser jeg kildekoden til et nettsted i Chrome ved å bruke Android-enheten min?

    Naviger til nettstedet du vil se ved å bruke enhetens Chrome-app, og velg deretter nettleserens adresselinje. Flytt tekstmarkøren helt til venstre – foran URL-en – og skriv se kilde , og trykk deretter på Tast inn eller velg .

Interessante Artikler