Oglejte si izvorno kodo spletne strani v vsakem brskalniku

Anonim

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, 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. Tukaj lahko pridete tako, da v naslovno vrstico Chroma vnesete naslednje besedilo, dodano na levi strani URL-ja spletne strani in izberete Vnesite ključ: pogled-izvor: (to je, pogled-izvor: https: //www.Go-Travels.com).

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. Z bližnjico na tipkovnici lahko odprete in zaprete vmesnik orodij za razvijalce: CTRL + SHIFT + I (COMMAND + OPTION + I na macOS). Lahko jih tudi začnete tako, da sledite naslednji poti.

  1. Izberite gumb glavnega menija Chrome, ki se nahaja v zgornjem desnem kotu in ga predstavljajo tri vertikalno poravnane pike.

  2. Ko se prikaže spustni meni, pokažite kazalec miške nad Več orodij možnost.

  3. Ko se pojavi podmeni, izberite Orodja za razvijalce.

Android

Pregledovanje vira spletnega mesta v Chromu za Android je tako preprosto, kot dodate naslednje besedilo na sprednji strani njenega naslova (ali URL-ja) in ga pošljite: pogled-izvor:. Primer tega bi bil pogled-izvor: https: //www.Go-Travels.com . 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 Edge menijski gumb (tri pike, ki se nahajajo v zgornjem desnem kotu) in izberite F12 orodja za razvijalce možnost s seznama.

Po prvem zagonu orodij dev, Edge dodaja dve dodatni možnosti v kontekstni meni brskalnika (dostopen tako, da z desno tipko miške kliknete kjerkoli znotraj spletne strani): Preglej element in Ogled vira, slednjega pa odpira Debugger del vmesnika dev orodij, ki je zapolnjen z izvorno kodo.

Mozilla Firefox

Zažene: Linux, MacOS, Windows

Če si želite ogledati izvorno kodo strani v namizni različici Firefoxa, lahko pritisnete CTRL + U (COMMAND + U na macOS) na tipkovnici, ki bo odprla 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 strani, namesto tega prikaže isti vir na trenutni kartici: pogled-izvor: ( tj. pogled-izvor: https: //www.dotdash.com ).

Drug način za dostop do izvorne kode strani je preko orodij za razvijalce Firefoxa, ki so dostopni s temi koraki.

  1. Izberite gumb glavnega menija, ki se nahaja v zgornjem desnem kotu okna brskalnika in ga predstavljajo tri vodoravne črte.

  2. Ko se prikaže pojavni meni, kliknite na Razvijalec ikona "ključ".

  3. Kontekstni meni spletnega razvijalca bi zdaj moral biti viden. Izberite Vir strani možnost.

Firefox vam omogoča tudi, da si ogledate izvorno kodo 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 tipko miške kliknite in izberite Oglejte si vir izbire iz kontekstnega menija brskalnika.

Android

Pregledovanje izvorne kode v različici Firefoxa Firefox je mogoče doseči s prednastavitvijo URL-ja spletne strani z naslednjim besedilom: pogled-izvor:. Na primer, če si želite ogledati vir HTML za Dotdash, v naslovno vrstico brskalnika pošljete naslednje besedilo: pogled-izvor: https: //www.dotdash.com .

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 možnosti za privzeto gledanje vira strani, se brskalnik neprekinjeno integrira z aplikacijo View Source, ki je na voljo v App Store za 0,99 evra.

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 Ogled vira gumb.

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, jo morate najprej omogočiti Razviti meni. Spodnji koraki vas vodijo skozi aktiviranje tega skritega menija in prikaz strani vira HTML.

  1. Izberite Safari v meniju brskalnika, ki se nahaja na vrhu zaslona.

  2. Ko se prikaže spustni meni, izberite Nastavitve možnost.

  3. Preference Safari bi morale biti zdaj vidne. Kliknite na Napredno ikona, ki se nahaja na skrajni desni strani zgornje vrstice.

  4. Proti koncu spodnjega dela je možnost označena Pokaži meni Razvijal v menijski vrstici, skupaj s praznim potrditvenim poljem. To polje enkrat izberite, če želite vanj vnesti kljukico in zaprite okno »Nastavitve« tako, da kliknete rdeči »x« v zgornjem levem kotu.

  5. Izberite Razviti meni, ki se nahaja na vrhu zaslona.

  6. 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 to besedilo na levo stran URL-ja in pritisnite Vnesite: pogled-izvor: ( tj. pogled-izvor: https: //www.Go-Travels.com ).

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.

  1. Izberite logotip Opera, ki se nahaja v zgornjem levem kotu okna brskalnika.

  2. Ko se prikaže spustni meni, pokažite kazalec miške nad Več orodij možnost.

  3. Kliknite na Pokaži razvijalski meni.

  4. Ponovno izberite logotip Opera.

  5. Ko se spustni meni pojavi, premaknite kazalec miške nad Razvijalec.

  6. Ko se pojavi podmeni, izberite Orodja za razvijalce.

Vivaldi

V brskalniku Vivaldi je na voljo več načinov za ogled strani. Najenostavnejši je preko CTRL + U bližnjica na tipkovnici, ki predstavlja kodo z aktivne strani v novem zavihku.

Na sprednji strani URL-ja strani lahko dodate naslednje besedilo, ki na tej kartici prikaže izvorno kodo: pogled-izvor:. Primer tega bi bil pogled-izvor: http: //www.dotdash.com .

Druga metoda je preko integriranih orodij za razvijalce brskalnika, dostopnih s pritiskom na CTRL + SHIFT + I kombinacijo ali skozi Orodja za razvijalce možnost v brskalniku Orodja meni, ki ga najdete tako, da izberete V logotip v zgornjem levem kotu. Uporaba orodij dev omogoča veliko bolj poglobljeno analizo vira strani.

Izbira Urednika