Cum se folosește Inspect Element

Device Links

• Android
• Chromebook
• Mac
• Windows
• Dispozitiv lipsește?

Majoritatea oamenilor nu știu că există o comoară de instrumente pentru dezvoltatori la dispoziția lor și că este ascunsă în browserul lor preferat.

Fiecare browser web oferă instrumente pentru dezvoltatori pentru a verifica codarea unui site web. Cu toate acestea, este o entitate străină pentru utilizatorul mediu de internet. La urma urmei, cine vrea să se uite la codarea unui site web, nu?

După cum se dovedește, există o mulțime de lucruri pe care le puteți învăța uitându-vă la codificarea unui site web. Citiți mai departe pentru a afla ce are de oferit funcția de inspectare a elementului și cum să o utilizați.

Majoritatea browserelor au instrumente pentru a inspecta elementele unui site web, dar toate funcționează în general la fel.

Utilizarea Inspect Element în Google Chrome

1. Deschideți site-ul web pe care doriți să îl inspectați.
   
2. Faceți clic dreapta oriunde pe pagină și selectați Inspectați .
   
   SAU
3. Faceți clic pe cele trei puncte verticale din colțul din dreapta al barei de instrumente.
   
4. Accesați Mai multe instrumente .
   
5. Selectați Instrumente pentru dezvoltatori .
   
   SAU
6. Apăsați tasta de comandă rapidă de la tastatură F12 pe un computer (sau CMD + Opțiuni + I pe un Mac.)
   

Utilizarea Inspect Element în Microsoft Edge

1. Deschide un site web.
   
2. Faceți clic pe cele trei puncte verticale din colțul din dreapta sus al barei de instrumente a browserului.
   
3. Derulați în jos și faceți clic pe Mai multe instrumente .
   
4. Faceți clic pe Instrumente pentru dezvoltatori .
   
   SAU
5. Faceți clic dreapta oriunde pe site și faceți clic pe Inspectați .
   
   SAU
6. Apăsați Ctrl + Shift + I.
   

Oricare dintre aceste trei metode vă va oferi același rezultat.

Dacă ați făcut acest lucru corect, se deschide un nou panou în partea de jos a browserului dvs. Acestea sunt Instrumentele pentru dezvoltatori și includ fila Elemente. Acesta este instrumentul de care aveți nevoie pentru a inspecta elementul.

Panoul se va deschide în partea de jos a ecranului ca implicit, dar puteți oricând să schimbați modul în care apare. Urmați acești pași simpli pentru a repoziționa panoul Instrumente pentru dezvoltatori:

1. Faceți clic pe cele trei puncte orizontale din colțul de sus al panoului Instrumente pentru dezvoltatori.
   
2. Selectați o parte de andocare (stânga, jos sau dreapta) sau dezactivați-o într-o fereastră separată.
   

Plasarea cursorului lângă marginea cadrului panoului Instrumente pentru dezvoltatori și tragerea va îngusta sau lărgi spațiul de lucru. De exemplu, dacă alegeți să andocați panoul în partea dreaptă a ferestrei browserului, încercați să plasați cursorul pe marginea din stânga. Puteți trage panoul pentru a-l redimensiona când vedeți cursorul săgeată.

Utilizarea elementului de inspectare (specific OS)

Deși mulți pași implicați ar fi putut fi acoperiți doar arătându-vă cum să utilizați Inspect Element în browser, oricum vă vom arăta cum să faceți pe majoritatea sistemelor de operare.

Cum să utilizați Inspect Element pe un Chromebook

Browserul implicit al unui Chromebook este Google, așa că urmați instrucțiunile browserului Chrome pentru a accesa Inspect Element . Iată un mic curs de perfecţionare pentru tine:

1. Deschide un site web.
   
2. Faceți clic pe cele trei puncte verticale din colțul din dreapta sus al barei de instrumente.
   
3. Selectați Mai multe instrumente .
   
4. Faceți clic pe Instrumente pentru dezvoltatori .
   

De asemenea, puteți utiliza metoda clic dreapta sau tasta funcțională F12 pentru a ajunge mai rapid la Instrumentele pentru dezvoltatori.

Cum se utilizează Inspect Element pe un dispozitiv Android

Rularea Inspect Element pe un dispozitiv Android este ușor diferită. Vezi cum să ajungi la panoul Inspect Element pe Android:

1. Apăsați tasta funcțională F12 .
   
2. Alegeți Comutați bara dispozitivului .
   
