Máte otázku, ako zobraziť zdrojový kód vizuálneho prvku v počítači Chromebook? Môžete na to použiť špeciálne nástroje DevTools v aplikácii Google Chrome alebo na ľubovoľnej stránke prehliadača. DevTools je zoznam špeciálnych vývojárskych nástrojov, ktoré sú zabudované v prehliadači Google Chrome. Používateľom umožňuje upravovať stránky na cestách a sledovať prípadné problémy.
Ako používať Inspect Element v počítači Chromebook
Pre Chromebooky je predvoleným prehliadačom Google, na otvorenie vývojárskych nástrojov na tomto zariadení potrebujete.
- Otvorte požadovanú stránku
- Kliknite na 3 bodky v pravom hornom rohu aplikácie
- Vyberte položku “Ďalšie nástroje“
- Kliknite na položku “Nástroje pre vývojárov”.
Alternatívne spôsoby prístupu k tejto funkcii sú stlačenie tlačidla F12 alebo kliknutie pravým tlačidlom myši na požadovanú položku
Ide o univerzálny pokyn, ktorý platí pre väčšinu prehliadačov v systéme Windows alebo v akomkoľvek inom systéme.
Ako používať Inspect Element v počítači Mac alebo Iphone
Je možné urobiť to isté pomocou počítača Mac alebo dokonca iPhonu? Stačí, ak budete postupovať podľa niekoľkých jednoduchých krokov uvedených nižšie:
Ako ju používať v počítači Mac
Ak máte Mac, najlepším prehliadačom je Safari. Otvorenie nástrojov pre vývojárov v tomto prehliadači sa mierne líši od rovnakého postupu v prehliadači Chrome alebo Firefox. Budete musieť:
- Otvorte prehliadač
- Kliknite na názov karty Safari
- Vyberte položku “Predvoľby“.
- Potom kliknite na ikonu rozšíreného ozubeného kolesa, ktorá sa nachádza v hornej časti obrazovky.
- Začiarknite políčko vedľa položky Zobraziť ponuku Vyvolať v paneli ponúk
Keď to urobíte, na vašich webových stránkach bude k dispozícii prvok Inspect. Môžete ho tiež vyvolať pomocou klávesovej skratky CMD + Option + I.
Ako ju používať v zariadení iPhone
Ak chcete skontrolovať, ako vyzerá mobilná verzia webovej stránky na iPhone pomocou funkcie Inspect Elements, musíte najprv povoliť Web Inspector pre svoje zariadenie iOS:
- Prejdite do Nastavení
- Vyberte aplikáciu Safari
- Prejdite na spodnú časť a kliknite na položku “Rozšírené menu”.
- Teraz začiarknite políčko vedľa položky “Webový inšpektor”.
Na Macu musíte tiež povoliť ponuku pre vývojárov podľa vyššie uvedených pokynov. Po povolení týchto funkcií na zariadení iOS a Macu by ste mali v hornej časti Macu vidieť ponuku Developer. Musíte na ňu kliknúť, aby sa zobrazil pripojený iPhone a na ňom otvorená webová stránka. Keď sa prepnete na inú stránku, prepnete aj okno Web Inspector pre túto stránku na vašom Macu
Čo je to panel Elemental
V prvom rade je potrebné vedieť, čo je to panel prvkov. Ak chcete zmeniť dizajn alebo akékoľvek externé prvky stránky, musíte upraviť CSS alebo HTML. Môžete to urobiť pomocou vývojárskeho nástroja s názvom Panel prvkov. Umožní vám skontrolovať a zmeniť stránku z prednej časti. Niektoré z prvkov, ktoré tam môžete vidieť, sú :
- Informácie o obrázku, napríklad jeho veľkosť a zdroj.
- Panel CSS – táto možnosť sa používa na zmenu vonkajšieho štýlu stránky. Môžete tu zmeniť parametre, ako sú písma, veľkosti, farby
- Informácie DOM alebo panel DOM Pomocou tejto možnosti môžete ovládať vzhľad stránky. Môžete meniť pozíciu prvkov a plne prechádzať do súborov HTML
- Panel konzoly predstavuje nové funkcie v rámci nástrojov pre vývojárov
- Poslucháči udalostí prvkov
- Komentáre HTML
- Spätná väzba
Kontrola vykreslenej a prirodzenej veľkosti obrázka
Veľmi často potrebujete zistiť informácie o obrázku na webovej stránke, môžete ho “skontrolovať”. Vďaka tomu môžete zistiť napríklad veľkosť obrázka. Ak to chcete urobiť, musíte na daný IMG umiestniť kurzor myši, keď sa nachádzate v strome DOM
Kontrola konkrétneho použitého obrázka zo zdrojovej sady (srcset)
Potom môžete skontrolovať, aká verzia obrázka bola načítaná a aký je presný zdroj srcset. Zdroj srcset pomôže prehliadaču vyžiadať verziu obrázka s najmenšou veľkosťou, ktorá je o niečo väčšia ako skutočný obrázok. To sa používa na zobrazenie sady obrázkov s rôznymi rozlíšeniami, z ktorých si prehliadač môže vybrať. Najprv vyberte položku IMG a potom skontrolujte informáciu $0.currentSrc v konzole. Upozorňujeme, že vlastnosti obrázkov môžete zvýšiť pomocou funkcie srcset, ak potrebujete používať zariadenia s vyšším DPI.
