Ať už jste profesionál v oblasti webdesignu, který se ponořuje do detailů zdrojového kódu, nebo jen zvědavý uživatel, který chce nahlédnout pod pokličku webové stránky, Google Chrome vám nabízí několik možností, jak zobrazit HTML kód. Existují dva hlavní způsoby, jak si prohlédnout zdrojový kód: pomocí funkce „Zobrazit zdrojový kód stránky“ a s využitím „Nástrojů pro vývojáře“.
Zobrazení zdrojového kódu pomocí funkce „Zobrazit zdrojový kód stránky“
Spusťte prohlížeč Chrome a navigujte na webovou stránku, jejíž HTML kód chcete zobrazit. Poté klikněte pravým tlačítkem myši kdekoli na stránce a z kontextového menu vyberte možnost „Zobrazit zdrojový kód stránky“. Alternativně můžete použít klávesovou zkratku Ctrl + U. Tím se vám otevře nová záložka s kompletním zdrojovým kódem stránky, bez jakéhokoliv formátování.
Zobrazí se nová karta s veškerým HTML kódem dané webové stránky v neupravené podobě.
Pokud hledáte konkrétní element nebo část v HTML kódu, může být použití funkce „Zobrazit zdrojový kód stránky“ poněkud zdlouhavé a neefektivní, zvláště pokud webová stránka používá velké množství JavaScriptu a CSS.
Zkoumání zdrojového kódu pomocí Nástrojů pro vývojáře
Tato metoda, která využívá Nástroje pro vývojáře v prohlížeči Chrome, nabízí mnohem přehlednější a efektivnější způsob, jak prohlížet zdrojový kód. HTML kód je zde lépe čitelný díky dodatečnému formátování a možnosti sbalovat jednotlivé elementy, které vás momentálně nezajímají.
Otevřete Chrome a přejděte na stránku, kterou chcete prozkoumat; následně stiskněte klávesovou zkratku Ctrl + Shift + i. Tímto se vám vedle zobrazené webové stránky objeví ukotvený panel s Nástroji pro vývojáře.
Rozbalit jednotlivé elementy můžete kliknutím na šedou šipku vedle nich.
Pokud nechcete zobrazit celý kód stránky, ale zaměřit se na konkrétní element, klikněte pravým tlačítkem myši na dané místo na stránce a z kontextového menu vyberte možnost „Prozkoumat“.
V takovém případě se okno s Nástroji pro vývojáře otevře přímo v části kódu, která odpovídá elementu, na který jste klikli.
Umístění doku s Nástroji pro vývojáře si můžete přizpůsobit – můžete jej umístit dolů, doleva, doprava, nebo jej dokonce oddělit do samostatného okna. Klikněte na ikonu nabídky (tři tečky) a zvolte požadované umístění.
To je vše. Jakmile si prohlédnete kód, můžete zavřít záložku „Zobrazit zdrojový kód stránky“, nebo kliknutím na „X“ v podokně Nástrojů pro vývojáře vrátit se zpět na webovou stránku.