Ako používať Inspect Element

Väčšina ľudí si neuvedomuje, že majú k dispozícii pokladnicu vývojárskych nástrojov a že sú skryté v ich obľúbenom prehliadači.

Každý webový prehliadač ponúka vývojárske nástroje na kontrolu kódovania webovej stránky, pre priemerného používateľa internetu je to však cudzí subjekt. Koniec koncov, kto sa chce pozerať na kódovanie webových stránok, však?

Ako sa ukázalo, existuje veľa vecí, ktoré sa môžete naučiť pri pohľade na kódovanie webových stránok. Čítajte ďalej a zistite, čo ponúka funkcia kontrolného prvku a ako ju používať.

Ako používať Inspect Element v konkrétnom prehliadači

Väčšina prehliadačov má nástroje na kontrolu prvkov webovej stránky, ale všetky vo všeobecnosti fungujú rovnakým spôsobom.

Pomocou Inspect Element v prehliadači Google Chrome

1. Otvorte webovú stránku, ktorú chcete skontrolovať.

   

2. Kliknite pravým tlačidlom myši kdekoľvek na stránke a vyberte Skontrolujte.

   

   ALEBO

3. Kliknite na tri zvislé bodky v pravom rohu panela s nástrojmi.

   

4. Ísť do Ďalšie nástroje.

   

5. Vyberte Nástroje pre vývojárov.

   

   ALEBO

6. Stlačte tlačidlo F12 klávesová skratka na PC resp CMD + Možnosti + I na počítači Mac.

Používanie Inspect Element v Microsoft Edge

1. Otvorte webovú stránku.

   

2. Kliknite na tri zvislé bodky v pravom hornom rohu panela s nástrojmi prehliadača.
3. Prejdite nadol a kliknite na Ďalšie nástroje.

   

4. Kliknite na Nástroje pre vývojárov.

   

   ALEBO

5. Kliknite pravým tlačidlom myši kdekoľvek na webe.
6. Kliknite na Skontrolujte.

   

   ALEBO

7. Stlačte tlačidlo Ctrl + Shift + I.

Ktorákoľvek z týchto troch metód vám poskytne rovnaký výsledok.

Ak ste to urobili správne, v spodnej časti prehliadača sa otvorí nová tabla. Toto sú nástroje pre vývojárov a zahŕňajú kartu Prvky. Toto je nástroj, ktorý potrebujete na kontrolu prvku.

Panel sa predvolene otvorí v spodnej časti obrazovky, ale spôsob jeho zobrazenia môžete kedykoľvek zmeniť. Ak chcete zmeniť umiestnenie panela nástrojov pre vývojárov, postupujte podľa týchto jednoduchých krokov:

1. Kliknite na tri zvislé bodky v hornom rohu panela Nástroje pre vývojárov.

   

2. Vyberte stranu doku (vľavo, dole alebo vpravo) alebo zrušte ukotvenie do samostatného okna.

   

Umiestnením kurzora vedľa okraja rámu panela nástrojov pre vývojárov a ťahaním zúžite alebo rozšírite pracovný priestor. Ak sa napríklad rozhodnete panel ukotviť na pravú stranu okna prehliadača, skúste umiestniť kurzor myši na ľavý okraj. Potiahnutím panela môžete zmeniť jeho veľkosť, keď uvidíte kurzor šípky.

Používanie Inspect Element (špecifické pre OS)

Aj keď veľa zahrnutých krokov mohlo byť pokrytých tým, že vám ukážeme, ako používať Inspect Element v prehliadači, kde v prvom rade existuje, ale aj tak vám ukážeme, ako na väčšine OS.

Ako používať Inspect Element na Chromebooku

Predvolený prehliadač na Chromebooku je Google, a preto postupujte podľa pokynov prehliadača Chrome Preskúmať prvok. Tu je malý opakovací kurz pre vás:

1. Otvorte webovú stránku.

   

2. Kliknite na tri zvislé čiary v pravom hornom rohu panela s nástrojmi.

   

3. Vyberte Ďalšie nástroje.

   

4. Kliknite na Nástroje pre vývojárov.

   

Môžete použiť aj metódu pravého kliknutia resp F12 funkčný kláves na rýchlejší prístup k nástrojom pre vývojárov.

Ako používať Inspect Element na zariadení so systémom Android

Spustenie Inspect Element na zariadení so systémom Android je mierne odlišné. Zistite, ako sa dostať na panel Inspect Element v systéme Android:

1. Stlačte tlačidlo F12 funkčný kláves.
2. Vyberte si Prepnúť panel zariadenia.

   

3. V rozbaľovacej ponuke vyberte zariadenie so systémom Android.

   

Keď vyberiete konkrétne zariadenie so systémom Android, všimnete si, že sa načíta mobilná verzia webu. Odtiaľto môžete voľne používať funkciu Inspect Element na svojom zariadení so systémom Android z pohodlia pracovnej plochy.

