Máte dotaz, jak zobrazit zdrojový kód vizuálního prvku na Chromebooku? K tomu můžete použít speciální nástroje DevTools v aplikaci Google Chrome nebo na libovolné stránce prohlížeče. DevTools je seznam speciálních vývojářských nástrojů, které jsou zabudovány do prohlížeče Google Chrome. Umožňují uživatelům upravovat stránky na cestách a sledovat případné problémy.
Jak používat Inspect Element na Chromebooku
Pro Chromebooky je výchozím prohlížečem Google, pro otevření vývojářských nástrojů na tomto zařízení je třeba.
- Otevřete požadovanou stránku
- Klikněte na 3 tečky v pravém horním rohu aplikace.
- Vyberte možnost „Další nástroje„
- Klikněte na „Nástroje pro vývojáře„
Alternativní způsoby přístupu k této funkci jsou stisknutí tlačítka F12 nebo kliknutí pravým tlačítkem myši na požadovanou položku.
Jedná se o univerzální pokyn, který platí pro většinu prohlížečů v systému Windows nebo v jakémkoli jiném systému.
Jak používat Inspect Element v počítači Mac nebo Iphone
Je možné totéž provést pomocí Macu nebo dokonce iPhonu? Stačí postupovat podle několika jednoduchých kroků níže:
Jak ji používat v počítači Mac
Pokud máte počítač Mac, nejlepším prohlížečem je Safari. Otevření nástrojů pro vývojáře v tomto prohlížeči se mírně liší od stejného postupu v prohlížeči Chrome nebo Firefox. Budete muset:
- Otevření prohlížeče
- Klikněte v Safari na název karty
- Vyberte možnost „Předvolby„
- Poté klikněte na ikonu Pokročilé ozubené kolo, která se nachází v horní části obrazovky.
- Zaškrtněte políčko vedle položky Zobrazit nabídku Vyvolat na panelu nabídek.
Jakmile tak učiníte, bude na vašich webových stránkách k dispozici prvek Inspect. Můžete jej také vyvolat pomocí kláves CMD + Option + I.
Jak ji používat na iPhonu
Pokud chcete zkontrolovat, jak vypadá mobilní verze webové stránky na iPhonu pomocí funkce Inspect Elements, musíte nejprve povolit funkci Web Inspector pro zařízení iOS:
- Přejděte do Nastavení
- Vyberte aplikaci Safari
- Přejděte na konec a klikněte na „Rozšířená nabídka“.
- Nyní zaškrtněte políčko vedle položky „Web Inspector“.
Na Macu je také třeba povolit nabídku pro vývojáře podle výše uvedených pokynů. Po povolení těchto funkcí v zařízení se systémem iOS a v počítači Mac byste měli v horní části počítače Mac zobrazit nabídku pro vývojáře. Musíte na ni kliknout, aby se zobrazil připojený iPhone a na něm otevřená webová stránka. Když se přepnete na jinou stránku, přepnete také okno Web Inspector pro tuto stránku na Macu.
Co je Elemental Panel
Nejdříve je třeba vědět, co je to panel Element. Pokud chcete změnit design nebo jakékoli vnější prvky stránky, musíte upravit CSS nebo HTML. To můžete provést pomocí vývojářského nástroje nazvaného Panel prvků. Umožní vám kontrolovat a měnit stránku z předního panelu. Některé z prvků, které si tam můžete prohlédnout, jsou :
- Informace o obrázku, jako je jeho velikost a zdroj.
- Panel CSS – tato možnost slouží ke změně vnějšího stylu stránky. Můžete zde měnit parametry, jako jsou písma, velikosti a barvy.
- Informace DOM nebo panel DOM Pomocí této možnosti můžete ovládat vzhled stránky. Můžete měnit pozici prvků a plně přecházet do souborů HTML.
- Panel konzoly představuje nové funkce v rámci nástrojů pro vývojáře
- Posluchači událostí prvků
- Komentáře HTML
- Zpětná vazba
Kontrola vykreslené a přirozené velikosti obrázku
Velmi často potřebujete znát informace o obrázku na webové stránce, můžete si jej „prohlédnout“. Díky tomu můžete například zjistit velikost obrázku. K tomu je třeba najet ukazatelem myši na daný IMG, když se nacházíte ve stromu DOM.
Kontrola konkrétního použitého obrázku ze zdrojové sady (srcset)
Pak můžete zkontrolovat, jaká verze obrázku byla načtena a jaký je přesný zdroj srcset. Zdroj srcset pomůže prohlížeči vyžádat si verzi obrázku s nejmenší velikostí, která je o něco větší než skutečný obrázek. To slouží k zobrazení sady obrázků s různým rozlišením, ze kterých si prohlížeč může vybrat. Nejprve vyberte položku IMG a poté v konzole zkontrolujte informaci $0.currentSrc. Všimněte si, že pokud potřebujete používat zařízení s vyšším DPI, můžete pomocí srcset zvýšit vlastnosti obrázků.