3. Selectați dispozitivul Android din meniul drop-down.
   

Când selectați un anumit dispozitiv Android, veți observa că se încarcă o versiune mobilă a site-ului web. De aici, sunteți liber să utilizați funcția Inspectare element pe dispozitivul Android din confortul desktopului.

Această metodă funcționează atât pentru browserele Chrome, cât și pentru Firefox, deoarece au o funcție în Instrumentele pentru dezvoltatori numită Simulare dispozitiv.

De asemenea, funcționează în același mod pentru dispozitivele iPhone. Trebuie doar să îl selectați pe cel potrivit din meniul derulant.

Cum se utilizează Inspect Element în Windows

Instrumentul Inspect Element nu este neapărat specific sistemului de operare, dar este specific browserului. Aceasta înseamnă că Instrumentele pentru dezvoltatori sunt o caracteristică a browserului pe care îl utilizați și nu neapărat Windows. Cu toate acestea, puteți ajunge la panoul Inspectare element, indiferent de browser pe care îl preferați.

Dacă utilizați sistemul de operare Windows, este posibil să utilizați și browserul Microsoft Edge. Aflați cum să accesați Inspect Element pe MS Edge:

1. Deschideți site-ul web pe care doriți să îl inspectați.
   
2. Atingeți cele trei puncte verticale din colțul ferestrei browserului.
   
3. Derulați în jos și selectați Mai multe instrumente .
   
4. Faceți clic pe Instrumente pentru dezvoltatori .
   

De asemenea, puteți utiliza tasta funcțională F12 pentru a accesa Inspect Element mai rapid. De asemenea, fă clic dreapta pe pagina web și selectează Inspectează funcționează.

Cum să utilizați Inspect Element pe un Mac

Dacă utilizați un Mac, browserul preferat este probabil Safari. Deschiderea Inspect Elements pe Safari este ușor diferită față de Chrome și Firefox. Dar este la fel de simplu cu acești pași:

1. Deschideți browserul Safari.
   
2. Faceți clic pe Safari în fila antet și selectați Preferințe din meniul derulant.
   
3. Faceți clic pe pictograma roată avansată situată în partea de sus a ecranului.
   
4. Bifați caseta care spune Afișați meniul Dezvoltare în bara de meniu .
   

Parcurgerea acestor pași activează funcția Inspectați elementul în browser. Dacă nu activați mai întâi Inspectare element, nu veți vedea opțiunea când deschideți un site web.

După ce finalizați acest pas, faceți clic dreapta pe orice pagină web deschisă și selectați Inspectați. De asemenea, puteți utiliza comanda tastelor rapide: CMD + Opțiune + I (inspectați).

Cum se utilizează Inspect Element pe iOS

Doriți să utilizați funcția Inspectați elemente pentru a vedea cum apare o versiune mobilă a unei pagini web pe un iPhone? Puteți face acest lucru și multe altele cu doar câțiva pași simpli. Dar înainte de a vă uita la un element, trebuie să activați Web Inspector pentru dispozitivul dvs. iOS:

1. Accesați Setări .
   
2. Acum, selectați Safari .
   
3. Derulați în partea de jos și atingeți Meniul avansat .
   
4. Acum, atingeți comutatorul de comutare pentru a activa Web Inspector .
   

De asemenea, asigurați-vă că meniul Dezvoltare este activat pe Mac urmând pașii din secțiunea de mai sus.

După ce activați atât dispozitivele mobile iOS, cât și Mac-urile, veți vedea meniul Dezvoltare în bara de sus a Mac-ului dvs. Faceți clic pe el pentru a vedea iPhone-ul conectat și pagina web activă pe dispozitiv. Selectarea paginii web deschide, de asemenea, o fereastră Web Inspector pentru aceeași pagină de pe ecranul Mac.

Rețineți, totuși, că aceste instrucțiuni funcționează numai pentru Safari care rulează un Mac, nu Safari pe Windows.

Cum să utilizați Inspectați elementul când este blocat

Ocazional, veți descoperi că nu puteți inspecta o pagină web, iar selecția Inspectați este inactivă dacă încercați să faceți clic dreapta pe ea. S-ar putea să credeți că este blocat, dar există numeroase modalități de a evita acest lucru:

Metoda 1 - Dezactivați Javascript

1. Accesați Setări .
   
2. Căutați JavaScript .
   
3. Dezactivați JavaScript .
   

Metoda 2 – Accesați instrumentele pentru dezvoltatori pe cale lungă

