etechblog

Jak zkontrolovat prvky v prohlížečích Chrome a Firefox

Přemýšleli jste někdy, jaké prvky stojí za krásně zpracovaným webem? Přečtěte si, jak kontrolovat prvky v Chrome a Firefoxu.

Každá vizuálně ohromující webová stránka má na zadní straně komplexní kódy HTML, CSS a JavaScript. Pomocí praktického vývojářského nástroje s názvem Inspect Element si můžete prohlédnout prvky webových stránek HTML v oblíbených webových prohlížečích.

Kromě toho, že vám tento nástroj umožňuje kontrolovat prvky, pomáhá vám také změnit rozvržení webu a pořizovat snímky obrazovky bez textu. Pokračujte ve čtení, abyste věděli, jak kontrolovat prvky v oblíbených webových prohlížečích v systému Windows.

Co je kontrola prvků?

Inspect Elements je vývojářský nástroj, který najdete ve všech populárních webových prohlížečích, jako jsou Google Chrome, Mozilla Firefox, Microsoft Edge, Safari a Brave. Pomocí tohoto nástroje můžete zobrazit zdrojový kód HTML, CSS a JSS webové stránky.

Kromě toho jej můžete použít k úpravě kódu HTML a CSS a zobrazení změn v prohlížeči v reálném čase. Weboví vývojáři, návrháři a marketéři jej používají k náhledu změn stylu, opravě chyb nebo učení se architektuře webových stránek.

Přestože se jedná o vývojářský nástroj, nevyžaduje instalaci žádného dalšího softwaru. Můžete to udělat z vašeho webového prohlížeče podle metod, které popíšeme v tomto článku.

Než použijete funkci Prozkoumat prvky, nezapomeňte, že veškeré změny, které provedete za účelem manipulace s webovým obsahem, jsou dočasné. Změny jsou viditelné pouze pro vás, zatímco skutečné zobrazení webové stránky je pro ostatní uživatele stejné.

  Chyba „Vaše hodiny jsou napřed“ na Macu

Kdy používáte Inspect Elements?

Zde jsou některé běžné situace, kdy může být nutné použít tuto funkci:

Web Design

Pokud potřebujete porozumět struktuře webové stránky nebo otestovat styly CSS, můžete použít tento nástroj. Pomáhá také s experimentováním s různými prvky a úpravou kódu, aby bylo možné okamžitě zkontrolovat vizuální výsledky.

Pořizování snímků obrazovky

Pokud chcete pořídit snímek obrazovky webové stránky bez některých konkrétních prvků, jako je text nebo obrázky, tento nástroj se vám bude hodit. Najděte kód HTML pro prvek, který chcete odstranit, a odstraňte tento kód. Tento prvek bude okamžitě odstraněn ze zobrazení vaší webové stránky a můžete pořídit snímek obrazovky.

Ladění webových stránek

Další běžnou situací, kdy se tento nástroj používá, je identifikace problému nebo chyby na webu. Umožňuje vám zkoumat kód HTML, CSS a JSS. Můžete tak zjistit, které prvky nefungují správně nebo se zobrazují nesprávně.

Učení o vývoji webu

Pokud se učíte o vývoji webu, Inspect Elements je pro vás nezbytný nástroj. Poskytuje vám cenné poznatky o prvcích za konkrétním webem, abyste pochopili a naučili se implementované funkce a celkovou architekturu webové stránky.

Testování přístupnosti

K vyhodnocení přístupnosti webové stránky můžete také použít nástroj Inspect Element ve svém webovém prohlížeči. Pomocí něj můžete zajistit přesné sémantické označení a ověřit atributy usnadnění. Kromě toho vám také umožňuje testovat web pomocí čteček obrazovky nebo jiných technologií.

Pokud chcete rychle extrahovat určitý obsah nebo aktiva z webové stránky, použijte tento nástroj. Umožňuje vám najít původní adresy URL různých mediálních prvků, jako jsou obrázky a videa. Kromě toho jej můžete použít k pochopení toho, jak se určitá data načítají.

Výhody kontroly prvků v různých webových prohlížečích

Porozumění struktuře webu

Tento nástroj nabízí vizuální reprezentaci struktury webových stránek prostřednictvím HTML značek. Můžete tak identifikovat vnořené prvky a zjistit, jak se prvky vzájemně ovlivňují. Pomáhá vám nejen porozumět celkové architektuře, ale umožňuje vám vytvářet podobné struktury.

Odstraňování problémů

Kdykoli potřebují vývojáři identifikovat problémy související s rozložením, responzivním designem, chybami JavaScriptu a výkonem, použijí nástroj Inspect Elements. Umožňuje jim také zajistit kompatibilitu webové stránky mezi různými prohlížeči.

  14 Převodník JPG na WebP pro poskytování obrázků ve formátech nové generace

Analýza stylů CSS

Tento nástroj můžete použít k analýze stylů CSS a pochopení aspektů, jako jsou volby písma, barvy a vlastnosti rozvržení. Tato znalost vizuálního vzhledu pomáhá vývojářům vyřešit nesrovnalosti v rozvržení a zajistit trvalou značku.

Testování

Kontrola prvků je také přínosná pro posouzení přístupnosti webu a kompatibility. Umožňuje vám kontrolovat atributy HTML, role ARIA a další styly, abyste zajistili, že k webovému obsahu bude mít přístup každý bez problémů.

Provádění živých experimentů

