V tomto tutoriáli sa naučíš, ako môžeš prostredníctvom Chrome Developer Tools (DevTools) upravovať HTML štruktúru webovej stránky. Tieto praktické nástroje ti umožňujú sledovať zmeny vo štruktúre a zobrazení svojej webovej stránky v reálnom čase. DevTools poskytujú množstvo funkcií, ktoré uľahčujú vývoj a ladenie webových stránok. V tomto tutoriáli sa špeciálne zameriame na úpravu HTML a DOM (Document Object Model).
Najdôležitejšie poznatky
- Chrome Developer Tools umožňujú rozsiahle manipulácie HTML a DOM.
- Môžeš duplikovať HTML prvky, zmeniť ich text, pridať alebo odstrániť atribúty a dokonca prispôsobiť štýl prvku.
- Tieto zmeny nie sú trvalé a pomáhajú pri testovaní a ladení webových stránok.
Krok za krokom sprievodca
Najprv sa uisti, že máš otvorené Chrome Developer Tools. Môžeš to urobiť pravým kliknutím na webovú stránku a výberom možnosti „Preskúmať“ alebo použitím klávesovej skratky Ctrl + Shift + I (Windows) alebo Cmd + Option + I (Mac).
Duplikovanie prvkov
Na duplikovanie prvku klikni pravým tlačidlom myši na požadovaný prvok v karte Elementy v DevTools a vyber možnosť „Duplikovať prvok“. Tým sa skopíruje celý prvok vrátane všetkých štýlov.
Upravovanie HTML
Môžeš tiež priamo upravovať HTML obsah prvku. Klikni pravým tlačidlom myši na prvok a vyber „Upraviť ako HTML“. Otvorí sa vstupné pole, v ktorom môžeš upraviť HTML kód.
Tu môžeš pridávať viacrozmerný obsah použitím značiek
, aby sa vytvorili zalomenia riadkov.
Pre uloženie zmien len stlač Enter alebo klikni mimo vstupného poľa.
Pridanie a úprava atribútov
Na pridanie alebo úpravu atribútu môžeš jednoducho kliknúť na prvok. Dvakrát klikni na požadovaný atribút, napríklad disabled, a uprav ho priamo.
Pre pridanie nového atribútu klikni pravým tlačidlom myši na prvok a vyber možnosť „Upraviť atribút“. Zadaj nový názov a hodnotu atribútu a potvrď stlačením klávesu Enter.
Odstránenie prvkov
Ak už prvok nepotrebujete, jednoducho ho vymažte. Kliknite pravým tlačidlom myši na prvok a vyberte „Zmazať“. Prvok bude okamžite odstránený z DOM.
Forcovanie štýlu
Vynikajúcou funkciou DevTools je možnosť forcovania stavu Hover prvku. Kliknite pravým tlačidlom myši na prvok a vyberte „Force state“ > „hover“. Tým sa zobrazí efekt Hover, takže môžeš vidieť dopady CSS štýlov.
Kontrola viditeľnosti
Niekedy chceš prvky urobiť neviditeľnými, ale nechceš ich úplne vymazať. Na kontrolu viditeľnosti prvku môžeš kliknúť pravým tlačidlom myši na prvok, vybrať „Skryť prvk“, a prvok bude neviditeľný, ale zostane v DOM.
Body a celá štruktúra
Môžeš tiež pristupovať k prvku Body a robiť zmeny na celej stránke. Ak chceš upraviť obsah tagu Body, stačí vybrať prvok a použiť vyššie opísané techniky.
Upraviť zmeny
Je dôležité si uvedomiť, že všetky zmeny vykonané cez Developer Tools sú dočasné. Keď znovu načítaš stránku, všetky úpravy sa stratia. Preto je odporúčané skopírovať upravený kód a uložiť ho do svojho projektu, ak chceš zachovať zmeny.
Zhrnutie
V tomto tutoriáli si sa naučil, ako môžeš využívať Chrome Developer Tools na úpravu HTML a DOM. Môžeš duplikovať prvky, modifikovať HTML, pridávať a mazať atribúty a riadiť viditeľnosť prvkov. Tieto funkcie sú obzvlášť užitočné pre ladenie a vývoj webových stránok.
Často kladené otázky
Ako môžem otvoriť Chrome Developer Tools?Otvor DevTools pravým kliknutím na stránku a výberom „Skontrolovať“ alebo stlačením Ctrl + Shift + I (Windows) alebo Cmd + Option + I (Mac).
Sú zmeny trvalé?Žiadne zmeny v DevTools nie sú trvalé a stratia sa pri opätovnom načítaní stránky.
Môžem pridať viacero riadkov textu?Áno, použi -Tagy v HTML na vloženie nových riadkov.
Ako odstránim prvok?Klikni pravým tlačidlom myši na prvok a vyber možnosť „Odstrániť“.
Ako nastavím stav Hover?Klikni pravým tlačidlom myši na prvok a vyber „Vynútený stav“ > „hover“, aby si zobrazil efekt Hover.
