Web stranica koju čitate sastoji se, između ostalog, izvornog koda. To su informacije koje vaš web preglednik preuzima i prevodi u ono što čitate upravo sada.
Većina web preglednika omogućava pregled izvornog koda web stranice bez dodatnog softvera, bez obzira na vrstu uređaja.
Neki čak nude naprednu funkcionalnost i strukturu, što olakšava prepoznavanje HTML i drugih kodova programiranja na stranici.
Zašto biste željeli vidjeti izvorni kod?
Postoji nekoliko razloga zašto biste htjeli vidjeti izvornu šifru stranice. Ako ste web developer, možda biste željeli zaviriti ispod pokrivača u nekom posebnom stilu ili implementaciji drugog programera. Možda ste u osiguranju kvalitete i pokušavate utvrditi zašto se određeni dio web stranice prikazuje ili ponaša način na koji to jest.
Možeš također biti početnik koji pokušava naučiti kako kodirati svoje stranice i traži neke primjere u stvarnom svijetu. Naravno, moguće je da ne padnete ni u jednu od ovih kategorija i samo želite vidjeti izvor iz čiste znatiželje.
Dolje su navedene upute o tome kako pregledati izvornog koda u vašem pregledniku.
Google Chrome
Pokreće se: OS Chrome, Linux, MacOS, Windows
Verzija Chromea za stolna računala nudi tri različite metode gledanja izvornog koda stranice, prve i najjednostavnije pomoću sljedećeg tipkovničkog prečaca: CTRL + U ( COMMAND + OPTION + U na macOS).
Kada se pritisne, ovaj prečac otvara novu karticu preglednika koja prikazuje HTML i drugi kôd za aktivnu stranicu. Taj je izvor boja kodiran i strukturiran na način koji olakšava dijeljenje i pronalaženje onoga što tražite. Također možete doći tako da unesete sljedeći tekst u Chromeovu adresnu traku, dodajući lijevu stranu URL- a web stranice i pritiskom tipke Enter : source-view (npr., Izvori prikaza: https: // www .).
Treća je metoda Chromeovih alata za razvojne programere , koja vam omogućuju dublje zaroniranje u kôd stranice, kao i ugađanje na letu u svrhu testiranja i razvoja. Sučelje alata za razvojne programere može se otvoriti i zatvoriti pomoću ovog tipkovničkog prečaca: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS). Također ih možete pokrenuti na sljedeći način.
- Kliknite gumb Chromea glavnog izbornika koji se nalazi u gornjem desnom kutu i predstavlja tri okomito poravnata točka.
- Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad opcije Više alata .
- Kada se pojavi podizbornik, kliknite Alati za razvojne programere .
Android
Pregled izvora web stranice u Chromeu za Android jednostavan je od dodavanja sljedećeg teksta ispred svoje adrese (ili URL-a) i slanja ga: source-view:. Primjer toga bi bio izvor prikaza: https: // www. , HTML i drugi kod s dotične stranice odmah će se prikazati u aktivnom prozoru.
iOS
Iako nema izvornih metoda za gledanje izvornog koda pomoću Chromea na vašem ipadu, iPhoneu ili iPod touchu, najjednostavnije i najučinkovitije je korištenje rješenja za treće strane, kao što je aplikacija za View Source.
Dostupno za $ 0.99 u trgovini App Store, izvorni upit od vas traži da unesete URL stranice (ili je kopirajte / zalijepite iz Chromeove adresne trake, a to je ponekad najjednostavniji put) i to je to. Osim prikazivanja HTML-a i drugog izvornog koda, aplikacija sadrži i kartice koje prikazuju pojedinačne stranice, model dokumenta objekta (DOM), veličinu stranice, kolačiće i druge zanimljive pojedinosti.
Microsoft Edge
Pokreće se: Windows
Preglednik Edge omogućuje pregled, analizu i čak manipulaciju izvornog koda trenutne stranice putem sučelja alata za razvojne programere . Da biste pristupili ovom praktičnom alatu, možete upotrijebiti jedan od ovih tipkovničkih prečaca: F12 ili CTRL + U. Ako želite umjesto miša, kliknite gumb Edge izbornika (tri točke u gornjem desnom kutu) i odaberite opciju alata za razvojne programere F12 s popisa.
Nakon pokretanja dev alata po prvi put, Edge dodaje dvije dodatne opcije u kontekstni izbornik preglednika (dostupan desnim klikom bilo gdje unutar web stranice): Pregledajte element i Prikaži izvor , potonji koji otvara Debugger dio dev sučelje alata popunjeno izvornim kodom.
Mozilla Firefox
Pokreće se: Linux, macOS, Windows
Da biste vidjeli izvorni kôd stranice u verziji Firefoxa za radnu površinu, možete pritisnuti CTRL + U ( COMMAND + U na macOS) na tipkovnici koja će otvoriti novu karticu koja sadrži HTML i drugi kôd za aktivnu web stranicu.
Upisivanjem sljedećeg teksta u Firefoxovu adresnu traku, izravno s lijeve strane URL-a stranice, pojavit će se isti izvor na trenutačnoj kartici: source-view (npr., Izvor pogleda: https: // www.) ,
Drugi je način pristupa izvornom kodu stranice putem alata za razvojne programere Krijesnice koji su dostupni poduzimajući sljedeće korake.
- Kliknite gumb glavnog izbornika koji se nalazi u gornjem desnom kutu prozora preglednika i predstavlja tri vodoravne linije.
- Kada se prikaže skočni izbornik, kliknite ikonu Razvijatelj "ključ".
- Kontekstni izbornik web razvojnog programera sada bi trebao biti vidljiv. Odaberite opciju Izvor stranice .
Firefox također omogućuje pregled izvornog koda za određeni dio stranice, što olakšava izdvajanje poteškoća. Da biste to učinili, prvo označite područje koje vas zanima pomoću miša. Zatim desnom tipkom miša kliknite View Source odabir iz kontekstnog izbornika preglednika.
Android
Prikaz izvornog koda u verziji Firefox za Firefox dostupan je prefiksom URL-a web stranice sljedećim tekstom: view-source:. Na primjer, za pregled HTML izvora za slanje sljedećeg teksta u adresnu traku preglednika: source-view: https: // www. ,
iOS
Naša preporučena metoda za gledanje izvornog koda web stranice na vašem iPadu, iPhoneu ili iPod Touchu je kroz aplikaciju Prikaži izvor, dostupna u trgovini App za 0,99 USD. Iako se ne integrira izravno s Firefoxom, možete jednostavno kopirati i zalijepiti URL iz preglednika u aplikaciju kako biste otkrili HTML i drugi kôd povezan s dotičnom stranicom.
Apple Safari
Trčanje na iOS i MACOS
iOS
Iako Safari za iOS ne obuhvaća mogućnost gledanja izvora stranice prema zadanim postavkama, preglednik se prilično jednostavno integrira s aplikacijom Prikaz izvora - dostupan u App Storeu za 0,99 USD.
Nakon instalacije aplikacije trećih strana vratite se u Safari preglednik i dodirnite gumb Dijeli, koji se nalazi na dnu zaslona i koji predstavlja trg i strelicu prema gore. IOS Share Sheet sada bi trebao biti vidljiv, prekrivajući donju polovicu Safari prozora. Pomaknite se udesno i odaberite gumb Prikaz izvora .
Sada treba biti prikazana šifrirana i strukturirana reprodukcija izvornog koda aktivne stranice, zajedno s ostalim karticama koje vam omogućuju pregledavanje imovine stranice, skripti i još mnogo toga.
MacOS
Da biste pregledali izvorni kôd stranice u verziji Safari za radnu površinu, najprije morate omogućiti izbornik Razvoj . Koraci u nastavku vode vas kroz aktiviranje ovog skrivenog izbornika i prikazivanje HTML izvora stranice.
- Kliknite na Safari u izborniku preglednika koji se nalazi na vrhu zaslona.
- Kad se pojavi padajući izbornik, odaberite opciju Postavke .
- Sadržaj Safari-a sada bi trebao biti vidljiv. Kliknite ikonu Napredno , koja se nalazi na krajnjoj desnoj strani gornjeg reda.
- Prema dnu naprednog odjeljka je opcija s izbornikom Prikaži Razviti u traci izbornika , praćenu praznim potvrdnim okvirom. Kliknite ovaj okvir jednom da biste stavili kvačicu u njega i zatvorite prozor Postavke klikom na crvenu 'x' koja se nalazi u gornjem lijevom kutu.
- Kliknite izbornik Razvoj , koji se nalazi na vrhu zaslona.
- Kada se pojavi padajući izbornik, odaberite Prikaži izvor stranice . Umjesto toga možete koristiti i sljedeće tipkovničke prečace: COMMAND + OPTION + U.
Opera
Pokreće se: Linux, macOS, Windows
Za prikaz izvornog koda s aktivne web stranice u pregledniku Opera koristite sljedeći prečac na tipkovnici: CTRL + U ( COMMAND + OPTION + U na macOS). Ako umjesto toga želite umetati izvor na trenutačnu karticu, upišite sljedeći tekst lijevo od URL-a stranice unutar adresne trake i pritisnite Enter : source-view (tj. Izvor-pogledati: https: // www. ).
Radna verzija aplikacije Opera također vam omogućuje pregled HTML izvora, CSS-a i ostalih elemenata pomoću integriranih alata za razvojne programere . Da biste pokrenuli ovo sučelje, koje će se pojaviti na desnoj strani glavnog prozora preglednika, pritisnite sljedeći tipkovnički prečac: CTRL + SHIFT + I ( COMMAND + OPTION + I na MacOS).
Operativni alat za razvojne programere također je dostupan poduzimanjem sljedećih koraka.
- Kliknite logotip Opera koji se nalazi u gornjem lijevom kutu prozora preglednika.
- Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad opcije Više alata .
- Kliknite Prikaži izbornik razvojnog programera .
- Ponovno kliknite na logotip Opera.
- Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad programera Developer .
- Kada se pojavi podizbornik, kliknite Alat za razvojne programere .
Vivaldi
Postoji više načina za pregled izvora stranica unutar Vivaldi preglednika. Najjednostavniji je putem prečaca tipkovnice CTRL + U koji predstavlja kôd s aktivne stranice na novoj kartici.
Također možete dodati sljedeći tekst prednji dio URL-a stranice, koji prikazuje izvornu šifru na trenutnoj kartici: source-view:. Primjer toga bi bio izvor prikaza: http: // www. ,
Druga je metoda putem integriranih alata za razvojne programere preglednika koji su dostupni pritiskom na kombinaciju CTRL + SHIFT + I ili putem alata Razvojni alati u izborniku alata preglednika - pronađen tako da kliknete na "V" logotip u gornjem lijevom kutu. Korištenje dev alata omogućuje mnogo detaljniju analizu izvora stranice.