Experimentování a prototypování v reálném čase jsou další výhody používání nástroje Inspect Elements. Prvky můžete přímo upravit a zkontrolovat změny na webové stránce. Ti, kteří potřebují rychlé testování a doladění designu webových stránek, jej využívají pro efektivní vývoj.

Učení se

Inspect Elements je především perfektní nástroj, jak se učit ze stávajících webových stránek a inspirovat se pro svůj vlastní projekt. Pomůže vám analyzovat strukturu a rozložení webu. Využijte tyto znalosti ke spolupráci a neustálému zlepšování.

Věci, které lze provést kontrolou prvků

  • Pomáhá vám provádět živé úpravy na panelu CSS a zobrazovat změny v reálném čase.
  • Umožňuje vám testovat různá rozvržení webových stránek, aniž byste museli znovu nahrát upravený soubor HTML.
  • Nástroj Inspect Elements vám také umožňuje zkontrolovat případný poškozený kód pro údržbu webu.
  • Tento nástroj lze použít pro ladění prvků stránky bez provádění změn v původním souboru HTML.

Metody krok za krokem ke kontrole prvků v prohlížeči Google Chrome

Metoda 1: Použití příkazu Inspect z místní nabídky

Toto je nejběžnější metoda kontroly prvků webové stránky v prohlížeči Chrome.

  • Otevřete webovou stránku, kterou chcete zkontrolovat, v prohlížeči Google Chrome.
  • Umístěte kurzor na text, obrázek, video nebo jakýkoli jiný prvek.
  • Nyní kliknutím pravým tlačítkem myši otevřete kontextovou nabídku.
  • Klikněte na možnost Prozkoumat umístěnou ve spodní části nabídky.
  • Otevře se kód HTML této stránky se zvýrazněním kódu pro tento konkrétní prvek.
  • Metoda 2: Použití klávesové zkratky

    Pomocí této metody můžete otevřít HTML kód celé webové stránky. Přímé otevření kódu určitého prvku s ním však není dostupné.

      Komponentní vs kompozitní kabely: Jaký je rozdíl?
  • Ujistěte se, že máte v Chromu otevřený preferovaný web nebo webovou stránku.
  • Stiskněte současně klávesy Ctrl+Shift+I na klávesnici.
  • Otevře se zásuvka konzoly s kódem HTML.
  • Metoda 3: Použití funkční klávesy

    Tato metoda je další snadná, protože vyžaduje pouze jeden stisk klávesy. Stačí otevřít webovou stránku a stisknutím klávesy F12 otevřete její HTML kód. Přepnutím otevřete a zavřete nástroj Kontrola prvků.

    K nástroji pro vývojáře můžete také přistupovat z nabídky Chrome a zkontrolovat prvky webu.

    1. Otevřete libovolnou webovou stránku v prohlížeči Google Chrome.
    2. Klikněte na ikonu tří teček v pravém horním rohu.

    3. Když se otevře nabídka Chrome, umístěte ukazatel myši na možnost Další nástroje.
    4. Pomalu přesuňte kurzor na možnost Vývojářský nástroj v podnabídce.

    5. Otevře se stránka Kontrola prvků.

    Poznámka: Pokud používáte Microsoft Edge, můžete stejnými metodami zkontrolovat prvky webové stránky.

    Metody krok za krokem ke kontrole prvků v prohlížeči Mozilla Firefox

    Metoda 1: Použití příkazu Inspect ve Firefoxu

    Uživatelé Firefoxu mohou pomocí tohoto přístupu zkontrolovat kód za kterýmkoli prvkem webové stránky HTML.

  • Nejprve otevřete webovou stránku ve svém Firefoxu.
  • Klikněte pravým tlačítkem a umístěte kurzor na prvek, který chcete zkontrolovat.
  • Zobrazí se nabídka, ve které musíte kliknout na možnost Inspect nebo stisknout klávesu Q.
  • Obojí způsobí, že se na obrazovce objeví nástroj Inspect Elements.
  • Metoda 2: Použití funkční klávesy

    Podobně jako Chrome, Firefox také zobrazí nástroj Inspect Element, když stisknete klávesu F12. Chcete-li nástroj zavřít, musíte toto tlačítko znovu stisknout.

    Firefox má také vývojářský nástroj, pomocí kterého můžete zkontrolovat prvek libovolné webové stránky.

  • Na webové stránce klikněte na ikonu hamburgeru v pravém rohu lišty nabídek.
  • Po otevření nabídky klikněte na možnost Další nástroje.
  • Klikněte na Nástroje pro vývojáře webu v části Nástroje prohlížeče.
  • Tím se na obrazovce otevře HTML kód.
  • Metoda 4: Použití klávesové zkratky

    Stejně jako Chrome má i Firefox klávesovou zkratku pro nástroj Inspect Elements.

  • Otevřete libovolnou webovou stránku ve Firefoxu.
  • Stiskněte Ctrl + Shift + C na klávesnici Windows.
  • Budete moci vidět úplný HTML kód této webové stránky.
  • Závěr

    Inspect Elements je užitečný nástroj nejen pro vývojáře, ale také pro každého, kdo chce upravit design webu nebo experimentovat se vzhledem webu. Zde jsme prozkoumali výhody a případy použití nástroje Inspect Element.

    Jsou zde také zmíněny nejlepší metody kontroly prvků v oblíbených webových prohlížečích. Pokud tedy chcete zkontrolovat prvky HTML webové stránky pro profesionální nebo zábavné použití, můžete vyzkoušet kterýkoli z přístupů.

    Můžete si také přečíst, jak změnit uživatelského agenta ve webových prohlížečích.

    x