Většina lidí si neuvědomuje, že má k dispozici pokladnici vývojářských nástrojů a že je skrytá v jejich oblíbeném prohlížeči.
Každý webový prohlížeč nabízí vývojářské nástroje pro kontrolu kódování webových stránek. Pro běžného uživatele internetu je to však cizí subjekt. Koneckonců, kdo se chce dívat na kódování webových stránek, že?
Jak se ukazuje, existuje spousta věcí, které se můžete naučit, když se podíváte na kódování webových stránek. Čtěte dále a zjistěte, co funkce inspect element nabízí a jak ji používat.
Většina prohlížečů má nástroje pro kontrolu prvků webových stránek, ale všechny obecně fungují stejným způsobem.
Pomocí Inspect Element v Google Chrome
- Otevřete web, který chcete zkontrolovat.
- Klepněte pravým tlačítkem myši kamkoli na stránku a vyberte Zkontrolovat.
NEBO - Klikněte na tři svislé tečky v pravém rohu panelu nástrojů.
- Přejděte na Další nástroje.
- Vyberte Nástroje pro vývojáře.
NEBO - Stiskněte klávesovou zkratku F12 na PC (nebo CMD + Options + I na Macu.)
Použití Inspect Element v Microsoft Edge
- Otevřete webovou stránku.
- Klikněte na tři svislé tečky v pravém horním rohu panelu nástrojů prohlížeče.
- Přejděte dolů a klikněte na Další nástroje.
- Klikněte na Nástroje pro vývojáře.
NEBO - Klikněte pravým tlačítkem kamkoli na web a klikněte na Prozkoumat.
NEBO - Stiskněte Ctrl + Shift + I.
Každá z těchto tří metod vám poskytne stejný výsledek.
Pokud jste to udělali správně, ve spodní části vašeho prohlížeče se otevře nový panel. Toto jsou Nástroje pro vývojáře a zahrnují kartu Prvky. Toto je nástroj, který potřebujete ke kontrole prvku.
Panel se ve výchozím nastavení otevře ve spodní části obrazovky, ale způsob jeho zobrazení můžete kdykoli změnit. Chcete-li přemístit panel nástrojů pro vývojáře, postupujte takto:
- Klikněte na tři vodorovné tečky v horním rohu panelu Nástroje pro vývojáře.
- Vyberte stranu ukotvení (vlevo, dole nebo vpravo) nebo uvolněte ukotvení do samostatného okna.
Umístěním kurzoru vedle okraje rámečku panelu nástrojů pro vývojáře a tažením zúžíte nebo rozšíříte pracovní plochu. Pokud se například rozhodnete panel ukotvit na pravou stranu okna prohlížeče, zkuste umístit ukazatel myši na levý okraj. Když uvidíte kurzor se šipkou, můžete přetažením panelu změnit jeho velikost.
Použití Inspect Element (specifický pro OS)
Ačkoli mnoho souvisejících kroků mohlo být pokryto tím, že vám ukážeme, jak používat Inspect Element v prohlížeči, stejně vám ukážeme, jak na většině OS.
Jak používat Inspect Element na Chromebooku
Výchozím prohlížečem na Chromebooku je Google, takže pro přístup k prvku Inspect Element postupujte podle pokynů prohlížeče Chrome. Zde je pro vás malý opakovací kurz:
- Otevřete webovou stránku.
- Klikněte na tři svislé tečky v pravém horním rohu panelu nástrojů.
- Vyberte Další nástroje.
- Klikněte na Nástroje pro vývojáře.
Můžete také použít metodu klepnutí pravým tlačítkem nebo funkční klávesu F12, abyste se dostali k nástrojům pro vývojáře rychleji.
Jak používat Inspect Element na zařízení Android
Spuštění Inspect Element na zařízení Android se mírně liší. Podívejte se, jak se dostat na panel Inspect Element na Androidu:
- Stiskněte funkční klávesu F12.
- Vyberte Přepnout panel zařízení.
- Z rozbalovací nabídky vyberte zařízení Android.
Když vyberete konkrétní zařízení Android, všimnete si, že se načte mobilní verze webu. Odtud můžete zdarma používat funkci Inspect Element na svém zařízení Android z pohodlí vašeho počítače.
Tato metoda funguje pro prohlížeče Chrome i Firefox, protože mají ve svých nástrojích pro vývojáře funkci nazvanou Simulace zařízení.
Stejným způsobem to funguje také pro zařízení iPhone. Stačí si v rozbalovací nabídce vybrat ten správný.
Jak používat Inspect Element ve Windows
Nástroj Inspect Element není nutně specifický pro OS, ale je specifický pro prohlížeč. To znamená, že Nástroje pro vývojáře jsou funkcí prohlížeče, který používáte, a ne nutně Windows. Na panel Inspect Element se však můžete dostat bez ohledu na to, který prohlížeč preferujete.
Pokud používáte operační systém Windows, pravděpodobně také používáte prohlížeč Microsoft Edge. Podívejte se, jak získat přístup k Inspect Element na MS Edge:
- Otevřete web, který chcete zkontrolovat.
- Klepněte na tři svislé tečky v rohu okna prohlížeče.
- Přejděte dolů a vyberte Další nástroje.
- Klikněte na Nástroje pro vývojáře.
Pro rychlejší přístup k Inspect Element můžete také použít funkční klávesu F12. Funguje také klepnutí pravým tlačítkem na webovou stránku a výběr Inspect.
Jak používat Inspect Element na Macu
Pokud používáte Mac, váš prohlížeč je pravděpodobně Safari. Otevření Inspect Elements v Safari je trochu jiné než v Chrome a Firefoxu. S těmito kroky je to ale stejně jednoduché:
- Otevřete prohlížeč Safari.
- Klikněte na Safari na kartě záhlaví a z rozbalovací nabídky vyberte Předvolby.
- Klikněte na ikonu pokročilého ozubeného kola v horní části obrazovky.
- Zaškrtněte políčko Zobrazit nabídku Develop na liště nabídek.
Provedením těchto kroků aktivujete funkci Inspect Element ve vašem prohlížeči. Pokud nejprve nepovolíte Inspect Element, při otevření webu se tato možnost nezobrazí.
Po dokončení tohoto kroku jednoduše klikněte pravým tlačítkem myši na libovolnou otevřenou webovou stránku a vyberte možnost Zkontrolovat. Můžete také použít příkaz rychlých kláves: CMD + Option + I (kontrola).
Jak používat Inspect Element na iOS
Chcete použít funkci Inspect Elements, abyste viděli, jak mobilní verze webové stránky vypadá na iPhonu? To a mnohem více můžete udělat pomocí několika jednoduchých kroků. Než se však podíváte na prvek, musíte pro své zařízení iOS povolit Web Inspector:
- Jdi do nastavení.
- Nyní vyberte Safari.
- Přejděte dolů a klepněte na Rozšířené menu.
- Nyní klepnutím na přepínač zapněte Web Inspector.
Také se ujistěte, že je na vašem Macu povolena nabídka Vývoj podle kroků v části výše.
Po povolení mobilních zařízení se systémem iOS i počítačů Mac se v horní liště vašeho Macu zobrazí nabídka Develop. Kliknutím na něj zobrazíte připojený iPhone a webovou stránku aktivní na zařízení. Výběrem webové stránky se také otevře okno Web Inspector pro stejnou stránku na obrazovce vašeho Macu.
Mějte však na paměti, že tyto pokyny fungují pouze pro Safari se systémem Mac, nikoli pro Safari ve Windows.
Jak používat Zkontrolovat prvek, když je zablokovaný
Občas zjistíte, že webovou stránku nemůžete prozkoumat, a pokud na ni zkusíte kliknout pravým tlačítkem, bude výběr Zkontrolovat zašedlý. Můžete si myslet, že je blokován, ale existuje mnoho způsobů, jak to obejít:
Metoda 1 – Vypněte Javascript
- Přejděte do Nastavení.
- Hledat JavaScript.
- Vypněte JavaScript.
Metoda 2 – Přístup k nástrojům pro vývojáře zdlouhavě
Namísto kliknutí pravým tlačítkem myši pro kontrolu proveďte toto:
- Přejděte do Nastavení v prohlížeči.
- Vyberte Další nástroje.
- Přejděte dolů a klikněte na Nástroje pro vývojáře.
Metoda 3 – Použití funkční klávesy
Můžete také zkusit použít funkční klávesu F12 na webových stránkách, které blokují kliknutí pravým tlačítkem myši na Inspect.
Možná budete muset vyzkoušet všechny tyto metody, než narazíte na ten, který vám vyhovuje. Jako poslední možnost můžete také zkusit zobrazit zdrojový kód zadáním view-source: [enter full url].
Jak používat Inspect Element na školním Chromebooku
Pokud váš Chromebook vydala škola, použití funkce Inspect Element zahrnuje několik jednoduchých kroků:
- Klepněte pravým tlačítkem nebo klepněte dvěma prsty na webovou stránku a vyberte možnost Prozkoumat.
- Stiskněte Ctrl + Shift + I.
- Zkuste a použijte view-source:[url] metoda, jako je zobrazení zdroje: https://www.wikipedia.com.
Některé školy a organizace však tuto funkci blokují, takže pokud vám nefunguje, možná budete muset kontaktovat vaši organizaci nebo správce školy.
Jak používat Inspect Element k hledání odpovědí
Pomocí Inspect Element můžete najít odpovědi na různé věci, jako je:
- Náhled návrhu webu na mobilních zařízeních.
- Zjistěte klíčová slova, která používají konkurenti.
- Rychlostní testy.
- Změna textu na webové stránce.
- Najděte rychlé příklady, které vývojářům ukážou, co potřebujete.
Když spustíte panel Inspect Element, uvidíte veškeré kódování webu. To zahrnuje veškeré kódování JavaScript, CSS a HTML, které je v něm zabudované. Je to jako vidět zdrojové kódování webové stránky, ale můžete v kódu provádět změny. Navíc uvidíte všechny provedené změny v reálném čase.
Díky tomuto nástroji je pro obchodníky, designéry a vývojáře neocenitelným nástrojem prohlížet si jakékoli změny návrhu před jejich dokončením. Provádění změn v kódování pomocí Inspect Element však netrvá věčně. Když stránku znovu načtete, vrátí se do výchozího stavu.
Další časté dotazy
Pokud po přečtení výše nejste odborníkem na Inspect Element, zde jsou další odpovědi.
Jak mohu použít příkaz Prozkoumat prvek k nalezení odpovědí?
Jediným způsobem, jak najít odpovědi pomocí funkce Inspect Element, je, že je webová stránka po odeslání okamžitě odhalí. V tomto případě jsou odpovědi přítomny v kódování.
V opačném případě si jednoduše prohlížíte kódování kvízu nebo testu, když používáte funkci Zkontrolovat prvek, stejně jako všechny odpovědi, které odešlete.
Je kontrola prvku nelegální?
Ne, nástroj Inspect Element není nezákonný; je určen pro webové vývojáře. Zobrazení zdrojového kódu webové stránky není nezákonné; problém se stane pouze v případě, že shromážděné informace použijete k nekalým účelům, jako jsou pokusy o zneužití atd.
Je možné zakázat kontrolu prvku v prohlížeči?
Krátká odpověď je ne.
V prohlížeči nemůžete zakázat Inspect Element, ale můžete nastavit parametry, které uživatelům zabrání v provádění určitých akcí, jako je kliknutí pravým tlačítkem na webovou stránku. Existuje mnoho online návodů, jak nastavit správné skripty pro zakázání určitých událostí. Funkci Zkontrolovat prvek však ve skutečnosti nemůžete deaktivovat jako celek.
Poznejte vnitřnosti webové stránky
Vyzkoušení funkce Inspect Element na webové stránce je pravděpodobně vývojářský nástroj, o kterém jste nikdy nevěděli, že jej potřebujete – i když sami nejste vývojář. Má spoustu designových a marketingových aplikací, díky kterým bude váš web plynulejší. A možná vám dá náskok před konkurencí.
K čemu používáte Inspect Element? Řekněte nám o tom v sekci komentářů níže.
