Programeri i dizajneri korisničkog sučelja koriste značajku Inspect Element za izmjenu web stranica na mreži bez mijenjanja izvornog koda. Ali kako pregledati elemente bez pohađanja tečaja web razvoja?
Inspect Element je praktičan alat za razvojne programere koji dolazi odmah uz popularne web preglednike. Samo trebate znati kako implementirati alat u nekoliko klikova dok pregledavate web stranice.
Možete izvoditi mnoge čarobne trikove poput mijenjanja izgleda web stranice, snimanja zaslona bez teksta, mijenjanja fontova, mijenjanja brojeva i više.
U nastavku pronađite sažeti vodič korak po korak kako biste naučili kako bez napora pregledavati elemente.
Što je Inspect Element?
Inspect Element je alat za web razvoj dostupan u većini web preglednika. Možete ga koristiti za uređivanje prednjeg izvornog koda bilo koje web stranice koju posjećujete.
Promjene koje napravite događaju se unutar sandboxa unutar vašeg web preglednika. Dakle, ne radite nikakve izmjene na stvarnoj web stranici. Također, površne promjene koje napravite nestaju kada osvježite stranicu.
Evo nekoliko kreativnih načina za njegovu upotrebu:
- Morate napraviti snimku zaslona s web stranice, a tekstovi na slici vas muče. Upotrijebite alat Inspect Element za brisanje tih tekstova.
- Želite se našaliti sa svojim prijateljima pokazujući im svoje ime u New York Timesu ili Washington Postu. Inspect Element je najbolji način za to.
- Testirajte kodove za otklanjanje pogrešaka na web stranicama primjenom u stvarnom vremenu pomoću alata Inspect Element. Ako radi, možete promijeniti izvorni kod pozadine.
- Kao digitalni trgovac, možete otkriti ključne riječi konkurenata, SEO naslove, meta oznake itd., koristeći ovaj moćni alat za web razvoj.
Kako pregledati elemente u sustavu Windows
Korištenje alata Inspect Element u sustavu Windows je smiješno jednostavno. U nastavku pronađite postupni vodič za pregled elemenata pomoću različitih web preglednika u sustavu Windows:
Google Chrome alat za pregled
- Prilikom korištenja Google Chrome, desni klik bilo gdje na web stranici.
- Pojavit će se kontekstni izbornik desnim klikom.
- Na dnu, vidjet ćete Pregledati.
- Klik Pregledati za pregled HTML i CSS kodova na a ploča s desne strane.
Kako mogu otvoriti Inspect Element u Chromeu bez desnog klika?
Postoji nekoliko praktičnih prečaca za otvaranje alata Inspect Element u pregledniku Google Chrome za Windows. Ovi prečaci su sljedeći:
- Ctrl + Shift + C
- Funkcijska tipka F12
Gornje tipke prečaca također rade na pregledniku Mozilla za Windows.
Alat Mozilla Inspector
U pregledniku Mozilla postupak je isti kao u pregledniku Google Chrome. Međutim Inspektor prozor će se prikazati na dnu preglednika umjesto na desnoj strani, kao u Google Chromeu.
Alat Microsoft Edge Inspect
Iznenađujuće, Microsoft Edgeov Inspect Element radi slično pregledniku Google Chrome. Alat Inspect dostupan je desnim klikom. Također, HTML i CSS kodovi prikazuju se s desne strane, slično Google Chromeu.
Kako pregledati elemente na Macu
Koristite li Google Chrome, Mozilla Firefox ili Microsoft Edge na Appleovim Mac računalima? Ako da, tada možete implementirati alat Inspect Element slijedeći gore navedene korake u odjeljku Windows.
Ali, ako koristite zadani macOS web preglednik, Safari, onda je korištenje alata Inspect Element škakljiva igra. Prema zadanim postavkama, Safari ne prikazuje Inspect Element na Macu. Evo što trebate učiniti:
Kako otvoriti Inspect Element na Macu
Najprije morate aktivirati alate za razvojne programere na Safariju na Macu. Evo kako:
- Trčanje the Safari preglednik.
- Posjetite web stranicu na kojoj želite pregledati web elemente.
- Izaberi Safari s gornje trake izbornika preglednika Safari.
- Klik Postavke iz kontekstnog izbornika koji se otvori.
- Na Zaslon postavki, Izaberi Napredna.
- Označite kvačicom Prikaži Razviti izbornik na dnu Napredne postavke zaslon.
Uspješno ste omogućili razvojne alate na Safariju za Mac. Sada slijedite ove korake da biste koristili Inspect Element:
- Na bilo kojem elementu web stranice poput teksta ili slike, desni klik.
- Pojavit će se kontekstni izbornik. Na dnu, vidjet ćete Pregledajte element.
- Kliknite na to da biste otvorili odjeljak za ispravljanje pogrešaka ispod web stranice koji prikazuje HTML i CSS šifre.
Koji su ključevi za Inspect Element?
Možda tražite prečace za Inspect Element na Macu. Možete koristiti sljedeće:
- Naredba + Shift + C
- pritisni Kontrolirati tipku i zatim odaberite bilo koji element.
- Pritisnite dodirnu podlogu s dva prsta
Kako pregledati elemente na Chromebooku
Chromebook koristi Google Chrome kao zadani preglednik. Stoga, nakon otvaranja bilo kojeg web mjesta, jednostavno kliknite desnom tipkom miša kako biste pronašli opciju Inspect Element u kontekstnom izborniku koji slijedi.
Ako koristite Chromebook na poslu ili u školi, možda postavljate ovo pitanje:
Zašto ne mogu provjeriti na svom školskom Chromebooku?
Većina školskih i poslovnih administratora onemogućuje napredne značajke na Chromebooku koji vam daju za rad ili učenje. Budući da su alati za razvojne programere napredne značajke, velika je vjerojatnost da vaš školski ili poslovni Chromebook neće prikazati alat Inspect Element.
Kako pregledati elemente na iPadu/iPhoneu
Nažalost, ne možete koristiti alat Inspect Element na iPhoneu ili iPadu bez Maca.
iOS i iPadOS imaju Web Inspector za aplikaciju Safari. Međutim, radi samo ako povežete mobilni uređaj s Mac računalom na kojem ste već aktivirali razvojne alate za Safari. Ispod su koraci koje možete isprobati:
- Otvorite iPad/iPhone postavke aplikacija
- Klik Safari na lijevoj strani navigacijskog okna.
- Zatim se pomaknite prema dolje s desne strane kako biste pronašli i odabrali Napredna.
- Aktivirajte prekidač za Web inspektor.
- Sada spojite mobilni uređaj na Mac pomoću USB.
- Autorizirajte iPhone/iPad na Macu.
- Otvorite bilo koju web stranicu na mobilnom uređaju u Safariju.
- Sada pokrenite Safari na Macu i odaberite Razviti na gornjoj traci izbornika.
- Na kontekstnom izborniku koji se otvori potražite naziv svog mobilnog uređaja.
- Zadržite pokazivač iznad mobilnog uređaja za pregled svih otvorenih web stranica.
- Sada odaberite bilo koje web mjesto za pregled HTML i CSS izvornog koda u Macovom pregledniku Safari.
Zaključak
Istražili ste sve moguće načine korištenja alata Inspect Element za privremeno uređivanje web stranice. Također ste naučili kako pregledati elemente za razne uređaje kao što su Mac, Windows, Chromebook, iPad i iPhone.
Sljedeći put kada trebate modificirati web stranicu za zabavu ili za profesionalne potrebe, isprobajte ove metode. Definitivno ćete voljeti ove korake bez napora u odnosu na druge komplicirane metode objašnjene drugdje.
Ne zaboravite ostaviti komentare u nastavku ako su vam gornji koraci pomogli, bilo koju metodu koja vam se čini izazovnom ili bilo kakve tajne savjete o alatu Inspect Element.
Trebate web stranicu kao tiskanu referencu? Nauči kako brzo spremite web stranicu kao PDF sada!