Prikaz izvornog koda web stranice u svakom pregledniku

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 za pregled 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, dodanu lijevu stranu URL-a web stranice i odabirom Unesi ključ: Pogled-source: (tj. izvora prikaza: https: //www.Go-Travels.com).

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.

1. Odaberite gumb Chromea glavnog izbornika koji se nalazi u gornjem desnom kutu i predstavlja tri okomito poravnata točka.

2. Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad gumba Više alata opcija.

3. Kada se pojavi podizbornik, odaberite Razvojni alati.

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: Pogled-source:, Primjer toga bi bio Prikaz-Izvor: https: //www.Go-Travels.com , 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 koja se nalaze u gornjem desnom kutu) i odaberite F12 razvojni alati opciju 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, posljednji koji otvara Program za ispravljanje pogrešaka dio sučelja dev alata popunjenih izvornim kodom.

Mozilla Firefox

Pokreće se: Linux, macOS, Windows

Za prikaz izvornog koda 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 kod za aktivnu web stranicu.

Unosom sljedećeg teksta u Firefoxovu adresnu traku, izravno s lijeve strane URL-a stranice, umjesto toga pojavit će se isti izvor na trenutačnoj kartici: Pogled-source: ( npr., izvori prikaza: https: //www.dotdash.com ).

Drugi je način pristupa izvornom kodu stranice putem alata za razvojne programere Krijesnice koji su dostupni poduzimajući sljedeće korake.

1. Odaberite gumb glavnog izbornika koji se nalazi u gornjem desnom kutu prozora preglednika i predstavlja tri vodoravne linije.

2. Kada se prikaže skočni izbornik, kliknite gumb razvijač ikona ključa.

3. Kontekstni izbornik web razvojnog programera sada bi trebao biti vidljiv. Odaberite Izvor stranice opcija.

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 i odaberite Prikaži izvor odabira iz kontekstnog izbornika preglednika.

Android

Prikaz izvornog koda u verziji Firefox za Android dostupan je prefiksom URL-a web stranice sljedećim tekstom: Pogled-source:, Na primjer, da biste vidjeli HTML izvor za Dotdash, u adresnu traku preglednika pošaljete sljedeći tekst: Prikaz-Izvor: https: //www.dotdash.com .

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 koji je 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 Prikaži izvor dugme.

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 vidjeli izvorni kôd stranice u verziji Safari za radnu površinu, najprije ga morate omogućiti Razviti izbornik. Koraci u nastavku vode vas kroz aktiviranje ovog skrivenog izbornika i prikazivanje HTML izvora stranice.

1. Odaberi Safari u izborniku preglednika, koji se nalazi na vrhu zaslona.

2. Kad se pojavi padajući izbornik, odaberite Postavke opcija.

3. Sadržaj Safari-a sada bi trebao biti vidljiv. Klikni na Napredna ikona koja se nalazi na krajnjoj desnoj strani gornjeg reda.

4. Prema dnu naprednog odjeljka opcija je označena Prikaži izbornik Razviti u traci izbornika, popraćena praznim potvrdnim okvirom. Odaberite 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.

5. Odaberite Razviti izbornik koji se nalazi na vrhu zaslona.

6. Kada se prikaže padajući izbornik, odaberite Prikaži izvor stranice, Umjesto toga možete upotrijebiti 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 želite umjesto toga umetnuti izvor na trenutnu karticu, upišite sljedeći tekst lijevo od URL-a stranice unutar adresne trake i pritisnite Unesi: izvor pogleda: ( npr., izvori prikaza: https: //www.Go-Travels.com ).

Radna verzija Opera također vam omogućuje pregled HTML izvora, CSS-a i drugih 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.

1. Odaberite logotip Opera koji se nalazi u gornjem lijevom kutu prozora preglednika.

2. Kada se pojavi padajući izbornik, zadržite pokazivač miša iznad gumba Više alata opcija.

3. Kliknite na Prikaži izbornik razvojnog programera.

4. Ponovno odaberite logotip Opera.

5. Kada se prikaže padajući izbornik, zadržite pokazivač miša iznad razvijač.

6. Kada se pojavi podizbornik, odaberite Razvojni alati.

Vivaldi

Postoji više načina za pregled izvora stranica unutar Vivaldi preglednika. Najjednostavniji je putem CTRL + U tipkovnički prečac, koji predstavlja kôd s aktivne stranice na novoj kartici.

Također možete dodati sljedeći tekst na početak URL-a stranice koji prikazuje izvorni kôd na trenutnoj kartici: Pogled-source:, Primjer toga bi bio Prikaz-Izvor: http: //www.dotdash.com .

Druga je metoda preglednika integriranih alata za razvojne programere, dostupna pritiskom na CTRL + SHIFT + I kombinacijom ili putem Razvojni alati opciju u pregledniku alat izbornik - pronađen odabirom V logotip u gornjem lijevom kutu. Korištenje dev alata omogućuje mnogo detaljniju analizu izvora stranice.