Kako pregledati elemente v sistemu Mac, Windows, iPhone in iPad

Razvijalci in oblikovalci uporabniškega vmesnika uporabljajo funkcijo Inspect Element za spreminjanje spletnih strani brez spreminjanja izvorne kode. Toda kako pregledati elemente, ne da bi opravili tečaj spletnega razvoja?

Inspect Element je priročno orodje za razvijalce, ki je takoj pripravljeno s priljubljenimi spletnimi brskalniki. Med brskanjem po spletnih mestih morate samo vedeti, kako uvesti orodje v nekaj klikih.

Izvedete lahko številne čarovniške trike, kot je spreminjanje postavitve spletnega mesta, snemanje posnetkov zaslona brez besedila, spreminjanje pisav, spreminjanje številk in drugo.

Spodaj najdete jedrnat vodnik po korakih, da se naučite brez težav pregledovati elemente.

Kaj je Inspect Element?

Inspect Element je orodje za spletni razvoj, ki je na voljo v večini spletnih brskalnikov. Uporabite ga lahko za urejanje izvorne kode sprednjega dela katerega koli spletnega mesta, ki ga obiščete.

Spremembe, ki jih naredite, se zgodijo v peskovniku znotraj vašega spletnega brskalnika. Torej ne spreminjate dejanskega spletnega mesta. Poleg tega površne spremembe, ki jih naredite, izginejo, ko osvežite stran.

Tukaj je nekaj ustvarjalnih načinov za uporabo:

• Na spletnem mestu morate narediti posnetek zaslona in besedilo na sliki vas moti. Za brisanje teh besedil uporabite orodje Inspect Element.
• Svoje prijatelje želite pošaliti tako, da jim pokažete svoje ime v New York Timesu ali Washington Postu. Inspect Element je najboljši način za to.
• Preskusite kode za odpravljanje napak na spletnih mestih tako, da jih uporabite v realnem času z orodjem Inspect Element. Če deluje, lahko spremenite izvorno kodo zaledja.
• Kot digitalni tržnik lahko s tem mogočnim orodjem za spletni razvoj razkrijete ključne besede konkurentov, naslove SEO, meta oznake itd.

Kako pregledati elemente v sistemu Windows

Uporaba orodja Inspect Element v sistemu Windows je smešno enostavna. Spodaj najdete vodnik po korakih za pregledovanje elementov z različnimi spletnimi brskalniki v sistemu Windows:

Orodje Google Chrome Inspect

Kako pregledati elemente v brskalniku Windows Chrome

• Ko uporabljate Google Chrome , z desno tipko miške kliknite kjer koli na spletnem mestu.
• Odpre se kontekstni meni z desnim klikom.
• Na dnu boste videli Pregled .
• Kliknite Pregled , če si želite ogledati kode HTML in CSS na desni strani plošče .

Kako odprem Inspect Element v Chromu brez desnega klika?

Obstaja nekaj priročnih bližnjic za odpiranje orodja Inspect Element v Google Chromu za Windows. Te bližnjične tipke so naslednje:

• Ctrl + Shift + C
• Funkcijska tipka F12

Zgornje bližnjične tipke delujejo tudi v brskalniku Mozilla za Windows.

Orodje Mozilla Inspector

Kako pregledati elemente v brskalniku Windows Mozilla

V brskalniku Mozilla je postopek enak kot v brskalniku Google Chrome. Vendar pa bo okno inšpektorja prikazano na dnu brskalnika namesto na desni strani, kot je v brskalniku Google Chrome.

Orodje Microsoft Edge Inspect

Kako pregledati elemente v brskalniku Windows Edge

Presenetljivo je, da Inspect Element Microsoft Edge deluje podobno kot brskalnik Google Chrome. Orodje Inspect je na voljo z desnim klikom. Poleg tega sta kodi HTML in CSS prikazani na desni strani, podobno kot Google Chrome.

Kako pregledati elemente na Macu

Ali uporabljate Google Chrome, Mozilla Firefox ali Microsoft Edge v Applovih računalnikih Mac? Če je odgovor pritrdilen, potem lahko uvedete orodje Inspect Element tako, da sledite korakom, omenjenim zgoraj v razdelku Windows.

Če pa uporabljate privzeti spletni brskalnik macOS, Safari, je uporaba orodja Inspect Element zapletena igra. Safari privzeto ne prikaže možnosti Inspect Element v sistemu Mac. Tukaj je tisto, kar morate storiti:

