Kako pregledati elemente na Macu, Windowsu, iPhoneu i iPadu

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 promjene 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 stručnjak za digitalno oglašavanje, možete otkriti ključne riječi konkurenata, SEO naslove, meta oznake itd. pomoću ovog moćnog alata 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

Kako pregledati elemente u pregledniku Windows Chrome

• Kada koristite Google Chrome , desnom tipkom miša kliknite bilo gdje na web stranici.
• Pojavit će se kontekstni izbornik desnim klikom.
• Na dnu ćete vidjeti Pregledaj .
• Kliknite Pregledaj da biste vidjeli HTML i CSS kodove na ploči 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

Kako pregledati elemente na Windows pregledniku Mozilla

U pregledniku Mozilla postupak je isti kao u pregledniku Google Chrome. Međutim, prozor inspektora prikazat će se na dnu preglednika umjesto na desnoj strani, kao u Google Chromeu.

Alat Microsoft Edge Inspect

Kako pregledati elemente u pregledniku Windows Edge

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. Safari prema zadanim postavkama 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:

• Pokrenite preglednik Safari .
• Posjetite web stranicu na kojoj želite pregledati web elemente.
• Odaberite Safari na gornjoj traci izbornika preglednika Safari.
• Pritisnite Preferences iz kontekstnog izbornika koji se otvori.
• Na zaslonu postavki odaberite Napredno .
• Označite izbornik Prikaži razvoj na dnu zaslona Napredne postavke .

Uspješno ste omogućili razvojne alate na Safariju za Mac. Sada slijedite ove korake da biste koristili Inspect Element:

• Desnom tipkom miša kliknite na bilo koji element web stranice poput teksta ili slike .
• Pojavit će se kontekstni izbornik. Na dnu ćete vidjeti Provjeri element .
• Kliknite na to da biste otvorili odjeljak za ispravljanje pogrešaka ispod web stranice koji prikazuje HTML i CSS kodove.

Koji su ključevi za Inspect Element?

Možda tražite prečace za Inspect Element na Macu. Možete koristiti sljedeće:

• Command + Shift + C
• Pritisnite tipku Control 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 pregledati 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 aplikaciju Postavke za iPad/iPhone .
• Kliknite Safari na lijevoj strani navigacijskog okna.

Otvaranje Safari postavki na iPadu ili iPhoneu

• Zatim se pomaknite prema dolje s desne strane kako biste pronašli i odabrali Napredno .

Aktivacija Web Inspectora na iPadu i iPhoneu

• Aktivirajte prekidač za Web Inspector .
• Sada spojite mobilni uređaj na Mac pomoću USB-a .
• Autorizirajte iPhone/iPad na Macu.
• Otvorite bilo koju web stranicu na mobilnom uređaju u Safariju.
• Sada pokrenite Safari na Macu i odaberite Develop 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 na 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 ispod 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čite sada kako brzo spremiti web stranicu kao PDF !