Vývojáři a návrháři uživatelského rozhraní používají funkci Inspect Element k úpravě webových stránek online bez změny zdrojového kódu. Ale jak zkontrolovat prvky, aniž byste absolvovali kurz vývoje webu?
Inspect Element je praktický vývojářský nástroj, který se dodává s populárními webovými prohlížeči. Musíte jen vědět, jak nástroj nasadit na pár kliknutí při procházení webových stránek.
Můžete provádět mnoho kouzelných triků, jako je změna rozvržení webových stránek, pořizování snímků obrazovky bez textu, změna písma, úprava čísel a další.
Níže naleznete stručného průvodce krok za krokem, abyste se naučili, jak snadno kontrolovat prvky.
Co je kontrolní prvek?
Inspect Element je nástroj pro vývoj webu dostupný ve většině webových prohlížečů. Můžete jej použít k úpravě front-end zdrojového kódu libovolné webové stránky, kterou navštěvujete.
Změny, které provedete, se stanou v sandboxu ve webovém prohlížeči. Na skutečném webu tedy neprovádíte žádné změny. Po obnovení stránky také zmizí povrchní změny, které provedete.
Zde je několik kreativních způsobů, jak jej použít:
- Potřebujete pořídit snímek obrazovky z webové stránky a texty na obrázku vás trápí. K odstranění těchto textů použijte nástroj Prozkoumat prvek.
- Chcete ze svých přátel žertovat tím, že jim ukážete své jméno v New York Times nebo Washington Post. Inspect Element je nejlepší způsob, jak toho dosáhnout.
- Testujte ladicí kódy na webových stránkách jejich aplikací v reálném čase pomocí nástroje Inspect Element. Pokud to funguje, můžete změnit zdrojový kód backendu.
- Jako digitální obchodník můžete pomocí tohoto mocného nástroje pro vývoj webu odhalit klíčová slova konkurence, názvy SEO, meta tagy atd.
Jak zkontrolovat prvky ve Windows
Použití nástroje Inspect Element ve Windows je směšně snadné. Níže naleznete podrobného průvodce kontrolou prvků pomocí různých webových prohlížečů v systému Windows:
Nástroj Google Chrome Inspect Tool
- Při použití Google Chrome, klikněte pravým tlačítkem myši kdekoli na webu.
- Vyskočí kontextová nabídka po kliknutí pravým tlačítkem myši.
- Ve spodní části uvidíte Kontrolovat.
- Klikněte Kontrolovat pro zobrazení HTML a CSS kódů na a panel na pravé straně.
Jak otevřu Inspect Element v Chrome bez kliknutí pravým tlačítkem?
Existuje několik praktických zkratek pro otevření nástroje Inspect Element v prohlížeči Google Chrome pro Windows. Tyto klávesové zkratky jsou následující:
- Ctrl + Posun + C
- Funkční klávesa F12
Výše uvedené klávesové zkratky fungují také v prohlížeči Mozilla pro Windows.
Nástroj Mozilla Inspector Tool
V prohlížeči Mozilla je postup stejný jako v prohlížeči Google Chrome. Nicméně, Inspektor okno se zobrazí ve spodní části prohlížeče místo na pravé straně, jako v prohlížeči Google Chrome.
Nástroj Microsoft Edge Inspect Tool
Microsoft Edge’s Inspect Element překvapivě funguje podobně jako prohlížeč Google Chrome. Nástroj Kontrola je dostupný po kliknutí pravým tlačítkem myši. Kódy HTML a CSS se také zobrazují na pravé straně, podobně jako v prohlížeči Google Chrome.
Jak zkontrolovat prvky na Macu
Používáte Google Chrome, Mozilla Firefox nebo Microsoft Edge na počítačích Mac od Apple? Pokud ano, můžete nasadit nástroj Inspect Element podle kroků uvedených výše v části Windows.
Pokud ale používáte výchozí webový prohlížeč macOS, Safari, pak je použití nástroje Inspect Element složitá hra. Ve výchozím nastavení Safari nezobrazuje Inspect Element na Macu. Zde je to, co musíte udělat:
Jak otevřít Inspect Element na Macu
Nejprve musíte aktivovat vývojářské nástroje v Safari na Macu. Zde je postup:
- Běh a Prohlížeč Safari.
- Navštivte web, na kterém chcete zkontrolovat prvky webu.
- Vybrat Safari z horní lišty nabídky prohlížeče Safari.
- Klikněte Předvolby z kontextové nabídky, která se otevře.
- Na Obrazovka předvoleb, vyberte Pokročilý.
- Zaškrtněte Zobrazit vývoj menu ve spodní části Pokročilé předvolby obrazovka.
Úspěšně jste povolili vývojářské nástroje v Safari pro Mac. Nyní postupujte podle těchto kroků a použijte Inspect Element:
- Na jakémkoli prvku webu, jako je text nebo obrázek, klikněte pravým tlačítkem myši.
- Zobrazí se kontextová nabídka. Ve spodní části uvidíte Zkontrolujte prvek.
- Kliknutím na to otevřete sekci ladění pod webem zobrazující HTML a CSS kódy.
Jaké jsou klíče pro kontrolní prvek?
Možná hledáte zkratky pro Inspect Element na Macu. Můžete použít následující:
- Příkaz + Posun + C
- zmáčkni Řízení a poté vyberte libovolný prvek.
- Klepněte na trackpad dvěma prsty
Jak zkontrolovat prvky na Chromeboocích
Chromebook používá jako výchozí prohlížeč Google Chrome. Po otevření jakékoli webové stránky tedy jednoduše klikněte pravým tlačítkem myši a v kontextové nabídce, která následuje, vyhledejte možnost Zkontrolovat prvek.
Pokud používáte Chromebook v práci nebo ve škole, možná se ptáte na tuto otázku:
Proč nemohu zkontrolovat svůj školní Chromebook?
Většina školních a firemních administrátorů deaktivuje pokročilé funkce na Chromebooku, který vám poskytují pro práci nebo studium. Vzhledem k tomu, že vývojářské nástroje jsou pokročilé funkce, je pravděpodobné, že váš školní nebo pracovní Chromebook nástroj Inspect Element nezobrazí.
Jak zkontrolovat prvky na iPadu/iPhonu
Nástroj Inspect Element bohužel nemůžete použít na iPhonu nebo iPadu bez Macu.
iOS a iPadOS mají Web Inspector pro aplikaci Safari. Funguje to však pouze v případě, že připojíte mobilní zařízení k Macu, na kterém jste již aktivovali vývojářské nástroje pro Safari. Níže jsou uvedeny kroky, které můžete vyzkoušet:
- Otevřete iPad/iPhone Nastavení aplikace.
- Klikněte Safari v levém navigačním panelu.
- Poté přejděte dolů na pravé straně a vyhledejte a vyberte Pokročilý.
- Aktivujte přepínač pro Webový inspektor.
- Nyní připojte mobilní zařízení k Mac pomocí USB.
- Autorizujte iPhone/iPad na Macu.
- Otevřete libovolnou webovou stránku na mobilním zařízení v Safari.
- Nyní spusťte Safari na Macu a vyberte Rozvíjet na horní liště nabídek.
- V kontextové nabídce, která se otevře, vyhledejte název svého mobilního zařízení.
- Umístěním kurzoru na mobilní zařízení zobrazíte všechny otevřené webové stránky.
- Nyní vyberte libovolný web a zobrazte zdrojový kód HTML a CSS v prohlížeči Safari na Macu.
Závěr
Prozkoumali jste všechny možné způsoby použití nástroje Inspect Element pro dočasné úpravy webových stránek. Také jste se naučili, jak kontrolovat prvky pro různá zařízení, jako jsou Mac, Windows, Chromebook, iPad a iPhone.
Až budete příště potřebovat upravit webovou stránku pro zábavu nebo pro profesionální potřeby, vyzkoušejte tyto metody. Určitě si zamilujete tyto jednoduché kroky oproti jiným komplikovaným metodám vysvětleným jinde.
Nezapomeňte níže zanechat komentáře, pokud vám výše uvedené kroky pomohly, jakákoli metoda, kterou považujete za náročnou, nebo nějaké tajné tipy týkající se nástroje Inspect Element.
Potřebujete webovou stránku jako tištěnou referenci? Naučit se jak rychle uložit webovou stránku jako PDF Nyní!