Ako skontrolovať prvky na Mac, Windows, iPhone a iPad

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 front-end akejkoľvek 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, meta tagy 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

Ako skontrolovať prvky v prehliadači Chrome Windows

• Pri používaní prehliadača Google Chrome kliknite pravým tlačidlom myši kdekoľvek na webovej lokalite.
• Zobrazí sa kontextové menu po kliknutí pravým tlačidlom myši.
• V dolnej časti uvidíte položku Skontrolovať .
• Kliknutím na Skontrolovať zobrazíte kódy HTML a CSS na paneli 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

Ako skontrolovať prvky v prehliadači Mozilla Windows

V prehliadači Mozilla je postup rovnaký ako v prehliadači Google Chrome. Okno Inšpektora sa však zobrazí v spodnej časti prehliadača namiesto na pravej strane, ako v prehliadači Google Chrome.

Nástroj Microsoft Edge Inspect Tool

Ako skontrolovať prvky v prehliadači Windows Edge

Prekvapivo funguje Inspect Element od Microsoft Edge 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žívanie 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:

• Spustite prehliadač Safari .
• Navštívte webovú stránku, na ktorej chcete skontrolovať prvky webu.
• V hornom paneli s ponukami prehliadača Safari vyberte Safari .
• V kontextovej ponuke, ktorá sa otvorí, kliknite na položku Predvoľby .
• Na obrazovke Predvoľby vyberte položku Rozšírené .
• Začiarknite políčko Zobraziť ponuku Vývoj v spodnej časti obrazovky Rozšírené predvoľby .

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

• Kliknite pravým tlačidlom myši na ľubovoľný prvok webovej lokality, napríklad text alebo obrázok .
• Zobrazí sa kontextové menu. V dolnej časti uvidíte položku Skontrolovať prvok .
• Kliknutím na to otvoríte sekciu ladenia pod webovou stránkou zobrazujúcu kódy HTML a CSS .

Aké sú kľúče pre kontrolný prvok?

Možno hľadáte skratky pre Inspect Element na Macu. Môžete použiť nasledovné:

• Command + Shift + C
• Stlačte kláves Control 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 mobilné zariadenie pripojíte 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 aplikáciu Nastavenia iPadu/iPhonu .
• Kliknite na Safari na ľavom navigačnom paneli.

Otvorenie nastavení Safari na iPade alebo iPhone

• Potom prejdite nadol na pravej strane a nájdite a vyberte položku Rozšírené .

Aktivácia Web Inspector na iPade a iPhone

• Aktivujte prepínač pre Web Inspector .
• 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 Develop 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 a zobrazte zdrojový kód 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ódu, ktorú považujete za náročnú, alebo nejaké tajné tipy týkajúce sa nástroja Inspect Element.

Potrebujete webovú stránku ako tlačenú referenciu? Zistite, ako rýchlo uložiť webovú stránku vo formáte PDF !