Táto metóda funguje pre prehliadače Chrome aj Firefox, pretože vo svojich nástrojoch pre vývojárov majú funkciu s názvom Simulácia zariadenia.

Rovnako to funguje aj pre zariadenia iPhone. Stačí si v rozbaľovacej ponuke vybrať ten správny.

Ako používať Inspect Element v systéme Windows

Nástroj Inspect Element nie je nevyhnutne špecifický pre OS, ale je špecifický pre prehliadač. To znamená, že Vývojárske nástroje sú funkciou prehliadača, ktorý používate, a nie nevyhnutne systému Windows. Na panel Inspect Element sa však môžete dostať bez ohľadu na to, ktorý prehliadač preferujete.

Ak používate operačný systém Windows, pravdepodobne budete používať aj prehliadač Microsoft Edge. Zistite, ako získať prístup k prvku Inspect Element na MS Edge:

1. Otvorte webovú stránku, ktorú chcete skontrolovať.

   

2. Klepnite na tri zvislé bodky v rohu okna prehliadača.

   

3. Prejdite nadol a vyberte Ďalšie nástroje.

   

4. Kliknite na Nástroje pre vývojárov.

   

Môžete tiež použiť F12 funkčné tlačidlo, ak chcete rýchlejšie pristupovať k prvku Inspect. Funguje tiež kliknutie pravým tlačidlom myši na webovú stránku a výber možnosti Skontrolovať.

Ako používať Inspect Element na Macu

Ak používate Mac, váš prehliadač je pravdepodobne Safari. Otvorenie funkcie Inspect Elements v prehliadači Safari je trochu iné ako v prehliadači Chrome a Firefox. Ale s týmito krokmi je to rovnako jednoduché:

1. Otvorte prehliadač Safari.
2. Kliknite na Safari v záložke hlavičky.
3. Vyberte Predvoľby z rozbaľovacej ponuky.
4. Klikni na Pokročilé ikona ozubeného kolieska umiestnená v hornej časti obrazovky.
5. Začiarknite políčko s nápisom Zobraziť ponuku Develop na paneli s ponukami.

Vykonaním týchto krokov povolíte vo svojom prehliadači funkciu Skontrolovať prvok. Ak najskôr nepovolíte možnosť Inspect Element, pri otvorení webovej lokality sa táto možnosť nezobrazí.

Po dokončení tohto kroku jednoducho kliknite pravým tlačidlom myši na ľubovoľnú otvorenú webovú stránku a vyberte možnosť Skontrolovať. Môžete tiež použiť príkaz rýchlych kláves: CMD + možnosť + I (kontrola).

Ako používať Inspect Element na iPhone

Chcete použiť funkciu Inspect Elements na zobrazenie toho, ako sa mobilná verzia webovej stránky zobrazuje na iPhone? Toto a ešte viac môžete urobiť pomocou niekoľkých jednoduchých krokov. Ale predtým, ako sa pozriete na prvok, musíte ho povoliť Webový inšpektor pre vaše iOS zariadenie:

1. Ísť do nastavenie.

   

2. Teraz vyberte Safari.

   

3. Prejdite nadol a klepnite na Rozšírené menu.

   

4. Teraz klepnutím na prepínač zapnite Webový inšpektor.

   

Tiež sa musíte uistiť, že je na vašom Macu povolená ponuka Develop:

1. Otvorte Safari.
2. Vyberte Safari z horných hlavičiek.
3. Ďalej kliknite na Predvoľby.
4. Potom kliknite na Pokročilé.
5. Začiarknite políčko s nápisom Zobraziť ponuku Develop na paneli s ponukami.

Po povolení mobilného zariadenia so systémom iOS aj Macu sa v hornom paneli Macu zobrazí ponuka Develop. Kliknutím naň zobrazíte pripojený iPhone a webovú stránku aktívnu na zariadení. Výberom webovej stránky sa na obrazovke Macu otvorí aj okno Web Inspector pre rovnakú stránku.

Majte však na pamäti, že tieto pokyny fungujú iba pre Safari so systémom Mac, nie pre Safari v systéme Windows.

Ako používať Inspect Element vo Formulároch Google

Môžete tiež použiť Inspect Element vo Formulároch Google. Ak však hľadáte odpovede na kvíz, máte smolu. Odpovede v kódovaní nenájdete. Odpovede môžete zobraziť iba vtedy, ak ste tvorcom alebo editorom formulára. V každom prípade, ak ste študentom odpovedajúcim na kvíz vo Formulároch Google, uvidíte iba svoje vlastné odpovede.

1. Môžete kliknúť pravým tlačidlom myši na formulár a vybrať Skontrolujte aby ste videli celý kód formulára.

Ako používať Skontrolovať prvok, keď je zablokovaný

Občas zistíte, že nemôžete skontrolovať webovú stránku a ak sa pokúsite kliknúť na ňu pravým tlačidlom myši, výber kontroly je sivý. Môžete si myslieť, že je zablokovaný, ale existuje mnoho spôsobov, ako to obísť:

