Pozrite si HTML a CSS na ľubovoľnej webovej stránke
Webová stránka je zostavená s riadkami kódu , ale výsledkom sú konkrétne stránky s obrázkami, video, písma a ďalšie. Ak chcete zmeniť jeden z týchto prvkov alebo zistiť, z čoho sa skladá, musíte nájsť konkrétny riadok kódu, ktorý ho ovláda. Môžete to urobiť pomocou nástroja kontroly prvkov.
Väčšina webových prehliadačov neumožňuje prevziať kontrolný nástroj alebo nainštalovať doplnok. Namiesto toho vám umožňujú kliknúť pravým tlačidlom myši na prvok stránky a zvoliť možnosť Kontrola alebo kontrola elementu . Tento proces sa však môže vo vašom prehliadači trochu líšiť.
Skontrolujte prvky v prehliadači Chrome
Najnovšie verzie prehliadača Google Chrome umožňujú inšpekciu stránky niekoľkými spôsobmi, z ktorých všetky používajú vstavané prehliadače Chrome DevTools:
- Kliknite pravým tlačidlom myši na niečo na stránke (alebo na prázdnu oblasť) a vyberte položku Kontrola
- Zadajte klávesovú skratku Ctrl + Shift + I
- Pomocou ponuky Chrome otvoríte možnosť Viac nástrojov> Nástroje pre vývojárov
Aplikácia Chrome DevTools vám umožňuje jednoducho kopírovať alebo upravovať riadky HTML alebo celkom skryť alebo odstrániť prvky (kým sa stránka znovu načíta).
Po otvorení aplikácie DevTools na bočnej strane stránky môžete zmeniť miesto jej umiestnenia, rozbaliť ju zo stránky, vyhľadať všetky súbory stránky, vybrať prvky zo stránky na konkrétne preskúmanie, kopírovať súbory a adresy URL a dokonca prispôsobiť bunku nastavení.
Skontrolujte prvky vo Firefoxe
Podobne ako prehliadač Chrome, Firefox má niekoľko rôznych spôsobov, ako otvoriť nástroj s názvom Inspector:
- Kliknite pravým tlačidlom myši na prázdne miesto na stránke alebo vyberte prvok a vyberte položku Inspect Element
- Zadajte klávesy Ctrl + Shift + T alebo Ctrl + Shift + I
- V ponuke Firefox kliknite na položku Vývojár > Inšpektor
- V ponuke Nástroje kliknite na položku Webový vývojár> Inšpektor
Pri pohybe myši nad rôznymi prvkami vo Firefoxe nástroj Inšpektor automaticky nájde informácie o zdrojovom kóde prvku. Kliknite na prvok a zastaví sa vyhľadávanie "on-the-fly" a môžete preskúmať prvok z okna Inspector.
Kliknite pravým tlačidlom myši na prvok a vyhľadajte všetky podporované ovládacie prvky. Môžete robiť veci, ako je úprava stránky ako HTML, kopírovanie alebo vloženie vnútorného alebo vonkajšieho HTML kódu, zobrazovanie vlastností DOM, screenshot alebo vymazanie uzla, jednoduché používanie nových atribútov, zobrazenie všetkých CSS stránok a ďalšie.
Skontrolujte prvky v službe Opera
Opera môže tiež skontrolovať prvky s nástrojom DOM Inspector, ktorý je identický s prehliadačom Chrome. Tu je postup, ako sa k tomu dostať:
- Použite klávesovú skratku Ctrl + Shift + I
- Prejdite do ponuky Ponuka> Ďalšie nástroje> Zobraziť ponuku vývojára a potom otvorte ponuku v ponuke Menu> Vývojár> Nástroje vývojára
- V pravom menu kliknite na ľubovoľný prvok na stránke, vyberte položku Inspect
Skontrolujte prvky v programe Internet Explorer
Podobný nástroj inšpekčných prvkov nazývaný Vývojárske nástroje je k dispozícii v programe Internet Explorer:
- Stlačte kláves F12 na klávesnici
- Použite možnosť Nástroje> F12 Vývojárske menu (stlačte Alt + X, ak nevidíte ponuku Nástroje )
- Kliknite pravým tlačidlom myši na stránku a kliknite na položku Inspect Element
IE má v tomto novom menu nástroj Vybrať prvok, ktorý vám umožní kliknúť na ľubovoľný prvok stránky a zobraziť jeho podrobnosti o HTML a CSS. Môžete tiež ľahko deaktivovať / zapnúť zvýrazňovanie prvkov pri prechádzaní cez kartu prehliadača DOM .
Rovnako ako ostatné nástroje inšpektora prvkov vo vyššie uvedených prehliadačoch vám aplikácia Internet Explorer umožňuje vyrezať, kopírovať a prilepiť prvky, upravovať HTML, pridať atribúty, kopírovať prvky so štýlmi pripojenými a ďalšie.