Webová stránka, kterou čtete, je tvořena mimo jiné zdrojovým kódem. To jsou informace, které váš webový prohlížeč stáhne a překládá do toho, co právě čtete.
Většina webových prohlížečů poskytuje možnost vidět zdrojový kód webové stránky bez nutnosti dalšího softwaru bez ohledu na to, na jakém typu zařízení se nacházíte.
Některé dokonce nabízejí pokročilé funkce a strukturu, což usnadňuje prohlížení HTML a dalšího programového kódu na stránce.
Proč byste chtěli vidět zdrojový kód?
Existuje několik důvodů, proč možná budete chtít vidět zdrojový kód stránky. Pokud jste webový vývojář, možná byste chtěli nahlédnout pod kryty jiným stylem nebo implementací jiného programátora. Možná jste v zajištění kvality a snažíte se zjistit, proč určitá část webové stránky vykresluje nebo se chová způsobem, jakým je.
Mohli byste být také začátečník, který se snaží naučit se kódovat své vlastní stránky a hledat některé příklady z reálného světa. Samozřejmě, že je možné, že nepatříte do žádné z těchto kategorií a prostě chcete vidět zdroj z pouhé zvědavosti.
Níže jsou uvedeny pokyny pro zobrazení zdrojového kódu ve vašem prohlížeči.
Google Chrome
Běží na: Chrome OS, Linux, MacOS, Windows
Verze stolního počítače Chrome nabízí tři různé způsoby zobrazení zdrojového kódu stránky, první a nejjednodušší pomocí následující klávesové zkratky: CTRL + U (PŘÍKAZ + OPTION + U na macOS).
Po stisknutí této klávesy se otevře nová záložka prohlížeče, která zobrazuje kód HTML a další kód aktivní stránky. Tento zdroj je barevně kódován a strukturován způsobem, který usnadňuje rozdělování a nalezení toho, co hledáte. Můžete se také dostat zadáním následujícího textu do adresního řádku prohlížeče Chrome, který je připojen k levému okraji adresy URL webové stránky, a vyberete Zadejte klíč: view-source: (tj. zdroj zobrazení: https: //www.Go-Travels.com).
Třetí metodou je vývojářské nástroje prohlížeče Chrome, které vám umožňují hlouběji se ponořit do kódu stránky a také jej vylepšit za účelem testování a vývoje. Rozhraní nástrojů pro vývojáře lze otevřít a zavřít pomocí této klávesové zkratky: CTRL + SHIFT + I (PŘÍKAZ + OPTION + I na macOS). Můžete je také spustit podle následující cesty.
-
Vyberte hlavní tlačítko nabídky Chrome umístěné v pravém horním rohu a představují tři vertikálně zarovnávané body.
-
Když se zobrazí rozbalovací nabídka, umístěte kurzor myši nad Více nástrojů volba.
-
Když se zobrazí podnabídka, vyberte možnost Vývojářské nástroje.
Android
Prohlížení zdroje webové stránky v prohlížeči Chrome pro Android je stejně jednoduché jako přidání následujícího textu na přední stranu jeho adresy (nebo adresy URL) a jeho odeslání: view-source:. Příkladem toho by bylo view-source: https: //www.Go-Travels.com . HTML a další kód z dotyčné stránky budou okamžitě zobrazeny v aktivním okně.
iOS
Zatímco neexistují žádné nativní metody pro prohlížení zdrojového kódu pomocí Chromu v zařízeních iPad, iPhone nebo iPod touch, nejjednodušší a nejúčinnější je použít řešení třetí strany, jako je například aplikace View Source.
K dispozici pro $ 0.99 v App Store, View Source vás vyzve, abyste zadali adresu URL stránky (nebo ji zkopírujte / vložte z adresního řádku prohlížeče Chrome, což je někdy nejjednodušší cesta) a to je vše. Kromě zobrazování kódu HTML a jiného zdrojového kódu má aplikace také záložky, které zobrazují jednotlivé položky stránek, objektový model dokumentu (DOM), velikost stránky, soubory cookie a další zajímavé podrobnosti.
Microsoft Edge
Běží na: Windows
Prohlížeč Edge umožňuje zobrazit, analyzovat a dokonce manipulovat se zdrojovým kódem aktuální stránky prostřednictvím rozhraní Nástroje pro vývojáře. Chcete-li získat přístup k této šikovné sadě nástrojů, můžete použít jednu z těchto klávesových zkratek: F12 nebo CTRL + U. Pokud byste preferovali myš, klikněte na tlačítko nabídky Edge (tři tečky umístěné v pravém horním rohu) a vyberte Vývojářské nástroje F12 v seznamu.
Po prvním spuštění nástrojů dev Edge přidá do kontextového menu prohlížeče dvě další možnosti (přístupné klepnutím pravým tlačítkem kdekoli v rámci webové stránky): Zkontrolujte prvek a Zobrazit zdroj, který druhý otevírá Debugger část rozhraní dev nástrojů se zdrojovým kódem.
Mozilla Firefox
Běží na: Linux, macOS, Windows
Chcete-li zobrazit zdrojový kód stránky ve verzi počítače Firefox, stiskněte tlačítko CTRL + U (COMMAND + U na macOS) na klávesnici, která otevře novou záložku obsahující HTML a další kód pro aktivní webovou stránku.
Zadáním následujícího textu do adresního řádku aplikace Firefox přímo vlevo od adresy URL se zobrazí stejný zdroj na aktuální kartě: view-source: ( tj. zdroj zobrazení: https: //www.dotdash.com ).
Dalším způsobem, jak přistupovat k zdrojovému kódu stránky, je prostřednictvím nástrojů pro vývojáře Firefoxu, který je přístupný následujícími kroky.
-
Vyberte hlavní tlačítko nabídky, které se nachází v pravém horním rohu okna prohlížeče a představuje tři horizontální čáry.
-
Když se objeví rozbalovací nabídka, klikněte na tlačítko Vývojář ikona "klíč".
-
Kontextové menu Web Developer by nyní mělo být viditelné. Vybrat Zdroj stránky volba.
Firefox také umožňuje zobrazit zdrojový kód konkrétní části stránky, což usnadňuje izolování problémů. Chcete-li tak učinit, nejprve zvýrazněte oblast, o kterou vás zajímá myš. Dále klikněte pravým tlačítkem myši a vyberte Zobrazit zdroj výběru z kontextového menu prohlížeče.
Android
Prohlížení zdrojového kódu ve verzi systému Firefox pro systém Android je dosažitelné předponou URL adresy webové stránky s následujícím textem: view-source:. Chcete-li například zobrazit zdroj HTML pro Dotdash, odešlete následující text do adresního řádku prohlížeče: view-source: https: //www.dotdash.com .
iOS
Doporučená metoda pro prohlížení zdrojového kódu webové stránky na vašem iPadu, iPhone nebo iPod touch je prostřednictvím aplikace View Source, která je v App Store k dispozici za 0,99 Kč. I když není přímo integrován do prohlížeče Firefox, můžete jednoduše zkopírovat a vložit adresu URL z prohlížeče do aplikace, aby bylo možné odhalit kód HTML a další kód přidružený k dané stránce.
Apple Safari
Spouštění v systémech iOS a macOS
iOS
Přestože služba Safari pro systém iOS neobsahuje možnost zobrazení zdroje stránky ve výchozím nastavení, prohlížeč se spíše integruje s aplikací View Source, která je v App Store k dispozici za 0,99 Kč.
Po instalaci této aplikace třetí strany se vraťte do prohlížeče Safari a klepněte na tlačítko Share, které se nachází v dolní části obrazovky a představuje čtvereček a šipku nahoru. IOS Share Sheet by nyní měl být viditelný, překrývat spodní polovinu okna Safari. Přejděte doprava a vyberte možnost Zobrazit zdroj tlačítko.
Bude se nyní zobrazovat barevné kódované strukturované znázornění zdrojového kódu aktivní stránky spolu s dalšími kartami, které vám umožní zobrazit stránky, skripty a další.
Operační Systém Mac
Chcete-li zobrazit zdrojový kód stránky ve verzi Safari pro stolní počítače, musíte ji nejprve povolit Rozvíjet Jídelní lístek. Níže uvedené kroky procházejí aktivací tohoto skrytého menu a zobrazením zdroje HTML stránky.
-
Vybrat Safari v nabídce prohlížeče umístěném v horní části obrazovky.
-
Když se zobrazí rozevírací nabídka, vyberte možnost Předvolby volba.
-
Předvolby Safari by měly být nyní viditelné. Klikněte na tlačítko Pokročilý ikonu, která se nachází na pravé straně horního řádku.
-
Ve spodní části sekce Upřesnit je označena možnost Zobrazte nabídku Vývoj v panelu nabídek, spolu s prázdným políčkem. Zaškrtněte toto políčko jednou a vložte zaškrtávací políčko a zavřete okno Předvolby kliknutím na červenou značku "x" v levém horním rohu.
-
Vybrat Rozvíjet v horní části obrazovky.
-
Když se zobrazí rozevírací nabídka, vyberte možnost Zobrazit zdroj stránky. Můžete také použít následující klávesovou zkratku: PŘÍKAZ + OPTION + U.
Operní
Běží na: Linux, macOS, Windows
Chcete-li zobrazit zdrojový kód z aktivní webové stránky v prohlížeči Opera, použijte následující klávesovou zkratku: CTRL + U (PŘÍKAZ + OPTION + U na macOS). Pokud preferujete místo toho načíst zdroj na aktuální kartě, zadejte následující text vlevo od adresy URL stránky v panelu s adresou a stiskněte Zadejte: view-source: ( tj. zdroj zobrazení: https: //www.Go-Travels.com ).
Operativní verze aplikace Opera také umožňuje prohlížet zdrojový kód HTML, CSS a další prvky pomocí integrovaných nástrojů pro vývojáře. Chcete-li spustit toto rozhraní, které se ve výchozím nastavení zobrazí v pravé části hlavního okna prohlížeče, stiskněte následující klávesovou zkratku: CTRL + SHIFT + I (PŘÍKAZ + OPTION + I na macOS).
Sada nástrojů pro vývojáře společnosti Opera je rovněž přístupná následujícími kroky.
-
Vyberte logo opery umístěné v levém horním rohu okna prohlížeče.
-
Když se zobrazí rozbalovací nabídka, umístěte kurzor myši nad Více nástrojů volba.
-
Klikněte na Zobrazit nabídku vývojáře.
-
Znovu vyberte logo opery.
-
Když se objeví rozbalovací nabídka, umístěte kurzor myši nad kurzorem Vývojář.
-
Když se zobrazí podnabídka, vyberte možnost Vývojářské nástroje.
Vivaldi
Existuje několik způsobů, jak zobrazit zdroj stránky v prohlížeči Vivaldi. Nejjednodušší je přes CTRL + U klávesová zkratka, která představuje kód z aktivní stránky na nové kartě.
Na přední stranu adresy URL můžete také přidat následující text, který zobrazuje zdrojový kód na aktuální kartě: view-source:. Příkladem toho by bylo pohled-zdroj: http: //www.dotdash.com .
Další metodou je integrované vývojářské nástroje prohlížeče, přístupné stisknutím tlačítka CTRL + SHIFT + I kombinací nebo prostřednictvím Vývojářské nástroje v prohlížeči Nástroje menu - najděte výběrem položky PROTI logo v levém horním rohu. Použití nástrojů dev umožňuje mnohem podrobnější analýzu zdroje stránky.
