Spletna stran, ki jo berete, je med drugim sestavljena iz izvorne kode. To so informacije, ki jih spletni brskalnik prenese in prevede v tisto, kar trenutno berete.
Večina spletnih brskalnikov omogoča prikaz izvorne kode spletne strani brez dodatne programske opreme, ne glede na vrsto naprave, na kateri ste.
Nekateri celo ponujajo napredne funkcionalnosti in strukture, kar olajša pregledovanje HTML-ja in druge programske kode na strani.
Zakaj bi radi videli izvorno kodo?
Obstaja več razlogov, zakaj boste morda želeli videti izvorno kodo strani. Če ste spletni razvijalec, morda želite, da si ogledate pod pokrovčkom v določenem slogu ali izvedbi drugega programerja. Morda ste v zagotavljanju kakovosti in poskušate ugotoviti, zakaj se določen del spletne strani odraža ali obnaša tako, kot je.
Lahko bi tudi začetnik, ki se trudi naučiti, kako kodirati svoje strani in išče nekaj primerov v realnem svetu. Seveda je možno, da ne spadate v nobeno od teh kategorij in si želite ogledati vir iz čiste radovednosti.
Spodaj so navedena navodila za ogled izvorne kode v vašem brskalniku.
Google Chrome
Vklopi: Chrome OS, Linux, MacOS, Windows
Namizna različica Chroma ponuja tri različne načine za pregledovanje izvorne kode strani, ki je prva in najpreprostejša, s pomočjo naslednje bližnjične tipke: CTRL + U ( COMMAND + OPTION + U na macOS).
Ko pritisnete to bližnjico, odpre novo kartico brskalnika, ki prikazuje HTML in drugo kodo za aktivno stran. Ta vir je barvno kodiran in strukturiran na način, ki omogoča enostavnejšo razdelitev in iskanje, kar iščete. Prav tako lahko pridete tako, da v naslovno vrstico Chroma vnesete naslednje besedilo, ki je dodano na levi strani URL-ja spletne strani in pritisnete tipko Enter : pogled-izvor: (tj. Pogled izvira: https: // www .).
Tretja metoda je prek orodij za razvijalce Chrome, ki vam omogočajo, da globlje potopite v kodo strani in ga potegnete na letenje za namene testiranja in razvoja. Orodje razvijalskih orodij se lahko odpre in zapre z uporabo bližnjice na tipkovnici: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS). Lahko jih tudi začnete tako, da sledite naslednji poti.
- Kliknite gumb glavnega menija Chrome, ki se nahaja v zgornjem desnem kotu in ga predstavljajo tri vertikalno poravnane pike.
- Ko se prikaže spustni meni, pomaknite miškin kazalec nad možnost Več orodij .
- Ko se prikaže podmeni, kliknite orodja za razvijalce .
Android
Pregledovanje vira spletnega mesta v Chromu za Android je preprosto, kot dodajanje naslednjega besedila na sprednji strani njenega naslova (ali URL-ja) in njegovo predložitev: view-source:. Primer tega bi bil izvor-pogled: https: // www. . HTML in druga koda z zadevne strani bodo takoj prikazana v aktivnem oknu.
iOS
Čeprav ni izvornih načinov za pregledovanje izvorne kode s programom Chrome na vašem iPad, iPhone ali iPod touch, je najpreprostejši in najučinkovitejši, če želite uporabiti rešitev tretje osebe, kot je aplikacija View Source.
Na voljo je za $ 0.99 v trgovini z aplikacijami, Vir virov vas pozove, da vnesete URL strani (ali kopirate / prilepite iz naslovne vrstice v Chromu, kar je včasih najpreprostejša pot) in to je to. Poleg prikazovanja HTML in druge izvorne kode ima aplikacija tudi zavihke, ki prikazujejo posamezna sredstva strani, model dokumenta dokumenta (DOM), velikost strani, piškotke in druge zanimive podrobnosti.
Microsoft Edge
Vklop: Windows
Brskalnik Edge omogoča ogled, analizo in celo manipulacijo izvorne kode trenutne strani prek vmesnika orodij za razvijalce . Za dostop do tega priročnega orodja lahko uporabite eno od teh bližnjic na tipkovnici: F12 ali CTRL + U. Če bi rad raje miško namesto tega, kliknite na gumb Edge's menu (tri pike, ki se nahajajo v zgornjem desnem kotu) in izberite F12 Developer Tools možnost s seznama.
Po prvem zagonu orodij dev, Edge doda dve dodatni možnosti v kontekstni meni brskalnika (dostopno tako, da z desno miškino tipko kliknete kjerkoli znotraj spletne strani): Pregledajte element in vir vira , ta pa odpre razdelek Debugger dev vmesnik z orodji, zapolnjen z izvorno kodo.
Mozilla Firefox
Zažene: Linux, MacOS, Windows
Če si želite ogledati izvorno kodo strani v namizni različici Firefoxa, lahko na tipkovnici pritisnete CTRL + U ( COMMAND + U na macOS), ki odpre nov zavihek, ki vsebuje HTML in drugo kodo za aktivno spletno stran.
Če vnesete naslednje besedilo v naslovno vrstico Firefoxa, neposredno na levi strani URL-ja, namesto tega prikaže isti vir na trenutnem zavihku: view-source: (tj. Vir-pogled: https: // www.) .
Drug način za dostop do izvorne kode strani je preko orodij za razvijalce Firefoxa, ki so dostopni s temi koraki.
- Kliknite gumb glavnega menija, ki se nahaja v zgornjem desnem kotu okna brskalnika in ga predstavljajo tri vodoravne črte.
- Ko se prikaže pojavni meni, kliknite ikono razvijalca "ključ".
- Kontekstni meni spletnega razvijalca bi zdaj moral biti viden. Izberite možnost Source Page .
Firefox omogoča tudi ogled izvorne kode za določen del strani, kar olajša izoliranje težav. Če želite to narediti, najprej označite območje, ki vas zanima z miško. Nato z desno miškino tipko in v kontekstnem meniju brskalnika izberite možnost Izbor izbire .
Android
Pregledovanje izvorne kode v različici Firefoxa Firefox je mogoče doseči s prednastavitvijo URL-ja spletne strani z naslednjim besedilom: view-source:. Na primer, če si želite ogledati vir HTML, če bi v naslovno vrstico brskalnika poslali naslednje besedilo: pogled-source: https: // www. .
iOS
Naša priporočena metoda za ogled izvorne kode spletne strani na vašem iPad, iPhone ali iPod touch je prek aplikacije View Source, ki je na voljo v App Store za 0,99 evra. Čeprav ni neposredno povezan s Firefoxom, lahko preprosto kopirate in prilepite URL iz brskalnika v aplikacijo, da bi razkrili HTML in drugo kodo, povezano z zadevno stranjo.
Apple Safari
Teči na iOS in macOS
iOS
Čeprav Safari za iOS ne vključuje zmožnosti gledanja vira strani, privzeto brskalnik integrira z aplikacijo View Source - na voljo v App Store za $ 0.99.
Ko namestite to aplikacijo za tretje osebe, se vrnite v brskalnik Safari in tapnite gumb za skupno rabo, ki se nahaja na dnu zaslona in predstavlja kvadratka in puščica navzgor. Zdaj mora biti delovni list iOS viden, prekrivanje spodnje polovice okna Safari. Pomaknite se desno in izberite gumb Pogled vir .
Zdaj je treba prikazati barvno strukturirano predstavitev izvorne kode aktivne strani skupaj z drugimi zavihki, ki vam omogočajo ogled sredstev strani, skriptov in več.
macOS
Če si želite ogledati izvorno kodo strani v namizni različici programa Safari, morate najprej omogočiti meni Razvij . Spodnji koraki vas vodijo skozi aktiviranje tega skritega menija in prikaz strani vira HTML.
- Kliknite Safari v meniju brskalnika, ki se nahaja na vrhu zaslona.
- Ko se prikaže spustni meni, izberite možnost Nastavitve .
- Preference Safari bi morale biti zdaj vidne. Kliknite ikono Advanced , ki se nahaja na skrajni desni strani zgornje vrstice.
- Proti koncu spodnjega razdelka je možnost, ki je označena z menijem Prikaži razvoj v menijski vrstici , skupaj s praznim potrditvenim poljem. V tem polju enkrat kliknite, da vanj vnesete kljukico in zaprete okno »Nastavitve« tako, da kliknete rdeči »x« v zgornjem levem kotu.
- Kliknite meni Razvijal , ki se nahaja na vrhu zaslona.
- Ko se prikaže spustni meni, izberite Prikaži vir strani . Namesto tega lahko uporabite naslednjo bližnjico na tipkovnici: COMMAND + OPTION + U.
Opera
Zažene: Linux, MacOS, Windows
Za ogled izvorne kode z aktivne spletne strani v brskalniku Opera uporabite naslednjo bližnjico na tipkovnici: CTRL + U ( COMMAND + OPTION + U na macOS). Če želite namesto tega naložiti vir v trenutni zavihek, v naslovno vrstico vnesite naslednje besedilo na levo od URL-ja strani in pritisnite Enter : view-source: (tj. Vir-pogled: https: // www. ).
Namizna različica Opera omogoča tudi ogled virov HTML, CSS in drugih elementov z uporabo integriranih orodij za razvijalce . Če želite zagnati ta vmesnik, ki se privzeto prikaže na desni strani glavnega okna brskalnika, pritisnite naslednjo bližnjično tipko: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS).
Raziskovalno orodje Opera je na voljo tudi z naslednjimi koraki.
- Kliknite na logotip Opera, ki se nahaja v zgornjem levem kotu okna brskalnika.
- Ko se prikaže spustni meni, pomaknite miškin kazalec nad možnost Več orodij .
- Kliknite meni Pokaži razvijalce .
- Znova kliknite na logotip opera.
- Ko se prikaže spustni meni, pomaknite kazalec nad programsko opremo Developer .
- Ko se pojavi podmeni, kliknite Orodja za razvijalce .
Vivaldi
V brskalniku Vivaldi je na voljo več načinov za ogled strani. Najpreprosteje je prek bližnjice na tipkovnici CTRL + U , ki predstavlja kodo iz aktivne strani v novem zavihku.
Na sprednji strani URL-ja strani lahko dodate tudi naslednje besedilo, ki prikaže izvorno kodo na tem zavihku: view-source:. Primer tega bi bil izvor-vir: http: // www. .
Druga metoda je integrirano orodje za razvijalce brskalnika, dostopno s pritiskom kombinacije CTRL + SHIFT + I ali z orodjem za razvijalce v meniju Orodja brskalnika - najdete ga s klikom na logotip V v zgornjem levem kotu. Uporaba orodij dev omogoča veliko bolj poglobljeno analizo vira strani.