Ako zobraziť zdroj HTML v prehliadači Google Chrome


Či už ste webový dizajnér, ktorý ladí zdrojový kód svojich stránok, alebo vás len zaujíma, ako kód stránok vyzerá, zdroj HTML si môžete zobraziť priamo v prehliadači Google Chrome. Existujú dva spôsoby zobrazenia zdroja HTML: Zobraziť zdroj a Skontrolovať pomocou nástrojov pre vývojárov.

Zobraziť zdroj pomocou Zobraziť zdrojový kód stránky

Spustite prehliadač Chrome a prejdite na webovú stránku, na ktorej chcete zobraziť zdrojový kód HTML. Kliknite pravým tlačidlom myši na stránku a kliknite na „Zobraziť zdrojový kód stránky“ alebo stlačte Ctrl + U, aby ste videli zdroj stránky na novej karte.

Otvorí sa nová karta spolu so všetkým kódom HTML webovej stránky, úplne rozbaleným a neformátovaným.

Ak hľadáte konkrétny prvok alebo časť v zdrojovom kóde HTML, používanie zobrazenia zdroja je únavné a ťažkopádne, najmä ak stránka používa veľa JavaScriptu a CSS.

Skontrolujte zdroj pomocou nástrojov pre vývojárov

Táto metóda využíva panel Vývojárske nástroje v prehliadači Chrome a predstavuje oveľa čistejší prístup na zobrazenie zdrojového kódu. HTML sa tu ľahšie číta vďaka dodatočnému formátovaniu a možnosti zbaliť prvky, ktoré vás nezaujímajú.

Otvorte prehliadač Chrome a prejdite na stránku, ktorú chcete skontrolovať; potom stlačte Ctrl + Shift + i. Vedľa webovej stránky, ktorú si prezeráte, sa otvorí ukotvená tabla.

Kliknutím na malú sivú šípku vedľa prvku ho ešte viac rozbalíte.

Ak v predvolenom nastavení nechcete vidieť celý kód stránky, ale namiesto toho skontrolovať konkrétny prvok v HTML, kliknite pravým tlačidlom myši na toto miesto na stránke a potom kliknite na „Skontrolovať“.

Keď sa panel tentoraz otvorí, prejde priamo na časť kódu, ktorá obsahuje prvok, na ktorý ste klikli.

Ak chcete zmeniť polohu doku, môžete ho presunúť dole, doľava, doprava alebo ho dokonca odpojiť do samostatného okna. Kliknite na ikonu ponuky (tri bodky), potom vyberte buď odpojiť do samostatného okna, ukotviť vľavo, ukotviť dole alebo ukotviť vpravo.

To je všetko. Keď skončíte s prezeraním kódu, zatvorte kartu Zobraziť zdroj alebo kliknite na „X“ na table Nástroje pre vývojárov a vráťte sa na svoju webovú stránku.