Vývojári a dizajnéri používateľského rozhrania používajú funkciu Inspect Element na úpravu webových stránok online bez zmeny zdrojového kódu. Ale ako skontrolovať prvky bez toho, aby ste absolvovali kurz vývoja webu?
Inspect Element je praktický vývojársky nástroj, ktorý sa dodáva s populárnymi webovými prehliadačmi. Potrebujete len vedieť, ako nástroj nasadiť niekoľkými kliknutiami počas prehliadania webových stránok.
Môžete urobiť veľa magických trikov, ako je zmena rozloženia webových stránok, vytváranie snímok obrazovky bez textu, zmena písma, úprava čísel a ďalšie.
Nižšie nájdete stručného sprievodcu krok za krokom, v ktorom sa dozviete, ako kontrolovať prvky bez námahy.
Čo je kontrolný prvok?
Inspect Element je nástroj na vývoj webu dostupný vo väčšine webových prehliadačov. Môžete ho použiť na úpravu zdrojového kódu každej webovej stránky, ktorú navštevujete.
Zmeny, ktoré vykonáte, sa dejú v karanténe vo webovom prehliadači. Na skutočnej webovej stránke teda nevykonávate žiadne zmeny. Po obnovení stránky zmiznú aj povrchné zmeny, ktoré vykonáte.
Tu je niekoľko kreatívnych spôsobov, ako ho použiť:
- Potrebujete urobiť snímku obrazovky z webovej stránky a texty na obrázku vás znepokojujú. Na odstránenie týchto textov použite nástroj Skontrolovať prvok.
- Chcete zo žartu svojich priateľov ukázať im svoje meno v New York Times alebo Washington Post. Inspect Element je najlepší spôsob, ako to urobiť.
- Testujte ladiace kódy na webových stránkach ich aplikovaním v reálnom čase pomocou nástroja Inspect Element. Ak to funguje, môžete zmeniť zdrojový kód backendu.
- Ako digitálny obchodník môžete pomocou tohto mocného nástroja na vývoj webu odhaliť kľúčové slová konkurentov, názvy SEO, metaznačky atď.
Ako skontrolovať prvky v systéme Windows
Používanie nástroja Inspect Element v systéme Windows je smiešne jednoduché. Nižšie nájdete podrobného sprievodcu na kontrolu prvkov pomocou rôznych webových prehliadačov v systéme Windows:
Nástroj na kontrolu prehliadača Google Chrome
- Pri použití Google Chrome, kliknite pravým tlačidlom myši kdekoľvek na webovej stránke.
- Zobrazí sa kontextové menu po kliknutí pravým tlačidlom myši.
- V spodnej časti uvidíte Skontrolujte.
- Kliknite Skontrolujte na zobrazenie kódov HTML a CSS na a panel na pravej strane.
Ako otvorím Inspect Element v prehliadači Chrome bez kliknutia pravým tlačidlom?
Existuje niekoľko praktických skratiek na otvorenie nástroja Inspect Element v prehliadači Google Chrome pre Windows. Tieto klávesové skratky sú uvedené nižšie:
- Ctrl + Shift + C
- Funkčný kláves F12
Vyššie uvedené klávesové skratky fungujú aj v prehliadači Mozilla pre Windows.
Nástroj Mozilla Inspector Tool
V prehliadači Mozilla je postup rovnaký ako v prehliadači Google Chrome. Avšak, inšpektor okno sa zobrazí v spodnej časti prehliadača namiesto na pravej strane, ako v prehliadači Google Chrome.
Nástroj Microsoft Edge Inspect Tool
Prekvapivo, Microsoft Edge’s Inspect Element funguje podobne ako prehliadač Google Chrome. Nástroj Kontrola je dostupný po kliknutí pravým tlačidlom myši. Kódy HTML a CSS sa tiež zobrazujú na pravej strane, podobne ako v prehliadači Google Chrome.
Ako skontrolovať prvky na Macu
Používate prehliadač Google Chrome, Mozilla Firefox alebo Microsoft Edge na počítačoch Mac od spoločnosti Apple? Ak áno, potom môžete nasadiť nástroj Inspect Element podľa krokov uvedených vyššie v časti Windows.
Ak však používate predvolený webový prehliadač MacOS, Safari, potom je použitie nástroja Inspect Element náročná hra. V predvolenom nastavení Safari nezobrazuje Inspect Element na Macu. Tu je to, čo musíte urobiť:
Ako otvoriť Inspect Element na Macu
Najprv musíte aktivovať vývojárske nástroje v Safari na Macu. Tu je postup:
- Bežať a Prehliadač Safari.
- Navštívte webovú stránku, na ktorej chcete skontrolovať prvky webu.
- Vyberte Safari z horného panela s ponukami prehliadača Safari.
- Kliknite Predvoľby z kontextovej ponuky, ktorá sa otvorí.
- Na Obrazovka predvolieb, vyberte Pokročilé.
- Začiarknite políčko Zobraziť Rozvinúť menu v spodnej časti Rozšírené predvoľby obrazovke.
Úspešne ste povolili vývojárske nástroje v Safari pre Mac. Ak chcete použiť Inspect Element, postupujte podľa týchto krokov:
- Na akomkoľvek prvku webovej stránky, ako je text alebo obrázok, kliknite pravým tlačidlom myši.
- Zobrazí sa kontextové menu. V spodnej časti uvidíte Preskúmať prvok.
- Kliknutím na to otvoríte sekciu ladenia pod webovou stránkou zobrazujúcu HTML a CSS kódy.
Aké sú kľúče pre kontrolný prvok?
Možno hľadáte skratky pre Inspect Element na Macu. Môžete použiť nasledovné:
- Príkaz + Shift + C
- Stlačte tlačidlo Kontrola a potom vyberte ľubovoľný prvok.
- Kliknite na trackpad dvoma prstami
Ako skontrolovať prvky na Chromebookoch
Chromebook používa Google Chrome ako predvolený prehliadač. Preto po otvorení akejkoľvek webovej stránky jednoducho kliknite pravým tlačidlom myši a v kontextovej ponuke, ktorá nasleduje, nájdite možnosť Skontrolovať prvok.
Ak používate Chromebook v práci alebo v škole, možno si kladiete túto otázku:
Prečo nemôžem skontrolovať svoj školský Chromebook?
Väčšina školských a firemných správcov deaktivuje pokročilé funkcie na Chromebooku, ktorý vám poskytujú na prácu alebo štúdium. Keďže nástroje pre vývojárov sú pokročilé funkcie, je pravdepodobné, že váš školský alebo pracovný Chromebook nezobrazí nástroj Inspect Element.
Ako skontrolovať prvky na iPade/iPhone
Bohužiaľ, nástroj Inspect Element nemôžete použiť na iPhone alebo iPad bez Macu.
iOS a iPadOS majú Web Inspector pre aplikáciu Safari. Funguje to však iba vtedy, ak pripojíte mobilné zariadenie k Macu, na ktorom ste už aktivovali vývojárske nástroje pre Safari. Nižšie sú uvedené kroky, ktoré môžete vyskúšať:
- Otvorte iPad/iPhone nastavenie aplikácie.
- Kliknite Safari na ľavom navigačnom paneli.
- Potom prejdite nadol na pravej strane a vyhľadajte a vyberte Pokročilé.
- Aktivujte prepínač pre Webový inšpektor.
- Teraz pripojte mobilné zariadenie k Macu pomocou USB.
- Autorizujte iPhone/iPad na Macu.
- Otvorte ľubovoľnú webovú stránku na mobilnom zariadení v prehliadači Safari.
- Teraz spustite Safari na Macu a vyberte Rozvíjať na hornom paneli s ponukami.
- V kontextovej ponuke, ktorá sa otvorí, vyhľadajte názov svojho mobilného zariadenia.
- Umiestnením kurzora na mobilné zariadenie zobrazíte všetky otvorené webové stránky.
- Teraz vyberte ľubovoľnú webovú stránku na zobrazenie zdrojového kódu HTML a CSS v prehliadači Safari na Macu.
Záver
Preskúmali ste všetky možné spôsoby použitia nástroja Inspect Element na dočasné úpravy webových stránok. Tiež ste sa naučili, ako kontrolovať prvky pre rôzne zariadenia, ako sú Mac, Windows, Chromebook, iPad a iPhone.
Keď budete nabudúce potrebovať upraviť webovú stránku pre zábavu alebo pre profesionálne potreby, vyskúšajte tieto metódy. Tieto jednoduché kroky si určite zamilujete oproti iným komplikovaným metódam vysvetleným inde.
Nezabudnite zanechať komentáre nižšie, ak vám vyššie uvedené kroky pomohli, akákoľvek metóda, ktorá sa vám zdá náročná, alebo nejaké tajné tipy týkajúce sa nástroja Inspect Element.
Potrebujete webovú stránku ako tlačenú referenciu? Naučiť sa ako rýchlo uložiť webovú stránku ako PDF teraz!