Viz HTML a CSS jakékoli webové stránky
Webová stránka je vytvořena s řádky kódu , ale výsledkem jsou konkrétní stránky s obrázky, video, písma a další. Chcete-li změnit jeden z těchto prvků nebo zjistit, z čeho se skládá, musíte najít konkrétní řádek kódu, který ho ovládá. Můžete to udělat pomocí nástroje pro kontrolu prvků.
Většina webových prohlížečů neumožňuje stahovat kontrolní nástroj nebo nainstalovat doplněk. Místo toho vám umožňují klepnout pravým tlačítkem myši na prvek stránky a zvolit možnost Kontrola nebo kontrola prvku . Tento proces však může být ve vašem prohlížeči poněkud odlišný.
Zkontrolujte elementy v prohlížeči Chrome
Nejnovější verze prohlížeče Google Chrome umožňují prohlížet stránku několika způsoby, z nichž všechny používají vestavěný Chrome DevTools:
- Klepněte pravým tlačítkem myši na stránku (nebo na prázdnou oblast) a vyberte volbu Kontrola
- Zadejte klávesovou zkratku Ctrl + Shift + I
- Použijte nabídku Chrome pro přístup k možnosti Více nástrojů> Nástroje pro vývojáře
Aplikace Chrome DevTools vám umožní dělat věci, jako je snadné kopírování nebo úprava řádků HTML nebo úplné skrytí nebo odstranění prvků (dokud se stránka znovu nezaváže).
Jakmile se aplikace DevTools otevře na straně stránky, můžete změnit místo jejího umístění, vyskakovat ze stránky, vyhledat všechny soubory stránky, vybrat prvky ze stránky pro konkrétní kontrolu, kopírovat soubory a adresy URL a dokonce přizpůsobit banda nastavení.
Zkontrolujte prvky ve Firefoxu
Podobně jako Chrome, Firefox má několik různých způsobů, jak otevřít nástroj nazvaný Inspector:
- Klepněte pravým tlačítkem na prázdnou oblast na stránce nebo vyberte prvek a vyberte položku Inspect Element
- Pomocí klávesnice zadejte klávesy Ctrl + Shift + T nebo Ctrl + Shift + I
- Z nabídky Firefox klikněte na Developer > Inspector
- V nabídce Nástroje klepněte na příkaz Web Developer> Inspector
Při přesunu myši na různé prvky ve Firefoxu nástroj Inspector automaticky vyhledá informace o zdrojovém kódu prvku. Klepněte na prvek a vyhledávání "on-the-fly" se zastaví a element můžete zkontrolovat z okna Inspector.
Klepnutím pravým tlačítkem myši na prvek vyhledejte všechny podporované ovládací prvky. Můžete udělat věci, jako je úprava stránky jako HTML, kopírování nebo vložení vnitřního nebo vnějšího HTML kódu, zobrazení vlastností DOM, screenshot nebo odstranění uzlu, snadné použití nových atributů, zobrazení všech CSS stránek a další.
Zkontrolujte prvky v aplikaci Opera
Opera může kontrolovat i prvky, protože je to nástroj Inspector DOM, který je totožný s nástrojem Chrome. Zde je návod, jak se k tomu dostat:
- Použijte klávesové zkratky Ctrl + Shift + I
- Přejděte do nabídky Nabídka> Další nástroje> Zobrazit nabídku Vývojář a otevřete nabídku pomocí nabídky Nabídka> Vývojář> Nástroje pro vývojáře
- Z nabídky pravým tlačítkem myši na libovolném prvku na stránce zvolte prvek Inspect
Zkontrolujte prvky v aplikaci Internet Explorer
Podobný nástroj inspekčního prvku nazvaný Nástroje pro vývojáře je k dispozici v aplikaci Internet Explorer:
- Stiskněte klávesu F12 na klávesnici
- Použijte nabídku Nabídky Nástroje> F12 Vývojář ( stisknutím klávesy Alt + X, pokud se nezobrazí nabídka Nástroje )
- Klepněte pravým tlačítkem myši na stránku a klepněte na položku Inspekce prvku
IE má v tomto novém menu nástroj Vybrat prvek, který vám umožní kliknout na libovolný prvek stránky a zobrazit jeho detaily HTML a CSS. Můžete také snadno deaktivovat / povolit zvýraznění prvků při procházení kartou Průzkumník DOM .
Stejně jako ostatní nástroje inspektorů prvků ve výše uvedených prohlížečích vám aplikace Internet Explorer umožňuje vyřezávat, kopírovat a vkládat prvky, upravovat HTML, přidávat atributy, kopírovat prvky připojenými styly a další.