Webová stránka, ktorú čítate, sa skladá okrem iného zo zdrojového kódu. To sú informácie, ktoré váš webový prehliadač sťahuje a prekladá do toho, čo práve čítate.
Väčšina webových prehliadačov poskytuje možnosť vidieť zdrojový kód webovej stránky bez požadovaného dodatočného softvéru bez ohľadu na typ zariadenia, na ktorom ste.
Niektorí dokonca ponúkajú pokročilé funkcie a štruktúru, čo uľahčuje prehľadávanie kódu HTML a iného programovacieho kódu na stránke.
Prečo by ste chceli vidieť zdrojový kód?
Existuje niekoľko dôvodov, prečo možno budete chcieť vidieť zdrojový kód stránky. Ak ste webový vývojár, možno by ste sa chceli pozrieť pod obálky v inom štýle alebo implementácii iného programátora. Možno ste v zabezpečení kvality a snažíte sa zistiť, prečo určitá časť webovej stránky vykresľuje alebo sa správa tak, ako to je.
Môžete sa stať aj začiatočníkom, ktorý sa snaží naučiť kódovať vaše vlastné stránky a hľadá niektoré príklady z reálneho sveta. Samozrejme, je možné, že nepatríte do žiadnej z týchto kategórií a jednoducho chcete zobraziť zdroj z úplnej zvedavosti.
Nižšie sú uvedené pokyny na zobrazenie zdrojového kódu vo vašom prehliadači.
Google Chrome
Prebieha: Chrome OS, Linux, MacOS, Windows
Verzia prehliadača Chrome pre stolové počítače ponúka tri rôzne spôsoby zobrazenia zdrojového kódu stránky, prvý a najjednoduchší pomocou nasledujúcej klávesovej skratky: CTRL + U ( COMMAND + OPTION + U na macOS).
Po stlačení sa touto skratkou otvorí nová záložka prehliadača zobrazujúca HTML a iný kód pre aktívnu stránku. Tento zdroj je farebne kódovaný a štruktúrovaný spôsobom, ktorý zjednodušuje rozdelenie a nájdenie toho, čo hľadáte. Môžete sa tam tiež dostať zadaním nasledujúceho textu do panela s adresou prehliadača Chrome pripojeného k ľavej strane adresy URL webovej stránky a stlačením klávesu Enter : view-source: (tj zdroj zobrazenia: https: // www .).
Tretia metóda je prostredníctvom nástrojov vývojára prehliadača Chrome, ktoré vám umožnia hlbšie sa ponoriť do kódu stránky a tiež ho vylepšiť za účelom testovania a vývoja. Rozhranie nástrojov pre vývojárov možno otvoriť a zatvoriť pomocou tejto klávesovej skratky: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS). Môžete ich spustiť aj nasledujúcou cestou.
- Kliknite na tlačidlo hlavnej ponuky Chrome, ktoré sa nachádza v pravom hornom rohu a predstavuje tri vertikálne zarovnané body.
- Keď sa zobrazí rozbaľovacia ponuka, umiestnite kurzor myši nad možnosť Viac nástrojov .
- Keď sa zobrazí podmenu, kliknite na Nástroje vývojára .
Android
Zobrazenie zdroja webovej stránky v prehliadači Chrome pre systém Android je jednoduché ako pridanie nasledujúceho textu do prednej časti jeho adresy (alebo adresy URL) a jeho odoslanie: view-source:. Príkladom toho by bolo zobrazenie-zdroj: https: // www. , HTML a iný kód z príslušnej stránky sa okamžite zobrazí v aktívnom okne.
iOS
Hoci neexistujú žiadne natívne metódy na prezeranie zdrojového kódu pomocou prehliadača Chrome na zariadení iPad, iPhone alebo iPod touch, najjednoduchším a najefektívnejším riešením je použitie riešenia od iných výrobcov, napríklad aplikácie View Source.
K dispozícii pre 0,99 EUR v aplikácii App Store, zobrazí sa zdrojové okno výzvy na zadanie adresy URL stránky (alebo ju skopírujte / prilepte z panela s adresou prehliadača Chrome, čo je niekedy najjednoduchšia cesta) a to je všetko. Okrem zobrazenia kódu HTML a iného zdrojového kódu má aplikácia aj karty, ktoré zobrazujú jednotlivé položky stránky, objektový model dokumentu (DOM), veľkosť stránky, súbory cookie a ďalšie zaujímavé informácie.
Microsoft Edge
Beží na: Windows
Prehliadač Edge umožňuje prezerať, analyzovať a dokonca manipulovať so zdrojovým kódom aktuálnej stránky prostredníctvom rozhrania Nástroje vývojára . Ak chcete získať prístup k tejto šikovnej sade nástrojov, môžete použiť jednu z týchto klávesových skratiek: F12 alebo CTRL + U. Ak by ste preferovali myš, kliknite na tlačidlo ponuky Edge (tri body umiestnené v pravom hornom rohu) a zvoľte možnosť F12 Developer Tools zo zoznamu.
Po prvom spustení dev nástrojov Edge pridá do kontextového menu prehliadača dve ďalšie možnosti (dostupné kliknutím pravým tlačidlom myši kdekoľvek na webovej stránke): Inspect element a View source , ktorý otvorí Debugger časť dev nástrojové rozhranie naplnené zdrojovým kódom.
Mozilla Firefox
Beží na: Linux, macOS, Windows
Pre zobrazenie zdrojového kódu stránky vo verzii prehliadača Firefox môžete na klávesnici stlačiť CTRL + U ( COMMAND + U na macOS), čím sa otvorí nová karta obsahujúca HTML a iný kód pre aktívnu webovú stránku.
Zadaním nasledujúceho textu do panela s adresou v adresári Firefox priamo vľavo od webovej adresy stránky sa bude na aktuálnej karte zobrazovať ten istý zdroj: zdroj zobrazenia: (tj zdroj zobrazenia: https: // www.) ,
Ďalším spôsobom, ako získať prístup k zdrojovému kódu stránky, je prostredníctvom vývojárskych nástrojov prehliadača Firefox, ktorý je prístupný nasledujúcimi krokmi.
- Kliknite na tlačidlo hlavnej ponuky, ktoré sa nachádza v pravom hornom rohu okna prehliadača a predstavuje tri horizontálne čiary.
- Keď sa zobrazí pop-out menu, kliknite na ikonu Developer "key".
- Kontextové menu aplikácie Web Developer by malo byť teraz viditeľné. Vyberte možnosť Zdroj stránok .
Firefox vám tiež umožňuje prezerať zdrojový kód pre konkrétnu časť stránky, čo uľahčuje izoláciu problémov. Najprv zvýraznite oblasť, ktorá vás zaujíma myšou. Potom kliknite pravým tlačidlom myši a zvoľte Zobraziť zdroj výberu z kontextového menu prehliadača.
Android
Zobrazenie zdrojového kódu vo verzii pre systém Android vo verzii prehliadača Firefox sa dá dosiahnuť predpona adresy URL webovej stránky s nasledujúcim textom: view-source:. Ak chcete napríklad zobraziť zdrojový kód HTML, zadajte v paneli s adresou prehliadača nasledujúci text: zdroj zobrazenia: https: // www. ,
iOS
Odporúčaná metóda na prezeranie zdrojového kódu webových stránok na zariadení iPad, iPhone alebo iPod touch je prostredníctvom aplikácie View Source, ktorá je k dispozícii v aplikácii App Store za 0,99 EUR. I keď nie je integrovaná priamo do Firefoxu, môžete jednoducho skopírovať a prilepiť adresu URL z prehliadača do aplikácie, aby ste odhalili kód HTML a ďalší kód priradený k príslušnej stránke.
Apple Safari
Prebieha v systéme iOS a macOS
iOS
Hoci služba Safari pre systém iOS neobsahuje možnosť zobrazenia zdrojového kódu v predvolenom nastavení, prehliadač sa skôr integruje do aplikácie Zobraziť zdroj - v aplikácii App Store je k dispozícii za 0,99 EUR.
Po inštalácii tejto aplikácie tretej strany sa vrátite do prehliadača Safari a klepnite na tlačidlo Zdieľať umiestnené v spodnej časti obrazovky a reprezentované štvorcom a šípkou hore. IOS Share Sheet by teraz mal byť viditeľný, prekrývajúci spodnú polovicu okna Safari. Prejdite doprava a vyberte tlačidlo Zobraziť zdroj .
Bolo by teraz potrebné zobraziť farebne kódované štruktúrované zobrazenie zdrojového kódu aktívnej stránky spolu s ďalšími kartami, ktoré umožňujú zobraziť aktíva stránky, skripty a ďalšie.
MacOS
Ak chcete zobraziť zdrojový kód stránky vo verzii Safari pre počítače, musíte najprv aktivovať jej ponuku Rozvinúť . Nasledujúce kroky vás prevedú aktiváciou skrytej ponuky a zobrazením zdroja HTML stránky.
- Kliknite na položku Safari v ponuke prehliadača umiestnenej v hornej časti obrazovky.
- Keď sa zobrazí rozbaľovacia ponuka, vyberte možnosť Predvoľby .
- Predvoľby Safari by mali byť teraz viditeľné. Kliknite na ikonu Pokročilé , ktorá sa nachádza v pravom hornom rohu horného riadku.
- Do spodnej časti sekcie Rozšírené je možnosť označená možnosť Zobraziť vývoj v lište menu spolu s prázdnym políčkom. Jedným kliknutím na toto políčko začiarknite políčko a zatvorte okno Predvoľby kliknutím na červený znak "x" v ľavom hornom rohu.
- Kliknite na rozbaľovaciu ponuku umiestnenú v hornej časti obrazovky.
- Keď sa zobrazí rozbaľovacia ponuka, vyberte Zobraziť zdroj stránky . Môžete tiež použiť nasledujúcu klávesovú skratku: COMMAND + OPTION + U.
operný
Beží na: Linux, macOS, Windows
Ak chcete zobraziť zdrojový kód z aktívnej webovej stránky v prehliadači Opera, použite nasledujúcu klávesovú skratku: CTRL + U ( COMMAND + OPTION + U na macOS). Ak chcete radšej nahrať zdroj na aktuálnej karte, napíšte nasledujúci text vľavo od adresy URL adresy v paneli s adresou a stlačte kláves Enter : view-source: (tj zdroj zobrazenia: https: // www. ).
Operačná verzia Opera tiež umožňuje zobraziť zdrojový kód HTML, CSS a ďalšie prvky pomocou integrovaných vývojárskych nástrojov . Ak chcete spustiť toto rozhranie, ktoré sa predvolene zobrazí na pravej strane hlavného okna prehliadača, stlačte nasledujúcu klávesovú skratku: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS).
Súbor nástrojov pre vývojárov v službe Opera je tiež dostupný vykonaním nasledujúcich krokov.
- Kliknite na logo opery umiestnené v ľavom hornom rohu okna prehliadača.
- Keď sa zobrazí rozbaľovacia ponuka, umiestnite kurzor myši nad možnosť Viac nástrojov .
- Kliknite na položku Zobraziť ponuku vývojára .
- Opäť kliknite na logo opery.
- Keď sa zobrazí rozbaľovacia ponuka, umiestnite kurzor myši na položku Vývojár .
- Keď sa zobrazí podmenu, kliknite na Nástroje vývojára .
Vivaldi
Existuje niekoľko spôsobov, ako môžete zobraziť zdroj stránky v rámci prehliadača Vivaldi. Najjednoduchší je pomocou klávesovej skratky CTRL + U , ktorá predstavuje kód z aktívnej stránky na novej karte.
Môžete tiež pridať nasledujúci text na prednú stranu adresy URL, ktorá zobrazuje zdrojový kód na súčasnej karte: view-source:. Príkladom toho by bolo zobrazenie-zdroj: http: // www. ,
Ďalšou metódou je prostredníctvom integrovaných nástrojov vývojára prehliadača, prístupných stlačením kombinácie CTRL + SHIFT + I alebo pomocou možnosti Vývojárske nástroje v ponuke Nástroje prehliadača - kliknutím na logo "V" v ľavom hornom rohu. Použitie dev nástrojov umožňuje oveľa hlbšiu analýzu zdroja stránky.