Kako koristiti Inspect Element

Igranje igara

Većina ljudi nije svjesna da im je na raspolaganju riznica razvojnih alata i da je skrivena u njihovom omiljenom pregledniku.

Kako koristiti Inspect Element

Svaki web-preglednik nudi alate za razvojne programere za provjeru kodiranja web-mjesta, međutim prosječnom korisniku interneta to je strani entitet. Uostalom, tko želi pogledati kodiranje web stranice, zar ne?

Kako se ispostavilo, postoji mnogo stvari koje možete naučiti gledajući kodiranje web stranice. Čitajte dalje kako biste saznali što nudi značajka inspect elementa i kako je koristiti.

Kako koristiti Inspect Element u određenom pregledniku

Većina preglednika ima alate za provjeru elemenata web-mjesta, ali svi oni općenito rade na isti način.

Korištenje Inspect Element u Google Chromeu

  1. Otvorite web stranicu koju želite pregledati.

  2. Desnom tipkom miša kliknite bilo gdje na stranici i odaberite Pregledati.

    ILI

  3. Kliknite na tri okomite točke u desnom kutu alatne trake.

  4. Ići Više alata.

  5. Izaberi Razvojni alati.

    ILI

  6. pritisni F12 tipkovni prečac na računalu ili CMD + Opcije + I na Macu.

Korištenje Inspect Element u programu Microsoft Edge

  1. Otvorite web stranicu.

  2. Kliknite na tri okomite točke u gornjem desnom kutu alatne trake preglednika.
  3. Pomaknite se prema dolje i kliknite na Više alata.

  4. Kliknite na Razvojni alati.

    ILI

  5. Desnom tipkom miša kliknite bilo gdje na web stranici.
  6. Kliknite na Pregledati.

    ILI

  7. Pritisnite Ctrl + Shift + I.

Bilo koja od ove tri metode će vam dati isti rezultat.

Ako ste to učinili ispravno, vidjet ćete novo okno otvoreno na dnu preglednika. Ovo su alati za razvojne programere i uključuju karticu Elementi. Ovo je alat koji vam je potreban za pregled elementa.

Ploča će se otvoriti pri dnu vašeg zaslona kao zadana postavka, ali uvijek možete promijeniti način na koji se pojavljuje. Slijedite ove jednostavne korake za promjenu položaja ploče Alati za razvojne programere:

  1. Kliknite na tri okomite točke u gornjem kutu ploče Alati za razvojne programere.

  2. Odaberite usidrenu stranu (lijevu, donju ili desnu) ili poništite vezu s zasebnim prozorom.

Pomicanje pokazivača uz rub okvira ploče Alati za razvojne programere i povlačenje će suziti ili proširiti radni prostor. Na primjer, ako odlučite pričvrstiti ploču na desnu stranu prozora preglednika, pokušajte zadržati pokazivač miša na lijevom rubu. Možete povući ploču da biste je promijenili kada vidite pokazivač sa strelicom.

Korištenje elementa pregleda (specifično za OS)

Iako su mnogi od uključenih koraka mogli biti pokriveni samo pokazujući vam kako koristiti Inspect Element u pregledniku, gdje on uopće postoji, ali mi ćemo vam ipak pokazati kako na većini OS-a.

Kako koristiti Inspect Element na Chromebooku

Zadani preglednik na Chromebooku je Google, stoga slijedite upute preglednika Chrome za pristup Pregledajte element. Evo malog tečaja osvježenja znanja za vas:

  1. Otvorite web stranicu.

  2. Kliknite na tri okomite crte u gornjem desnom kutu alatne trake.

  3. Izaberi Više alata.

  4. Kliknite na Razvojni alati.

Također možete koristiti metodu desnog klika ili F12 funkcijsku tipku za brži pristup alatima za razvojne programere.

Kako koristiti Inspect Element na Android uređaju

Pokretanje Inspect Element na Android uređaju je malo drugačije. Provjerite kako doći do panela Inspect Element na Androidu:

  1. pritisni F12 funkcijska tipka.
  2. Odaberite Uključite traku uređaja.

  3. Odaberite Android uređaj s padajućeg izbornika.

Kada odaberete određeni Android uređaj, primijetit ćete da se učitava mobilna verzija web stranice. Odavde možete slobodno koristiti značajku Inspect Element na svom Android uređaju iz udobnosti radne površine.

Ova metoda radi i za preglednike Chrome i Firefox jer imaju značajku u svojim alatima za razvojne programere pod nazivom Device Simulation.

