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
- Pri uporabi Google Chrome, desni klik kjerkoli na spletni strani.
- Odpre se kontekstni meni z desnim klikom.
- Na dnu boste videli Preglejte.
- Kliknite Preglejte za ogled kode HTML in CSS na a desno stransko ploščo.
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
V brskalniku Mozilla je postopek enak kot v brskalniku Google Chrome. Vendar pa je Inšpektor bo prikazano na dnu brskalnika namesto na desni strani, kot v Google Chromu.
Orodje Microsoft Edge Inspect
Presenetljivo je, da Microsoft Edge Inspect Element 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. Takole:
- Teči the Brskalnik Safari.
- Obiščite spletno mesto, na katerem želite pregledati spletne elemente.
- Izberite Safari v zgornji menijski vrstici brskalnika Safari.
- Kliknite Nastavitve iz kontekstnega menija, ki se odpre.
- Na Zaslon z nastavitvami, izberite Napredno.
- Označite Prikaži Razviti meni na dnu Napredne nastavitve zaslon.
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, desni klik.
- Prikaže se kontekstni meni. Na dnu boste videli Preglej element.
- Kliknite to, da odprete razdelek za odpravljanje napak pod spletnim mestom, ki prikazuje HTML in CSS kode.
Kateri so ključi za pregled elementa?
Morda iščete bližnjice za Inspect Element na Macu. Uporabite lahko naslednje:
- Ukaz + Shift + C
- Pritisnite Nadzor 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 iPad/iPhone nastavitve aplikacija
- Kliknite Safari v levem podoknu za krmarjenje.
- Nato se pomaknite navzdol na desni strani, da poiščete in izberete Napredno.
- Aktivirajte stikalo za spletni inšpektor.
- Zdaj povežite mobilno napravo z računalnikom Mac z uporabo USB.
- Pooblastite iPhone/iPad v sistemu Mac.
- Odprite katero koli spletno stran v mobilni napravi v Safariju.
- Zdaj zaženite Safari na Macu in izberite Razviti 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 shranite spletno stran kot PDF zdaj!