În loc să faceți clic dreapta pe mouse pentru a inspecta, procedați astfel:

1. Accesați Setări în browser.
   
2. Selectați Mai multe instrumente .
   
3. Derulați în jos și faceți clic pe Instrumente pentru dezvoltatori .
   

Metoda 3 – Utilizarea tastei funcționale

De asemenea, puteți încerca să utilizați tasta funcțională F12 pe paginile web care blochează clic-dreapta pentru Inspect.

Poate fi necesar să încercați toate aceste metode înainte de a găsi una care funcționează pentru dvs. Ca ultimă soluție, puteți încerca și să vizualizați codul sursă tastând view-source: [enter full url] .

Cum să utilizați Inspect Element pe un Chromebook de școală

Dacă Chromebookul dvs. a fost eliberat de o școală, utilizarea funcției Inspectați elementul implică câțiva pași simpli:

1. Faceți clic dreapta sau atingeți cu două degete pe pagina web și selectați Inspectați .
   
2. Apăsați Ctrl + Shift + I.
   
3. Încercați să utilizați metoda view-source:[url], cum ar fi view-source:https://www.wikipedia.com .
   
   

Cu toate acestea, unele școli și organizații blochează această funcție, așa că, dacă nu funcționează pentru dvs., poate fi necesar să luați legătura cu organizația sau administratorul școlii dvs.

Cum să utilizați Inspect Element pentru a găsi răspunsuri

Puteți folosi Inspect Element pentru a găsi răspunsuri la o varietate de lucruri, cum ar fi:

• Previzualizarea designului site-ului pe dispozitive mobile.
• Aflați cuvintele cheie pe care le folosesc concurenții.
• Teste de viteza.
• Modificarea textului pe o pagină web.
• Găsiți exemple rapide pentru a le arăta dezvoltatorilor de ce aveți nevoie.

Când lansați panoul Inspect Element, veți vedea toate codurile pentru site-ul web. Aceasta include toate codurile JavaScript, CSS și HTML încorporate în el. Este ca și cum ai vedea codul sursă al unei pagini web, cu excepția faptului că poți face modificări codului. În plus, puteți vedea orice modificări implementate în timp real.

Acest instrument face ca specialiștii de marketing, designerii și dezvoltatorii să vadă orice modificări de design înainte de a le finaliza. Cu toate acestea, efectuarea de modificări în codificare cu Inspect Element nu durează pentru totdeauna. Când reîncărcați pagina, aceasta va reveni la starea implicită.

Întrebări frecvente suplimentare

Dacă nu sunteți un expert în Inspect Element după ce ați citit mai sus, există mai multe răspunsuri aici.

Cum folosesc comanda Inspectare element pentru a găsi răspunsuri?

Singura modalitate de a găsi răspunsuri folosind funcția Inspectați elementul este dacă site-ul web îl dezvăluie instantaneu după trimitere. În acest caz, răspunsurile sunt prezente în codificare.

În caz contrar, pur și simplu vizualizați codul pentru test sau test atunci când utilizați funcția Inspectați element, precum și orice răspunsuri pe care le trimiteți.

Inspectați elementul este ilegal?

Nu, instrumentul Inspect Element nu este ilegal; este conceput pentru dezvoltatorii web. Vizualizarea codului sursă pentru un site web nu este ilegală; devine o problemă numai dacă utilizați informațiile adunate în scopuri nefaste, cum ar fi încercarea de exploatări etc.

Este posibil să dezactivați inspectarea elementului în browser?

Răspunsul scurt este nu.

Nu puteți dezactiva elementul Inspectare într-un browser, dar puteți seta parametri care împiedică utilizatorii să facă anumite acțiuni, cum ar fi clic dreapta pe o pagină web. Există numeroase tutoriale online pentru a seta scripturile adecvate pentru a dezactiva anumite evenimente. Cu toate acestea, nu puteți dezactiva de fapt funcția Inspectați elementul în întregime.

Faceți cunoștință cu interiorul unei pagini web

Verificarea funcției Inspect Element a unei pagini web este probabil un instrument de dezvoltator de care nu știai niciodată că ai nevoie – chiar dacă nu ești tu însuți un dezvoltator. Are o mulțime de aplicații de design și marketing care vă pot face site-ul web să funcționeze mai ușor. Și poate vă oferă un avantaj față de un concurent.

Pentru ce folosești Inspect Element? Povestește-ne despre asta în secțiunea de comentarii de mai jos.