Jak používat Inspect Element

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, nicméně pro běžného uživatele internetu je to cizí subjekt. Koneckonců, kdo se chce dívat na kódování webu, ž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.

Jak používat Inspect Element v konkrétním prohlížeči

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

1. Otevřete web, který chcete zkontrolovat.

   

2. Klepněte pravým tlačítkem myši kdekoli na stránce a vyberte Kontrolovat.

   

   NEBO

3. Klikněte na tři svislé tečky v pravém rohu panelu nástrojů.

   

4. Jít do Více nástrojů.

   

5. Vybrat Vývojářské nástroje.

   

   NEBO

6. zmáčkni F12 klávesová zkratka na PC nebo CMD + Možnosti + I na počítači Mac.

Použití Inspect Element v Microsoft Edge

1. Otevřete webovou stránku.

   

2. Klikněte na tři svislé tečky v pravém horním rohu panelu nástrojů prohlížeče.
3. Přejděte dolů a klikněte na Více nástrojů.

   

4. Klikněte na Vývojářské nástroje.

   

   NEBO

5. Klepněte pravým tlačítkem myši kdekoli na webu.
6. Klikněte na Kontrolovat.

   

   NEBO

7. lis 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 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 podle těchto jednoduchých kroků:

1. Klikněte na tři svislé tečky v horním rohu panelu Nástroje pro vývojáře.

   

2. Vyberte stranu doku (vlevo, dole nebo vpravo) nebo ukotvete do samostatného okna.

   

Umístěním kurzoru vedle okraje rámečku panelu nástrojů pro vývojáře a přetaž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)

I když mnoho zahrnutých kroků mohlo být pokryto tím, že vám jen ukážeme, jak používat Inspect Element v prohlížeči, kde na prvním místě existuje, ale 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 postupujte podle pokynů prohlížeče Chrome Zkontrolujte prvek. Zde je pro vás malý opakovací kurz:

1. Otevřete webovou stránku.

   

2. Klikněte na tři svislé čáry v pravém horním rohu panelu nástrojů.

   

3. Vybrat Více nástrojů.

   

4. Klikněte na Vývojářské nástroje.

   

Můžete také použít metodu kliknutí pravým tlačítkem nebo F12 funkční klávesu pro rychlejší přechod do Vývojářských nástrojů.

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:

1. zmáčkni F12 funkční klíč.
2. Vybrat Přepnout panel zařízení.

   

3. Z rozevírací 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:

1. Otevřete web, který chcete zkontrolovat.

   

2. Klepněte na tři svislé tečky v rohu okna prohlížeče.

   

3. Přejděte dolů a vyberte Více nástrojů.

   

4. Klikněte na Vývojářské nástroje.

   

Můžete také použít F12 funkční klávesu, chcete-li rychleji přistupovat k Inspect Element. 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é:

1. Otevřete prohlížeč Safari.
2. Klikněte na Safari v záložce záhlaví.
3. Vybrat Předvolby z rozbalovací nabídky.
4. Klikněte na Pokročilý ikona ozubeného kola umístěná v horní části obrazovky.
5. Zaškrtněte políčko, které říká 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 tato možnost neuvidíte.

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 (kontrolovat).

Jak používat Inspect Element na iPhone

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 jej povolit Webový inspektor pro vaše zařízení iOS:

1. Jít do Nastavení.

   

2. Nyní vyberte Safari.

   

3. Přejděte dolů a klepněte na Pokročilé menu.

   

4. Nyní klepnutím na přepínač zapněte Webový inspektor.

   

Také se musíte ujistit, že je na vašem Macu povolena nabídka Develop:

1. Otevřete Safari.
2. Vybrat Safari z horních hlaviček.
3. Dále klikněte na Předvolby.
4. Poté klikněte na Pokročilý.
5. Zaškrtněte políčko, které říká Zobrazit nabídku Develop na liště nabídek.

Po povolení mobilního zařízení iOS i Macu uvidíte v horní liště Macu nabídku Vývoj. 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 v systému Windows.

Jak používat Inspect Element ve formulářích Google

Můžete také použít Inspect Element ve Formulářích Google. Pokud však hledáte odpovědi na kvíz, máte smůlu. Odpovědi v kódování nenajdete. Odpovědi můžete zobrazit, pouze pokud jste tvůrcem nebo editorem formuláře. Ať tak či onak, pokud jste studentem a odpovídáte na kvíz ve Formulářích Google, uvidíte pouze své vlastní odpovědi.

1. Můžete kliknout pravým tlačítkem na formulář a vybrat Kontrolovat zobrazit celý kód formuláře.

Jak používat Zkontrolovat prvek, když je zablokovaný

Občas zjistíte, že nemůžete zkontrolovat webovou stránku 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

1. Jít do Nastavení.

   

2. Vyhledávání "JavaScript”.

   

3. Vypnout JavaScript.

   

Metoda 2 – Přístup k nástrojům pro vývojáře zdlouhavě

Namísto klepnutí pravým tlačítkem myši pro kontrolu proveďte toto:

1. Jít do Nastavení ve vašem prohlížeči.

   

2. Vybrat Více nástrojů.

   

3. Přejděte dolů a klikněte na Vývojářské nástroje.

   

Metoda 3 – Použití funkční klávesy

Můžete také zkusit použít F12 funkční klávesu 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 zobrazit zdroj: [zadejte celou adresu URL].

Jak používat Inspect Element na Discordu

Kontrola kódování na Discordu je snadný proces. Stačí použít Ctrl + Shift + I příkaz nebo F12 klíč na stránce Discord.

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ů:

1. Klepněte pravým tlačítkem nebo klepněte dvěma prsty na webovou stránku a vyberte Kontrolovat.
2. lis Ctrl + Shift + I.
3. Zkuste použít metodu view-source:[url], například „view-source://www.wikipedia.com“, bez uvozovek.

Některé školy a organizace však tuto funkci blokují. Takže pokud vám to nefunguje, možná budete muset kontaktovat správce vaší organizace nebo š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:

1. Náhled návrhu webu na mobilních zařízeních.
2. Zjistěte klíčová slova, která používají konkurenti.
3. Rychlostní testy.
4. Změna textu na webové stránce.
5. 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

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, když 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í nelegální, je určen pro webové vývojáře. Prohlížení zdrojového kódu webové stránky není nezákonné, problémem se stává pouze tehdy, pokud shromážděné informace používáte 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 Kontrolní prvek. Můžete však 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 výukových programů, 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.