Kako pregledati i ispitati HTML izvorni kod web stranice

Korisnici mogu pregledati HTML izvorni kod svake web stranice koju posjete u bilo kojem većem internetskom pregledniku.
Odjeljci koji slijede opisuju mnoge načine ispitivanja izvornog koda u svakom od glavnih preglednika.
Za nastavak odaberite opciju s donje liste i slijedite upute na ekranu.

Informacije za početak

Podaci i kôd kojima poslužuje poslužitelj neće se prikazati pri čitanju izvornog koda web stranice.
Tražilica, na primjer, obrađuje podatke na poslužitelju, a zatim prikazuje rezultate na web stranici.
Drugim riječima, možete pogledati kôd koji čini stranicu s rezultatima, ali ne i izvorni kôd.

Svi propisi na strani servera, SSI i računarski kod podliježu ovom propisu.
Kao rezultat toga, nećete moći vidjeti izvorni kod skripte koja se koristi u tražilicama, forumima, anketama ili chatu.
Osim toga, kopiranje podataka iz izvornog koda može uzrokovati probleme ili vas preusmjeriti na stranicu sa koje ste kopirali podatke.

Chrome

Upotrijebite jednu od dolje navedenih tehnika za pregled izvornog koda web stranice u Google Chromeu.

Pogledajte samo izvorni kod

1. metoda

Pritisnite Ctrl+U na tastaturi računara da vidite samo izvorni kod.

Metoda broj dva

Odaberite Prikaži izvor stranice iz skočnog izbornika koji se prikazuje kada desnom tipkom miša kliknete prazan odjeljak web stranice.

Pogledajte izvorni kod stranice, uključujući komponente

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Chromeu.
  2. U gornjem desnom kutu prozora preglednika kliknite ikonu Prilagodi i upravljaj postavkama Google Chrome Chrome.
  3. Odaberite Više alata s padajuće opcije koja se otvori, a zatim Alati za programere.
  4. U novom području pri dnu ekrana kliknite karticu Elementi u gornjem lijevom kutu.

Firefox

Koristite jednu od sljedećih tehnika za pregled izvornog koda web stranice u Mozilla Firefoxu.

Pogledajte samo izvorni kod

Metoda prva

Pritisnite Ctrl+U na tastaturi računara da vidite samo izvorni kod.

Metoda broj dva

Odaberite Prikaži izvor stranice iz skočnog izbornika koji se prikazuje kada desnim tasterom miša kliknete prazan odjeljak web stranice.

Pogledajte izvorni kod stranice, uključujući komponente

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Firefoxu.
  2. U gornjem desnom kutu zaslona kliknite ikonu Meni.
  3. U padajućem okviru odaberite Web Developer, a zatim Toggle Tools sa povećanog menija.
  4. U gornjem lijevom kutu odjeljka koji se prikazuje pri dnu ekrana kliknite karticu Inspector.

Pogledajte dio izvornog koda za stranicu

Možete provjeriti izvorni kod za dio web stranice tako što ćete ga istaknuti.
Odaberite Prikaz izvora odabira iz kontekstnog izbornika kada desnom tipkom miša kliknete označeno područje.

Microsoft Edge

Upotrijebite jednu od dolje navedenih tehnika za pregled izvornog koda web stranice u Microsoft Edgeu.

Pogledajte samo izvorni kod

Metoda prva

Pritisnite Ctrl+U na tastaturi računara da vidite samo izvorni kod.

Metoda broj dva

Odaberite Prikaži izvor stranice iz skočnog izbornika koji se prikazuje kada desnom tipkom miša kliknete prazan odjeljak web stranice.

Pogledajte izvorni kod stranice, uključujući komponente

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Microsoft Edgeu.
  2. U gornjem desnom kutu zaslona kliknite ikonu Postavke i više.
  3. Odaberite Alati za programere iz povećanog izbornika pomicanjem kursora iznad Više alata u padajućem izborniku.
  4. Na vrhu prozora koji se prikazuje na desnoj strani ekrana kliknite karticu Elementi.

Internet Explorer

Upotrijebite jednu od dolje navedenih tehnika za pregled izvornog koda web stranice u programu Microsoft Internet Explorer.

Pogledajte samo izvorni kod

Metoda prva

Pritisnite Ctrl+U na tastaturi računara da vidite samo izvorni kod.

Metoda broj dva

Odaberite Prikaži izvor iz skočnog izbornika koji se prikazuje kada desnom tipkom miša kliknete prazan odjeljak web stranice.

Pogledajte izvorni kod stranice, uključujući komponente

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Internet Exploreru.
  2. U gornjem desnom kutu kliknite ikonu Alati.
  3. S padajuće opcije odaberite Developer Tools.
  4. U gornjem lijevom kutu izbornika alata za programere odaberite karticu DOM Explorer.

Safari

Da biste pregledali izvorni kod web stranice u Safariju, morate prvo aktivirati postavke programera.
Odjeljci koji slijede naučit će vas kako omogućiti ovu funkciju, a zatim kako vidjeti izvorni kod web stranice.

Korištenje razvojnih opcija Safarija

  1. Otvorite preglednik Safari na računaru.
  2. Na traci izbornika u gornjem lijevom kutu ekrana odaberite Safari birač.
  3. Na padajućem izborniku koji se otvori odaberite Postavke.
  4. Označite opciju pored Prikaži meni za razvoj u traci menija na kartici Napredno.
  5. Odabir za razvoj sada bi se trebao pojaviti na Appleovoj traci menija pri vrhu ekrana.