Također radi na isti način za iPhone uređaje. Vi samo trebate odabrati pravu u padajućem izborniku.

Kako koristiti Inspect Element u sustavu Windows

Alat Inspect Element nije nužno specifičan za OS, ali je specifičan za preglednik. To znači da su alati za razvojne programere značajka preglednika koji koristite, a ne nužno Windows. Međutim, možete doći do ploče Inspect Element bez obzira koji preglednik preferirate.

Ako koristite Windows OS, vjerojatno ćete koristiti i preglednik Microsoft Edge. Provjerite kako pristupiti Inspect Element na MS Edgeu:

  1. Otvorite web stranicu koju želite pregledati.

  2. Dodirnite tri okomite točke u kutu prozora preglednika.

  3. Pomaknite se prema dolje i odaberite Više alata.

  4. Kliknite na Razvojni alati.

Također možete koristiti F12 funkcijsku tipku ako želite brže pristupiti Inspect Elementu. Također, radi i desni klik na web stranicu i odabir Inspect.

Kako koristiti Inspect Element na Macu

Ako koristite Mac, vaš je preglednik po izboru vjerojatno Safari. Otvaranje Inspect Elements u Safariju malo je drugačije nego u Chromeu i Firefoxu. Ali jednako je jednostavno s ovim koracima:

  1. Otvorite preglednik Safari.
  2. Kliknite na Safari na kartici zaglavlja.
  3. Izaberi Preference s padajućeg izbornika.
  4. Klikni na Napredna ikona zupčanika koja se nalazi na vrhu zaslona.
  5. Označite okvir koji kaže Prikaži izbornik Razvoj u traci izbornika.

Prolazak kroz ove korake omogućuje značajku Inspect Element na vašem pregledniku. Ako prvo ne omogućite Inspect Element, nećete vidjeti opciju kada otvorite web stranicu.

Nakon što dovršite ovaj korak, jednostavno kliknite desnom tipkom miša na bilo koju otvorenu web stranicu i odaberite Inspect. Također možete koristiti naredbu brzih tipki: CMD + Opcija + I (pregledati).

Kako koristiti Inspect Element na iPhoneu

Želite li koristiti značajku Inspect Elements da vidite kako se mobilna verzija web stranice pojavljuje na iPhoneu? To i više možete učiniti uz samo nekoliko jednostavnih koraka. Ali prije nego pogledate element, morate ga omogućiti Web Inspektor za vaš iOS uređaj:

  1. Ići Postavke.

  2. Sada odaberite Safari.

  3. Pomaknite se do dna i dodirnite Napredni izbornik.

  4. Sada dodirnite prekidač za uključivanje Web Inspektor.

Također, morate biti sigurni da je izbornik Razvoj omogućen na vašem Macu:

  1. Otvorite Safari.
  2. Izaberi Safari iz gornjih zaglavlja.
  3. Zatim kliknite na Preference.
  4. Zatim kliknite na Napredna.
  5. Označite okvir koji kaže Prikaži izbornik Razvoj u traci izbornika.

Nakon što omogućite i iOS mobilni uređaj i Mac, vidjet ćete izbornik Razvoj na gornjoj traci na vašem Macu. Kliknite na njega da vidite povezani iPhone i web stranicu aktivnu na uređaju. Odabirom web stranice također se otvara prozor Web Inspector za istu stranicu na vašem Mac zaslonu.

Međutim, imajte na umu da ove upute funkcioniraju samo za Safari koji radi na Macu, a ne za Safari na Windowsima.

Kako koristiti Inspect Element u Google obrascima

Također možete koristiti element Inspect na Google obrascima. Međutim, ako tražite odgovore na kviz, nemate sreće. Nećete pronaći odgovore ugrađene u kodiranje. Odgovore možete vidjeti samo ako ste kreator ili urednik obrasca. U svakom slučaju, ako ste student koji odgovara na kviz na Google obrascima, vidjet ćete samo svoje odgovore.

  1. Možete kliknuti desnom tipkom na obrazac i odabrati Pregledati da vidite sav kod za obrazac.

Kako koristiti Inspect Element kada je blokiran

Povremeno ćete otkriti da ne možete pregledati web stranicu, a odabir Inspect je zasivljen ako pokušate desnom tipkom miša na nju. Možda mislite da je blokiran, ali postoji mnogo načina za to:

Metoda 1 – Isključite Javascript

  1. Uđi u Postavke.

  2. Traži "JavaScript”.

  3. Isključi JavaScript.

