Jak zkontrolovat prvky na počítačích Mac, Windows, iPhone a iPad

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 Zkontrolovat 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

Jak zkontrolovat prvky v prohlížeči Chrome ve Windows

• Při používání prohlížeče Google Chrome klikněte pravým tlačítkem kamkoli na web.
• Vyskočí kontextová nabídka po kliknutí pravým tlačítkem myši.
• V dolní části uvidíte možnost Inspect .
• Kliknutím na Zkontrolovat zobrazíte kódy HTML a CSS na panelu 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 + Shift + 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

Jak zkontrolovat prvky v prohlížeči Mozilla ve Windows

V prohlížeči Mozilla je postup stejný jako v prohlížeči Google Chrome. Okno Inspektor se však 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

Jak zkontrolovat prvky v prohlížeči Windows Edge

Inspect Element od Microsoft Edge 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:

• Spusťte prohlížeč Safari .
• Navštivte web, na kterém chcete zkontrolovat prvky webu.
• V horní liště nabídky prohlížeče Safari vyberte Safari .
• V kontextové nabídce, která se otevře, klikněte na Předvolby .
• Na obrazovce Předvolby vyberte možnost Upřesnit .
• Zaškrtněte nabídku Zobrazit nabídku Vývoj ve spodní části obrazovky Pokročilé předvolby .

Úspěšně jste povolili vývojářské nástroje v Safari pro Mac. Nyní postupujte podle těchto kroků a použijte Inspect Element:

• Klikněte pravým tlačítkem na libovolný prvek webu, jako je text nebo obrázek .
• Zobrazí se kontextová nabídka. V dolní části se zobrazí možnost Zkontrolovat prvek .
• Kliknutím na něj otevřete sekci ladění pod webovou stránkou zobrazující kódy HTML a CSS .

Jaké jsou klíče pro kontrolní prvek?

Možná hledáte zkratky pro Inspect Element na Macu. Můžete použít následující:

• Command + Shift + C
• Stiskněte klávesu Control 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

Bohužel nástroj Inspect Element na iPhonu nebo iPadu bez Macu nepoužijete.

iOS a iPadOS mají Web Inspector pro aplikaci Safari. Funguje to však pouze v případě, že mobilní zařízení připojíte 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 aplikaci Nastavení iPadu/iPhonu .
• Klikněte na Safari v levém navigačním podokně.

Otevření nastavení Safari na iPadu nebo iPhonu

• Poté přejděte na pravou stranu dolů a vyhledejte a vyberte možnost Upřesnit .

Aktivace Web Inspector na iPadu a iPhonu

• Aktivujte přepínač pro Web Inspector .
• Nyní připojte mobilní zařízení k Macu 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 v horní liště nabídek vyberte Vyvinout .
• 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 libovolnou webovou stránku pro zobrazení zdrojového kódu 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čte se, jak rychle uložit webovou stránku jako PDF hned teď!