Metóda 1 – Vypnite Javascript

1. Ísť do nastavenie.

   

2. Vyhľadávanie "JavaScript”.

   

3. Vypnúť JavaScript.

   

Metóda 2 – Prístup k nástrojom pre vývojárov na dlhú cestu

Namiesto kliknutia pravým tlačidlom myši na kontrolu urobte toto:

1. Ísť do nastavenie vo vašom prehliadači.

   

2. Vyberte Ďalšie nástroje.

   

3. Prejdite nadol a kliknite na Nástroje pre vývojárov.

   

Metóda 3 – Použitie funkčného klávesu

Môžete tiež skúsiť použiť F12 funkčný kláves na webových stránkach, ktoré blokujú kliknutie pravým tlačidlom myši na kontrolu.

Možno budete musieť vyskúšať všetky tieto metódy, kým narazíte na ten, ktorý vám vyhovuje. Ako poslednú možnosť môžete skúsiť zobraziť zdrojový kód zadaním zobraziť zdroj: [zadajte celú adresu URL].

Ako používať Inspect Element na Discord

Kontrola kódovania na Discord je jednoduchý proces. Stačí použiť Ctrl + Shift + I príkaz alebo F12 na Discord stránke.

Ako používať Inspect Element na školskom Chromebooku

Ak váš Chromebook vydala škola, používanie funkcie Inspect Element zahŕňa niekoľko jednoduchých krokov:

1. Kliknite pravým tlačidlom myši alebo klepnite dvoma prstami na webovú stránku a vyberte Skontrolujte.
2. Stlačte tlačidlo Ctrl + Shift + I.
3. Skúste použiť metódu view-source:[url], napríklad „view-source://www.wikipedia.com“, bez úvodzoviek.

Niektoré školy a organizácie však túto funkciu blokujú. Ak vám to teda nefunguje, možno budete musieť kontaktovať správcu vašej organizácie alebo školy.

Ako používať Inspect Element na hľadanie odpovedí

Pomocou Inspect Element môžete nájsť odpovede na rôzne veci, ako napríklad:

1. Ukážka dizajnu stránky na mobilných zariadeniach.
2. Zistite kľúčové slová, ktoré používajú konkurenti.
3. Rýchlostné testy.
4. Zmena textu na webovej stránke.
5. Nájdite rýchle príklady, ktoré vývojárom ukážu, čo potrebujete.

Keď spustíte panel Inspect Element, uvidíte všetky kódy pre web. To zahŕňa všetky kódy JavaScript, CSS a HTML, ktoré sú v ňom zabudované. Je to ako vidieť zdrojové kódovanie webovej stránky, ibaže v kóde môžete vykonávať zmeny. Navyše môžete vidieť všetky zmeny implementované v reálnom čase.

Vďaka tomuto nástroju je pre obchodníkov, dizajnérov a vývojárov neoceniteľným cieľom zobraziť akékoľvek zmeny dizajnu pred ich dokončením. Vykonávanie zmien v kódovaní pomocou Inspect Element však netrvá večne. Keď stránku znova načítate, vráti sa do predvoleného stavu.

Ďalšie často kladené otázky

Ako môžem použiť príkaz Skontrolovať prvok na nájdenie odpovedí?

Jediným spôsobom, ako nájsť odpovede pomocou funkcie Inspect Element, je, ak ich webová lokalita po odoslaní okamžite odhalí. V tomto prípade sú odpovede prítomné v kódovaní.

V opačnom prípade si pri použití funkcie Kontrola prvku jednoducho prezeráte kódovanie kvízu alebo testu, ako aj všetky odpovede, ktoré odošlete.

Je kontrola prvku nezákonná?

Nie, nástroj Inspect Element nie je nelegálny, je určený pre vývojárov webu. Prezeranie zdrojového kódu webovej stránky nie je nezákonné, problémom sa stáva iba vtedy, ak zhromaždené informácie používate na nekalé účely, ako sú pokusy o zneužitie atď.

Je možné zakázať kontrolu prvku v prehliadači?

Krátka odpoveď je nie.

V prehliadači nemôžete zakázať prvok kontroly. Môžete však nastaviť parametre, ktoré používateľom bránia vykonávať určité akcie, ako je kliknutie pravým tlačidlom myši na webovú stránku. Na internete je množstvo návodov na nastavenie správnych skriptov na deaktiváciu určitých udalostí. Funkciu Skontrolovať prvok však v skutočnosti nemôžete deaktivovať ako celok.

Spoznajte vnútornosti webovej stránky

Vyskúšanie funkcie Inspect Element na webovej stránke je pravdepodobne vývojársky nástroj, o ktorom ste ani nevedeli, že ho potrebujete – aj keď nie ste vývojár. Má veľa dizajnových a marketingových aplikácií, vďaka ktorým bude vaša webová stránka plynulejšia. A možno vám poskytne výhodu nad konkurenciou.

Na čo používate Inspect Element? Povedzte nám o tom v sekcii komentárov nižšie.