Pregled izvornog koda

1. metoda

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Safariju.
  2. Kliknite na opciju Razvoj (Develop) u Appleovoj traci menija pri vrhu ekrana, a zatim sa padajućeg menija prikaži izvor stranice.
  3. Kliknite karticu Elementi na vrhu područja alata za programere u sredini ekrana.

Metoda broj dva

Odaberite Prikaži izvor stranice iz skočnog izbornika koji se pojavi kada desnom tipkom miša kliknete prazan odjeljak web stranice.

Opera

Upotrijebite jednu od sljedećih tehnika da vidite izvorni kod web stranice u Operi.

Pogledajte samo izvorni kod

Metoda prva

Pritisnite Ctrl+U na tastaturi računara da vidite samo izvorni kod.

Metoda broj dva

Odaberite Izvor stranice iz skočnog izbornika koji se prikazuje kada desnom tipkom miša kliknete prazan odjeljak web stranice.

Pogledajte izvorni kod stranice, uključujući komponente

  1. Idite na web stranicu čiji izvorni kod želite vidjeti u Operi.
  2. U gornjem lijevom kutu prozora preglednika kliknite gumb Meni.
  3. Odaberite Alati za programere iz povećanog izbornika pomicanjem kursora preko Developer u padajućem izborniku.
  4. Pri vrhu prozora na desnoj strani ekrana odaberite karticu Elementi.

Chrome na Android telefonu ili tabletu

  1. Na Android telefonu ili tabletu otvorite preglednik Google Chrome.
  2. Otvorite web stranicu na kojoj želite vidjeti izvorni kod.
  3. Pomaknite pokazivač na prednju stranu URL-a dodirom jednom u adresnoj traci.
  4. Dodirnite Enter ili Go nakon upisivanja view-source:.

Ako gore navedene metode ne funkcioniraju na vašem Android telefonu, upotrijebite tehniku ​​opisanu u odjeljku o korištenju Safarija na iPhoneu ili iPadu.
Glavne razlike su upotreba Chromea umjesto Safarija i postupak stvaranja i uređivanja oznaka na Android telefonima.

Safari na iPhoneu ili iPadu

Potrebno je malo više napora za pregled izvornog koda web stranice na iPhoneu ili iPadu, ali to je izvedivo.
Da biste pregledali izvorni kôd web stranice, prvo morate izgraditi oznaku, dodati joj JavaScript kôd, a zatim upotrijebiti oznaku na stranici.

  1. Za pristup izvornom kodu stvorite oznaku.
  2. Na iPhoneu ili iPadu otvorite preglednik Safari.
  3. Može se pristupiti bilo kojoj web stranici, poput www.mllapan.com.
  4. Pri dnu ekrana dodirnite ikonu Više.
  5. Dodirnite opciju Add Bookmark u meniju koji se pojavi.
  6. Unesite Prikaži izvorni kod web stranice (View web page source code) u polje za naziv oznake, zatim dodirnite x na desnoj strani da biste izbrisali trenutni naziv.
  7. Da biste sačuvali oznaku, dodirnite Sačuvaj u gornjem desnom uglu.
  8. Kopirajte cijeli isječak JavaScript koda u nastavku.
    javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘Source code of ‘+location.href);a.close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow='auto’;b.style.whiteSpace='pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
  9. Pritiskom na simbol oznaka pri dnu ekrana u Safariju možete pristupiti svojim oznakama.
  10. Pronađite oznaku koju ste ranije napravili, zatim pritisnite i držite dok se meni ne pojavi na dnu ekrana.
  11. Na izborniku odaberite opciju Uredi.
  12. Dodirnite URL, a zatim x da biste obrisali URL na ekranu Edit Bookmark, a zatim unesite JavaScript kôd iz 7. koraka u okvir za URL.
  13. Da biste spremili izmjene oznaka, dodirnite Gotovo u donjem desnom kutu ekrana.

Koristite oznaku za pregled izvornog koda

Možda ćete sada vidjeti izvorni kôd web stranice nakon što napravite gore spomenutu oznaku.

Pristupite web stranici na kojoj želite vidjeti izvorni kod u Safariju.
Pri dnu ekrana dodirnite simbol oznaka.
Dodirnite oznaku koju ste napravili za Pregled izvornog koda web stranice.

Pojavljuje se nova kartica preglednika Safari koja otkriva izvorni kod web stranice.

Koji je najbolji način zatvaranja izvorne kodne stranice ili alata?

Možda ćete poželjeti napustiti ili odbaciti web stranicu nakon što završite s proučavanjem izvornog koda.
Tehnika koju ste odabrali za otvaranje izvornog koda određuje kako ćete ga zatvoriti.

  • Zatvorite novu karticu koja se pojavila pri vrhu prozora vašeg preglednika ako ste koristili tehniku ​​Ctrl+U (osim u Edgeu) ili opciju desnog klika.
  • Pritisnite iste tipke ili kliknite ikonu x u gornjem desnom kutu prozora alata ako ste koristili pristup programera (F12 ili Ctrl+Shift+I).

Pogledajte izvorni kod pomoću mrežnog alata

Postoje brojni mrežni programi koji vam omogućuju pregled izvornog koda bilo koje web stranice uz korištenje preglednika.
Budući da većina ovih alata može oblikovati, stilizirati i istaknuti kôd radi lakšeg razumijevanja, oni mogu biti korisni.
Evo kratkog pregleda nekih od ovih alata: