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 ( COMMAND + 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 stisknutím klávesy Enter : view-source: (tj. Zdroj: https: // www .).
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 ( COMMAND + OPTION + I na macOS). Můžete je také spustit podle následující cesty.
- Klikněte na tlačítko hlavního menu Chrome umístěné v pravém horním rohu a představují tři vertikálně zarovnávané body.
- Když se objeví rozbalovací nabídka, umístěte kurzor myši na možnost Více nástrojů .
- Po zobrazení podnabídky klikněte na Nástroje pro vývojáře .
Android
Prohlížení zdroje webové stránky v Chromu 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 může být zobrazení-zdroj: https: // www. . 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ě zobrazení 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é údaje.
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 dáte přednost myši, klikněte na tlačítko nabídky Edge (tři tečky umístěné v pravém horním rohu) a vyberte ze seznamu položku Nástroje pro vývojáře F12 .
Po prvním spuštění nástrojů dev Edge přidá dvě další volby do kontextového menu prohlížeče (přístupné klepnutím pravým tlačítkem kdekoliv v rámci webové stránky): Inspect element a View zdroj , který otevře Debugger část dev nástrojové rozhraní naplněné zdrojovým kódem.
Mozilla Firefox
Běží na: Linux, macOS, Windows
Chcete-li zobrazit zdrojový kód stránky ve verzi pro stolní počítače Firefoxu, můžete stisknout CTRL + U ( COMMAND + U na macOS) na klávesnici, čímž otevřete novou záložku obsahující HTML a jiný kód pro aktivní webovou stránku.
Zadání následujícího textu do adresního řádku prohlížeče Firefox přímo na levé straně URL adresy způsobí, že stejný zdroj se bude zobrazovat na aktuální kartě místo: view-source: (tj. View-source: https: // www) .
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.
- Klikněte na tlačítko hlavního menu, 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í vyskakovací nabídka, klikněte na ikonu Vývojář "klíče".
- Kontextové menu Web Developer by nyní mělo být viditelné. Vyberte možnost Zdroj stránky .
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 klepněte pravým tlačítkem myši a v kontextové nabídce prohlížeče vyberte možnost Zobrazit zdroj výběru .
Android
Prohlížení zdrojového kódu ve verzi systému Firefox pro systém Android je dosažitelné předponou adresy URL webové stránky s následujícím textem: view-source:. Chcete-li například zobrazit zdroj HTML, odešlete následující text do adresního řádku prohlížeče: view-source: https: // www. .
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
Ačkoli aplikace Safari pro systém iOS neobsahuje možnost zobrazení výchozího zdroje stránky, prohlížeč se spíše integruje s aplikací View Source - dostupná v App Store 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 tlačítko Zobrazit zdroj .
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 nejprve aktivovat nabídku Vývoj . Níže uvedené kroky procházejí aktivací tohoto skrytého menu a zobrazením zdroje HTML stránky.
- Klikněte na Safari v nabídce prohlížeče umístěném v horní části obrazovky.
- Když se zobrazí rozbalovací nabídka, vyberte možnost Předvolby .
- Předvolby Safari by měly být nyní viditelné. Klikněte na ikonu Pokročilé , umístěné na pravé straně horního řádku.
- Ve spodní části sekce Upřesnit je v nabídce zobrazena možnost Zobrazit nabídku Vývoj , doplněná prázdným zaškrtávacím políčkem. Jedním kliknutím zaškrtněte toto políčko a zavřete okno Předvolby kliknutím na červenou značku "x" v levém horním rohu.
- Klikněte na nabídku Vývoj , která se nachází v horní části obrazovky.
- Když se zobrazí rozevírací nabídka, vyberte Zobrazit zdroj stránky . Můžete také použít následující klávesovou zkratku: COMMAND + OPTION + U.
Opera
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ávesové zkratky: CTRL + U ( COMMAND + 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 adresním řádku a stiskněte klávesu Enter : view-source: (viz zdroj: https: // www. ).
Operační verze operačního systému Windows 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í na pravé straně hlavního okna prohlížeče, stiskněte následující klávesovou zkratku: CTRL + SHIFT + I ( COMMAND + OPTION + I na macOS).
Sada nástrojů pro vývojáře společnosti Opera je rovněž přístupná následujícími kroky.
- Klikněte na logo opery umístěné v levém horním rohu okna prohlížeče.
- Když se objeví rozbalovací nabídka, umístěte kurzor myši na možnost Více nástrojů .
- Klikněte na nabídku Zobrazit nabídku vývojářů .
- Klikněte znovu na logo opery.
- Když se zobrazí rozbalovací nabídka, umístěte kurzor myši na položku Vývojář .
- Když se zobrazí podnabídka, klikněte na Nástroje pro vývojáře .
Vivaldi
Existuje několik způsobů, jak zobrazit zdroj stránky v prohlížeči Vivaldi. Nejjednodušší je pomocí klávesové zkratky CTRL + U , 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 může být pohled-source: http: // www. .
Další metodou je prostřednictvím integrovaných nástrojů pro vývojáře prohlížeče, které jsou přístupné stiskem kombinace CTRL + SHIFT + I nebo pomocí volby Nástroje pro vývojáře v nabídce Nástroje v prohlížeči - klepnutím na logo "V" v levém horním rohu. Použití nástrojů dev umožňuje mnohem podrobnější analýzu zdroje stránky.