Web stranica koju čitate sastoji se, između ostalog, od izvornog koda. To su podaci koje vaš web pregledač preuzima i prevodi u ono što trenutno čitate.
Većina veb pregledača pruža mogućnost da vidite izvorni kod web stranice bez dodatnog softvera, bez obzira na vrstu uređaja na kome se nalazite.
Neki čak nude naprednu funkcionalnost i strukturu, što olakšava čitanje HTML-a i drugih programskih kodova na stranici.
Zašto biste hteli da vidite izvorni kod?
Postoji nekoliko razloga zašto želite da vidite izvorni kod stranice. Ako ste web programer, možda biste želeli da pogledate ispod poklopaca u posebnom stilu ili implementaciji drugog programera. Možda ste u osiguranju kvaliteta i pokušavate da utvrdite zašto se određeni deo web stranice otvara ili ponaša kako je to.
Možete takođe biti početnik koji pokušava da nauči kako kodirati sopstvene stranice i tražiti neke stvarne primere. Naravno, moguće je da ne spadate u neku od ovih kategorija i samo želite da pogledate izvor iz čiste radoznalosti.
U nastavku su navedene uputstva o tome kako možete pogledati izvorni kod u vašem pretraživaču.
google chrome
U toku je: Chrome OS, Linux, MacOS, Windows
Kancelarijska verzija Chrome-a nudi tri različite metode za pregled izvornog koda stranice, prvu i najjednostavniju pomoću sledeće prečice na tastaturi: CTRL + U ( COMMAND + OPTION + U na macOS).
Kada se pritisne, ova prečica otvara novi tabulator pregledača koji prikazuje HTML i drugi kod za aktivnu stranicu. Ovaj izvor je bojan kodiran i strukturiran na način koji olakšava razdvajanje i pronalazak onoga što tražite. Takođe možete stići tamo tako što ćete uneti sljedeći tekst u Chrome adresar, dodato lijevom stranom URL adrese web stranice i pritisnuti taster Enter : view-source: (tj. Izvor gledanja: https: // www .).
Treći metod je preko Chrome-ovih alata za razvijanje , koji vam omogućavaju da dubljim potopom u šifru stranice, kao i da ga postavite na ljeto radi testiranja i razvoja. Interfejs alata za programere se može otvoriti i zatvoriti pomoću ove prečice na tastaturi: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS). Možete ih takođe pokrenuti tako što ćete izvršiti sledeću putanju.
- Kliknite na dugme Chrome-a u glavnom meniju, koji se nalazi u gornjem desnom uglu i predstavljaju tri vertikalno poravnane tačke.
- Kada se pojavi padajući meni, pomerite kursor miša preko opcije Više alata .
- Kada se pojavi podmeni, kliknite na alatke za programere .
Android
Pregled izvora web stranice u Chrome-u za Android je jednostavan kao dodavanje sledećeg teksta na prednju adresu (ili URL) i podnošenjem: view-source:. Primer ovoga bi bio izvor gledanja: https: // www. . HTML i drugi kod sa stranice u pitanju biće odmah prikazani u aktivnom prozoru.
iOS
Iako ne postoje izvorne metode za pregledanje izvornog koda pomoću Chrome-a na vašem iPad-u, iPhone-u ili iPod-u, najjednostavniji i najefikasniji je korištenje rješenja treće strane, kao što je aplikacija View Source.
Dostupno za 0,99 dolara u App Store-u, Izvorni izvor zahteva od vas da unesete URL adresu (ili kopirate / nalepite sa adrese Chrome-ove adrese, što je ponekad najjednostavniji put) i to je to. Pored prikazivanja HTML-a i drugog izvornog koda, aplikacija takođe sadrži kartice koje prikazuju pojedinačnu stranicu, Model predmeta dokumenta (DOM), kao i veličinu stranice, kolačiće i druge zanimljive detalje.
Microsoft Edge
Trčanje na: Windows
Prečnik Edge vam omogućava da pregledate, analizirate i čak manipulišete izvornim kodom trenutne stranice preko interfejsa alata za razvoj alata . Da biste pristupili ovom praktičnom setu alatki, možete koristiti jednu od ovih prečica na tastaturi: F12 ili CTRL + U. Ako biste više voleli da koristite miš, kliknite na dugme menija Edge (tri tačke smeštene u gornjem desnom uglu) i izaberite opciju F12 Developer Tools sa liste.
Nakon prvog pokretanja dev alata, Edge dodaje dvije dodatne opcije u kontekstni meni pregledača (dostupno desnim klikom bilo gdje unutar web stranice): Inspect element i View source , a drugi koji otvara deo Debugger- a dev interfejs alata popunjen izvornim kodom.
Mozilla Firefox
Running on: Linux, MacOS, Windows
Da biste pogledali izvorni kod stranice u desktop verziji Firefoxa, možete pritisnuti CTRL + U ( COMMAND + U na macOS) na vašoj tastaturi, koji će otvoriti novi tabulator koji sadrži HTML i drugi kod za aktivnu web stranicu.
Ako upišete sledeći tekst u adresnu traku Firefoxa, direktno na lijevoj strani URL-a stranice će se pojaviti isti izvor na trenutnom kartici: view-source: (tj. Izvor-pogled: https: // www.) .
Još jedan način pristupa izvornom kodu stranice je preko alatki za razvoj Firefoxa, dostupnim tako što ćete preduzeti sledeće korake.
- Kliknite na dugme glavnog menija, koji se nalazi u gornjem desnom uglu prozora pregledača i predstavljaju tri horizontalne linije.
- Kada se pojavi pop-out meni, kliknite na ikonu "ključ" za programere .
- Kontekstni meni Web Developer bi sada trebao biti vidljiv. Izaberite opciju Source Page .
Firefox vam takođe omogućava prikaz izvornog koda za određeni deo stranice, što olakšava izolovanje problema. Da biste to učinili, prvo označite područje koje vas zanima pomoću miša. Zatim, kliknite desnim tasterom miša i izaberite View Selection Source iz kontekstnog menija pretraživača.
Android
Pregled izvornog koda u Android verziji Firefox-a može se postići prefiksom URL-a web stranice sa sledećim tekstom: view-source:. Na primjer, da biste pogledali izvor HTML-a za slanje sljedećeg teksta u naslovnu traku pregledača: view-source: https: // www. .
iOS
Naša preporučena metoda za prikaz izvornog koda web stranice na vašem iPad-u, iPhone-u ili iPod touch-u je preko aplikacije View Source, dostupna u App Store za $ 0.99. Iako nije direktno integrisan sa Firefox-om, lako možete kopirati i nalepiti URL iz pregledača u aplikaciju kako biste otkrili HTML i drugi kod koji je povezan sa datom stranom.
Apple Safari
Trčanje na iOS i MacOS
iOS
Iako Safari za iOS ne uključuje mogućnost prikaza izvora stranice po podrazumevanoj vrednosti, pregledač se prilično integriše u aplikaciju View Source - dostupan u App Store za $ 0.99.
Nakon instaliranja ove aplikacije treće strane, vratite se u pretraživač Safari i dodirnite dugme Share, nalazi se na dnu ekrana i predstavlja kvadratom i strelicom za gore. IOS Share Sheet bi sada trebao biti vidljiv, prekrivajući donju polovinu vašeg prozora Safari. Dođite desno i izaberite dugme View Source .
Sada bi trebali biti prikazani strukturirana prikaza izvornog koda aktivne stranice u boji, zajedno sa drugim karticama koje vam omogućavaju pregledanje imovine stranice, skripte i još mnogo toga.
macOS
Da biste pogledali izvorni kod stranice u desktop verziji Safari, prvo morate omogućiti njegov razvojni meni. Koraci ispod prikazuju vas kroz aktiviranje ovog skrivenog menija i prikaz HTML-a stranice stranice.
- Kliknite na Safari u meniju pretraživača, koji se nalazi na vrhu ekrana.
- Kada se pojavi padajući meni, izaberite opciju Preferences .
- Safari's Preferences sada bi trebali biti vidljivi. Kliknite na Advanced ikonu, koja se nalazi na krajnjoj desnoj strani gornjeg reda.
- Prema dnu Naprednog odeljka je opcija označena kao Show Show meni na meniju , uz prazno polje za potvrdu. Kliknite na ovo polje jednom da biste postavili znak za potvrdu i zatvorite prozor Preferences (Preferences) klikom na crveni 'x' koji se nalazi u gornjem levom uglu.
- Kliknite na meni Razviti , koji se nalazi na vrhu ekrana.
- Kada se pojavi padajući meni, izaberite Show Page Source . Umjesto toga možete koristiti sljedeću prečicu na tastaturi: COMMAND + OPTION + U.
Opera
Running on: Linux, MacOS, Windows
Za pregled izvornog koda sa aktivne web stranice u pretraživaču Opera koristite sledeću prečicu na tastaturi: CTRL + U ( COMMAND + OPTION + U na macOS). Ako biste više voleli da ubacite izvor na trenutnu karticu, ukucajte sledeći tekst na lijevoj strani URL adrese u adresnoj traci i pritisnite Enter : view-source: (tj. Izvor gledanja: https: // www. ).
Radna verzija Opera takođe vam omogućava da pregledate HTML izvor, CSS i druge elemente koristeći svoje integrisane alate za razvoj . Da biste pokrenuli ovaj interfejs, koji će se podrazumevano pojaviti na desnoj strani glavnog prozora pregledača, pritisnite sledeću prečicu na tastaturi: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS).
Opera programski alat je dostupan tako što ćete preduzeti sledeće korake.
- Kliknite na logo opera, koji se nalazi u gornjem levom uglu prozora pregledača.
- Kada se pojavi padajući meni, pomerite kursor miša preko opcije Više alata .
- Kliknite na Prikaži razvojni meni .
- Ponovo kliknite na logo opera.
- Kada se pojavi padajući meni, pomerite kursor preko programa Developer .
- Kada se pojavi podmeni, kliknite na Alatke za razvoj .
Vivaldi
Postoji više načina za prikaz izvora stranice unutar pretraživača Vivaldi. Najjednostavnije je putem prečice na tastaturi CTRL + U , koja prikazuje kod sa aktivne strane u novom jezičku.
Također možete dodati sljedeći tekst na prednju stranicu URL adrese, koja prikazuje izvorni kod na ovom kartici: view-source:. Primer ovoga bi bio izvor gledanja: http: // www. .
Druga metoda je pomoću integrisanih alata pretraživača, dostupnim pritiskom kombinacije CTRL + SHIFT + I ili preko alata Developer Tools u meniju Tools pretraživača - pronađeno klikom na logo "V" u gornjem levom uglu. Korištenje dev alata omogućava mnogo detaljniju analizu izvora stranice.