Slik får du tilgang til kildekoden i Google Chrome: 4 enkle metoder

Å se på kildekoden til en HTML-side er et slags krafttrekk, spesielt hvis du driver med webutvikling eller bare prøver å finne ut hva som får et nettsted til å fungere. Noen ganger laster nettsteder skript eller stiler dynamisk, slik at den faktiske koden du ser på siden er ikke hele historien. Det er her det blir nyttig å se på kildekoden – spesielt hvis du vil skrape data eller bare lære hvordan ting er bygget opp. Og ja, Chrome gjør det ganske enkelt, men ærlig talt kan det føles litt forvirrende hvis du ikke er vant til verktøyene eller sjargongen.

Google Chrome gir et par enkle metoder for å kikke bak kulissene. For det første kan du åpne den rå HTML-kildekoden rett fra serveren, eller du kan bruke interaktive verktøy som viser deg koden etter at nettstedets JavaScript og CSS har gjort sitt. Verktøyet «Inspiser» er i utgangspunktet det alle utviklere bruker for å hoppe rundt i koden. Det er supernyttig for feilsøking eller bare for å prøve å forstå komplekse oppsett. Men vær oppmerksom på: noen ganger er kildekoden du ser ikke nøyaktig den som opprinnelig ble servert, på grunn av DOM-manipulasjoner eller andre skript. Det er litt rart, men i noen oppsett kan det hende at det ikke lastes inn umiddelbart å åpne «Inspiser» eller kildevisningen – det kan hjelpe å laste inn siden på nytt, tømme hurtigbufferen eller til og med slå av Chrome og åpne den på nytt.

Slik får du tilgang til sidekilde og inspektør i Chrome

Bruke snarveier

Den raskeste måten? Bare trykk på den Ctrl + Upå Windows eller ⌘-Option-UMac. Dette åpner umiddelbart en ny fane med rå HTML-kode. På noen nettsteder er det den enkleste måten, spesielt hvis du bare prøver å se raskt på koden. Men husk at dette viser koden slik serveren sender den, ikke det du ser etter at JavaScript eller stiler har modifisert ting. For et dypere dykk er “Inspiser”-panelet et bedre valg.

Bruk av kontekstmenyen

Høyreklikk hvor som helst på siden – jepp, hvor som helst – så ser du alternativer som Vis sidekilde eller Inspiser. Velg Vis sidekilde for å se den rå HTML-koden som vises, som oppdateres hvis du oppdaterer siden. Hvis du velger Inspiser, åpnes Chrome DevTools-panelet rett ved elementet du klikket på, slik at du kan se gjeldende status for elementet etter at skript eller stiler er brukt. Dette er nyttig når du feilsøker problemer med layout eller dynamisk innhold. Noen ganger lastes ikke dette panelet inn umiddelbart, så vent et øyeblikk eller last inn på nytt om nødvendig – Chrome kan være litt urolig her.

Redigerer URL for å vise kildekode

For de ekte nerdene og mobilbrukerne kan du hacke selve URL-en. Bare klikk på URL-linjen, og skriv deretter inn view-source:før nettsidens URL. Så hvis det var https://www.example.com, endre det til view-source:https://www.example.com og trykk Enter. Dette laster inn rå HTML-kode umiddelbart. Jeg er ikke sikker på hvorfor det fungerer, men dette er supernyttig på mobil når nettlesergrensesnittet kan komme i veien for DevTools. Det er et merkelig hack, men det redder dagen noen ganger.

Tilgang via Chrome-menyen

Hvis høyreklikk ikke hjelper, har Chrome-menyen det du trenger. Klikk på ikonet med tre prikker, naviger deretter til Flere verktøy og velg Utviklerverktøy. Dette åpner DevTools-panelet, som er fullpakket med funksjoner – Elementer, Konsoll, Nettverk osv.Elementer -fanen er der du sannsynligvis vil bruke mesteparten av tiden din, på å undersøke live DOM-er eller justere stiler. Det er litt skremmende i starten, men å tukle rundt her kan lære mye om hvordan nettsteder fungerer. Bonus: Du kan slå av og på enhetsemulering og teste mobiloppsett der.

Bli kjent med det grunnleggende om kildekoden

Når du har koden foran deg, hjelper det mye å forstå det grunnleggende. HTML er bygget på tagger – som <p>for avsnitt, <div>for beholdere eller <a>for lenker. Disse taggene forteller nettleseren hva hvert innholdsstykke er. Attributter i tagger, som classeller id, gir ekstra informasjon, som styling eller identifisering av spesifikke elementer. For eksempel er MDNs nettside om HTML-elementer en god ressurs hvis du går deg vill.

Husk at det du ser i kildekoden noen ganger ikke er hele bildet. Skript endrer DOM-elementer etter lasting, slik at siden i sanntid kan se annerledes ut. Det er her Inspect hjelper, fordi det viser den *faktiske* koden du samhandler med, ikke bare den originale HTML-koden.

Ærlig talt? Det er litt rotete noen ganger – skript lastes inn asynkront, DOM-er endres underveis. Men å få grep om det grunnleggende gjør feilsøking eller bare læring mye enklere. Fordi Chrome selvfølgelig må gjøre det litt komplisert.