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 stolné 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 výberom vstúpiť key: Zdroj pohladu: (t.j. zdroj zobrazenia: https: //www.Go-Travels.com).
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 je možné otvoriť a zatvoriť pomocou tejto klávesovej skratky: CTRL + SHIFT + I (COMMAND + OPTION + I na macOS). Môžete ich spustiť aj nasledujúcou cestou.
-
Vyberte tlačidlo hlavného menu Chrome, ktoré sa nachádza v pravom hornom rohu a predstavuje tri vertikálne zarovnané body.
-
Keď sa zobrazí rolovacia ponuka, umiestnite kurzor myši nad Ďalšie nástroje voľba.
-
Keď sa zobrazí podmenu, vyberte položku Nástroje pre vývojárov.
Android
Zobrazenie zdroja webovej stránky v prehliadači Chrome pre Android je jednoduché ako pripojenie nasledujúceho textu na prednú adresu jeho adresy (alebo adresy URL) a jeho odoslanie: Zdroj pohladu:, Príkladom toho by bolo Pohľad-source: https: //www.Go-Travels.com , 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é stránky, objektový dokument (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 Nástroje vývojára F12 v zozname.
Po prvom spustení dev nástrojov pridá Edge do kontextového menu prehliadača ďalšie dve možnosti (dostupné kliknutím pravým tlačidlom myši kdekoľvek na webovej stránke): Preskúmať prvok a Zdroj pohladu, ktorý druhý otvorí ladiaci časť rozhrania dev nástrojov naplnených zdrojovým kódom.
Mozilla Firefox
Beží na: Linux, macOS, Windows
Ak chcete zobraziť zdrojový kód stránky vo verzii prehliadača Firefox, môžete stlačiť CTRL + U (COMMAND + U na macOS) na klávesnici, čo otvorí novú kartu obsahujúcu 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 pohladu: ( t.j. zdroj zobrazenia: https: //www.dotdash.com ).
Ď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.
-
Vyberte hlavné tlačidlo, 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 vývojka ikona kľúča.
-
Kontextové menu aplikácie Web Developer by malo byť teraz viditeľné. Vyberte položku Zdroj stránky voľba.
Firefox vám tiež umožňuje prezerať zdrojový kód pre určitú č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 a vyberte Zobraziť zdroj výberu z kontextového menu prehliadača.
Android
Prezeranie zdrojového kódu vo verzii prehliadača pre systém Android je možné dosiahnuť predponou adresy URL webovej stránky s nasledujúcim textom: Zdroj pohladu:, Ak napríklad chcete zobraziť zdrojový kód HTML pre Dotdash, v paneli s adresou prehliadača zadajte nasledujúci text: Pohľad-source: https: //www.dotdash.com .
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ť prezerať zdrojovú stránku v predvolenom nastavení, prehliadač sa skôr integruje do aplikácie View Source, ktorá je k dispozícii v aplikácii App Store 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 položku Zdroj pohladu Tlačidlo.
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 vo verzii pre počítače, musíte ju najskôr povoliť vypracovať Ponuka. Nasledujúce kroky vás prevedú aktiváciou skrytej ponuky a zobrazením zdroja HTML stránky.
-
vybrať safari v ponuke prehliadača umiestnenej v hornej časti obrazovky.
-
Keď sa zobrazí rozbaľovacia ponuka, vyberte položku Preferencie voľba.
-
Predvoľby Safari by mali byť teraz viditeľné. Klikni na pokročilý ikona, ktorá sa nachádza na pravom okraji najvyššieho radu.
-
V spodnej časti sekcie Rozšírené je označená možnosť Na paneli s ponukami zobrazte položku Vývoj, spolu s prázdnym políčkom. Začiarknite toto políčko a začiarknite políčko a kliknite na červené "x" v ľavom hornom rohu.
-
Vyberte položku vypracovať menu, ktoré sa nachádza v hornej časti obrazovky.
-
Keď sa zobrazí rozbaľovacia ponuka, vyberte položku 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 nahrať zdroj na aktuálnej karte, napíšte nasledujúci text vľavo od adresy URL stránky v paneli s adresou a stlačte Zadajte: view-source: ( t.j. zdroj zobrazenia: https: //www.Go-Travels.com ).
Operačná verzia programu 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.
-
Vyberte logo Opera, ktoré sa nachádza v ľavom hornom rohu okna prehliadača.
-
Keď sa zobrazí rolovacia ponuka, umiestnite kurzor myši nad Ďalšie nástroje voľba.
-
Kliknite na Zobraziť ponuku vývojára.
-
Opäť vyberte logo opery.
-
Keď sa zobrazí rozbaľovacia ponuka, umiestnite kurzor nad kurzor vývojka.
-
Keď sa zobrazí podmenu, vyberte položku Nástroje pre vývojárov.
Vivaldi
Existuje niekoľko spôsobov, ako zobraziť zdroj stránky v rámci prehliadača Vivaldi. Najjednoduchšie je cez CTRL + U klávesová skratka, ktorá zobrazuje 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: Zdroj pohladu:, Príkladom toho by bolo Pohľad-source: http: //www.dotdash.com .
Ďalšou metódou je integrované nástroje vývojára prehliadača, prístupné stlačením tlačidla CTRL + SHIFT + I kombináciou alebo prostredníctvom Nástroje pre vývojárov v prehliadači náradie menu - nájdený výberom V logo v ľavom hornom rohu. Použitie dev nástrojov umožňuje oveľa hlbšiu analýzu zdroja stránky.
