V tomto návode vám ukážem, ako efektívne preskúmať a upravovať DOM štruktúru (Document Object Model) webovej stránky pomocou nástrojov Chrome Developer Tools. Záložka Elements je mocný nástroj, ktorý vám pomôže porozumieť HTML kódu stránky, vybrať prvky a meniť ich vlastnosti v reálnom čase. Bez ohľadu na to, či ste web vývojár, dizajnér alebo len zvedavý, toto znalosť je základná pre lepšiu analýzu a úpravu webových stránok.
Najdôležitejšie poznatky
- Nástroje pre vývojárov Chrome ponúkajú rôzne spôsoby, ako preskúmať HTML prvky, analyzovať CSS štýly a vykonávať živé zmeny.
- Ukážem vám, ako vybrať prvky, pochopiť hierarchiu DOM štruktúry a prispôsobiť štylistické vlastnosti.
Krok za krokom sprievodca
Prístup k záložke Elements
Na otvorenie záložky Elements v nástrojoch Chrome Developer Tools jednoducho pravým kliknutím na ľubovoľný prvok na webovej stránke vyberte možnosť "Skontrolovať". Alternatívne môžete použiť klávesovú skratku F12 alebo Ctrl + Shift + I (Windows) resp. Command + Option + I (Mac) na otvorenie nástrojov pre vývojárov.
Výber HTML prvku
Ak chcete preskúmať konkrétny prvok, môžete použiť rýchlu voľbu. Kliknutím na symbol so štvrťovým obdĺžnikom (Vyberte prvok na stránke na jeho preskúmanie) môžete kliknúť priamo na prvky na webovej stránke.
Po kliknutí na prvok sa automaticky zvýrazní v záložke Elements a môžete vidieť hierarchiu DOM štruktúry.
Prezeranie DOM štruktúry
V DOM štruktúre vidíte vnorené prvky. Môžete rozbaľovať a zabaľovať prvky, aby ste sa dozvedeli viac o hierarchii. Je to osobitne užitočné na identifikovanie súvisiacich prvkov a ich vzťahov.
Použitie šípkových klávesov
Užitočnou funkciou je možnosť navigácie smerom hore a dole so šípkovými klávesmi a výber rôznych prvkov v hierarchii. Táto metóda uľahčuje prezeranie hierarchie DOM štruktúry.
Vyhľadávanie konkrétnych prvkov
Pre presné vyhľadávanie určitých obsahov môžete použiť funkciu "Hľadať". Stlačte Ctrl + F (Windows) alebo Command + F (Mac) a zadajte hľadaný výraz. Takto rýchlo nájdete relevantné prvky, ako sú ID alebo triedy.
Kontrola CSS štýlov
Po výbere prvku prejdite do časti Styl na pravej strane záložky Elements. Tu uvidíte všetky CSS pravidlá, ktoré sa používajú na zvolený prvok. Hore uvidíte inline štýly, nasledované externými CSS pravidlami.
Po kliknutí na špecifické CSS pravidlo ste presmerovaní priamo na miesto vo stylesheete, kde je toto pravidlo definované. Tento spôsob je veľmi užitočný na zistenie, odkiaľ pochádzajú určité štýly a ako sú štruktúrované.
Porozumenie prepísaným štýlom
Často sa stáva, že niektoré CSS pravidlá sú prepísané. Rozpoznáte to podľa toho, že sú prečiarknuté. V časti Styl môžete zobraziť oblasť „Computed“, aby ste videli, ktorý štýl sa nakoniec uplatňuje na tento prvok.
Živé úpravy
Môžete jednoducho upravovať hodnoty CSS štýlov. Kliknite na hodnotu, ktorú chcete zmeniť, a zadajte novú hodnotu. Výsledok je okamžite viditeľný. Zmeny môžete tiež vrátiť späť kliknutím na „X“ pri jednotlivých CSS pravidlách.
Použitie konzoly pre JavaScript
Nástroje pre vývojárov ponúkajú aj konzolu, v ktorej môžete spúšťať kód JavaScriptu. Toto je užitočné na vykonávanie dynamických zmien na webovej stránke a testovanie, ako skripty reagujú na rôzne prvky.
Súhrn
V tomto tutoriáli ste sa naučili, ako efektívne využívať nástroje Chrome Developer Tools na inšpekciu DOM štruktúry webovej stránky. Okrem toho ste sa dozvedeli, ako vyberať prvky, analyzovať CSS štýly a vykonávať zmeny v reálnom čase. S týmito schopnosťami môžete výrazne zlepšiť svoj vývoj a dizajn webových stránok.