Metoda 2 – Pristupite alatima za razvojne programere na dugi put

Umjesto da kliknete desnom tipkom miša za pregled, učinite ovo:

  1. Ići Postavke u vašem pregledniku.

  2. Izaberi Više alata.

  3. Pomaknite se prema dolje i kliknite na Razvojni alati.

Metoda 3 – Korištenje funkcijske tipke

Također možete pokušati koristiti F12 funkcijska tipka na web stranicama koje blokiraju desni klik za Inspect.

Možda ćete morati isprobati sve ove metode prije nego naiđete na onu koja vam odgovara. U krajnjem slučaju, također možete pokušati pogledati izvorni kod upisivanjem izvor prikaza: [unesite puni url]. Wikipedijina stranica izvora prikaza

Kako koristiti Inspect Element na Discordu

Provjera vašeg kodiranja na Discordu jednostavan je proces. Samo upotrijebite Ctrl + Shift + I zapovijed ili F12 tipku na stranici Discord.

Kako koristiti Inspect Element na školskom Chromebooku

Ako je vaš Chromebook izdala škola, korištenje značajke Inspect Element uključuje nekoliko jednostavnih koraka:

  1. Desnom tipkom miša ili dodirnite web stranicu s dva prsta i odaberite Pregledati.
  2. Pritisnite Ctrl + Shift + I.
  3. Pokušajte upotrijebiti metodu view-source:[url], kao što je "view-source://www.wikipedia.com“, bez navodnika.

Međutim, neke škole i organizacije blokiraju ovu značajku. Dakle, ako vam ne funkcionira, možda ćete morati stupiti u kontakt sa svojom organizacijom ili školskim administratorom.

Kako koristiti Inspect Element za pronalaženje odgovora

Možete koristiti Inspect Element da pronađete odgovore na razne stvari kao što su:

  1. Pregled dizajna stranice na mobilnim uređajima.
  2. Saznajte ključne riječi koje koriste konkurenti.
  3. Testovi brzine.
  4. Promjena teksta na web stranici.
  5. Pronađite brze primjere kako biste programerima pokazali što trebate.

Kada pokrenete ploču Inspect Element, vidjet ćete svo kodiranje za web stranicu. To uključuje sav JavaScript, CSS i HTML kodiranje ugrađeno u njega. To je kao da vidite izvorno kodiranje web-stranice, osim što možete unijeti izmjene u kod. Osim toga, sve promjene možete vidjeti u stvarnom vremenu.

Ovaj alat čini neprocjenjivim za trgovce, dizajnere i programere da pregledaju sve promjene dizajna prije nego što ih dovrše. Međutim, izmjena kodiranja pomoću Inspect Elementa ne traje zauvijek. Kada ponovno učitate stranicu, vratit će se u zadano stanje.

Dodatna FAQ

Kako mogu koristiti naredbu Inspect Element za pronalaženje odgovora?

Jedini način da pronađete odgovore pomoću značajke Inspect Element je ako ga web stranica odmah otkrije nakon podnošenja. U ovom slučaju, odgovori su prisutni u kodiranju.

Inače, jednostavno gledate kodiranje za kviz ili test kada koristite značajku Inspect Element, kao i sve odgovore koje pošaljete.

Je li Inspect Element nezakonit?

Ne, alat Inspect Element nije protuzakonit, dizajniran je za web programere. Pregled izvornog koda za web-mjesto nije protuzakonito, samo postaje problem ako koristite prikupljene podatke u zle svrhe, poput pokušaja eksploatacije itd.

Je li moguće onemogućiti Inspect Element u pregledniku?

Kratak odgovor je ne.

Ne možete onemogućiti Inspect Element u pregledniku. Ali možete postaviti parametre koji sprječavaju korisnike da rade određene radnje kao što je desni klik na web-stranicu. Na mreži postoje brojni vodiči za postavljanje pravih skripti za onemogućavanje određenih događaja. Međutim, zapravo ne možete onemogućiti značajku Inspect Element u cijelosti.

Upoznajte unutrašnjost web-stranice

Provjera značajke Inspect Element na web-stranici vjerojatno je alat za razvojne programere za koji niste znali da vam je potreban - čak i ako sami niste programer. Ima mnoštvo dizajnerskih i marketinških aplikacija koje mogu učiniti da vaša web stranica radi glatko. I možda vam dati prednost u odnosu na konkurenta.

Za što koristite Inspect Element? Recite nam o tome u odjeljku za komentare u nastavku.