Kako odpreti Inspect Element na Macu

Najprej morate aktivirati orodja za razvijalce v Safariju na Macu. Evo kako:

• Zaženite brskalnik Safari .
• Obiščite spletno mesto, na katerem želite pregledati spletne elemente.
• V zgornji menijski vrstici brskalnika Safari izberite Safari .
• V kontekstnem meniju, ki se odpre, kliknite Nastavitve .
• Na zaslonu z nastavitvami izberite Napredno .
• Označite meni Pokaži razvoj na dnu zaslona z naprednimi nastavitvami .

Uspešno ste omogočili orodja za razvijalce v Safariju za Mac. Zdaj sledite tem korakom za uporabo Inspect Element:

• Na katerem koli elementu spletnega mesta, kot je besedilo ali slika, z desno miškino tipko kliknite .
• Prikaže se kontekstni meni. Na dnu boste videli Pregled elementa .
• Kliknite to, da odprete razdelek za odpravljanje napak pod spletnim mestom, ki prikazuje kode HTML in CSS .

Kateri so ključi za pregled elementa?

Morda iščete bližnjice za Inspect Element na Macu. Uporabite lahko naslednje:

• Command + Shift + C
• Pritisnite tipko Control in nato izberite poljuben element.
• Kliknite sledilno ploščico z dvema prstoma

Kako pregledati elemente na Chromebookih

Chromebook uporablja Google Chrome kot privzeti brskalnik. Zato po odprtju katerega koli spletnega mesta preprosto kliknite z desno tipko miške, da v kontekstnem meniju, ki sledi, poiščete možnost Pregled elementa.

Če Chromebook uporabljate v službi ali šoli, si morda postavljate to vprašanje:

Zakaj ne morem pregledati v šolskem Chromebooku?

Večina šolskih in poslovnih skrbnikov onemogoči napredne funkcije v Chromebooku, ki vam ga zagotovijo za delo ali študij. Ker so orodja za razvijalce napredne funkcije, vaš Chromebook v šoli ali službi verjetno ne bo prikazal orodja Inspect Element.

Kako pregledati elemente na iPad/iPhone

Na žalost ne morete uporabljati orodja Inspect Element v napravi iPhone ali iPad brez računalnika Mac.

iOS in iPadOS imata Web Inspector za aplikacijo Safari. Vendar pa deluje le, če mobilno napravo povežete z računalnikom Mac, na katerem ste že aktivirali orodja za razvijalce za Safari. Spodaj so navedeni koraki, ki jih lahko poskusite:

• Odprite aplikacijo Nastavitve za iPad/iPhone .
• V levem podoknu za krmarjenje kliknite Safari .

Odpiranje nastavitev Safari na iPad ali iPhone

• Nato se pomaknite navzdol na desni strani, da poiščete in izberete Napredno .

Aktiviranje spletnega inšpektorja na iPadu in iPhoneu

• Aktivirajte stikalo za Web Inspector .
• Zdaj povežite mobilno napravo z računalnikom Mac prek USB-ja .
• Pooblastite iPhone/iPad v sistemu Mac.
• Odprite katero koli spletno stran v mobilni napravi v Safariju.
• Zdaj zaženite Safari na Macu in izberite Razvijaj v zgornji menijski vrstici.
• V kontekstnem meniju, ki se odpre, poiščite ime svoje mobilne naprave.
• Premaknite kazalec nad mobilno napravo, da si ogledate vsa odprta spletna mesta.
• Zdaj izberite katero koli spletno mesto za ogled izvorne kode HTML in CSS v Macovem brskalniku Safari.

Zaključek

Raziskali ste vse možne načine uporabe orodja Inspect Element za začasno urejanje spletnih strani. Naučili ste se tudi, kako pregledati elemente za različne naprave, kot so Mac, Windows, Chromebook, iPad in iPhone.

Ko boste naslednjič morali spremeniti spletno stran za zabavo ali poklicne potrebe, poskusite te metode. Ti preprosti koraki vam bodo zagotovo všeč pred drugimi zapletenimi metodami, razloženimi drugje.

Spodaj ne pozabite pustiti komentarjev, če so vam zgornji koraki pomagali, katere koli metode, ki se vam zdijo zahtevne, ali skrivnih nasvetov o orodju Inspect Element.

Potrebujete spletno stran kot tiskano referenco? Naučite se hitro shraniti spletno stran kot PDF zdaj!