Cum să inspectați elementele pe Mac, Windows, iPhone și iPad

Dezvoltatorii și designerii de interfață de utilizare folosesc funcția Inspectare element pentru a modifica site-urile web online fără a modifica codul sursă. Dar cum să inspectăm elemente fără a urma un curs de dezvoltare web?

Inspect Element este un instrument de dezvoltator la îndemână care vine din cutie cu browserele web populare. Trebuie doar să știți cum să implementați instrumentul în câteva clicuri în timp ce navigați pe site-uri web.

Puteți face multe trucuri magice, cum ar fi schimbarea aspectului site-ului web, realizarea de capturi de ecran fără text, schimbarea fonturilor, modificarea numerelor și multe altele.

Găsiți mai jos un ghid concis pas cu pas pentru a afla cum să inspectați elementele fără efort.

Ce este Inspect Element?

Inspect Element este un instrument de dezvoltare web disponibil în majoritatea browserelor web. Îl puteți folosi pentru a edita codul sursă front-end al oricărui site web pe care îl vizitați.

Modificările pe care le faceți au loc într-un sandbox din browserul dvs. web. Deci, nu faceți nicio modificare site-ului propriu-zis. De asemenea, modificările superficiale pe care le faci dispar atunci când reîmprospătezi pagina.

Iată câteva moduri creative de a-l folosi:

• Trebuie să faci o captură de ecran de pe un site web, iar textele de pe imagine te deranjează. Utilizați instrumentul Inspectare element pentru a șterge acele texte.
• Vrei să faci o glumă prietenilor tăi arătându-le numele tău în New York Times sau Washington Post. Inspectați elementul este cea mai bună modalitate de a face acest lucru.
• Testați codurile de depanare pe site-uri web, aplicându-le în timp real folosind instrumentul Inspect Element. Dacă funcționează, puteți schimba codul sursă backend.
• În calitate de agent de marketing digital, puteți dezvălui cuvintele cheie ale concurenților, titlurile SEO, metaetichetele etc., folosind acest instrument puternic de dezvoltare web.

Cum să inspectați elementele pe Windows

Utilizarea instrumentului Inspect Element pe Windows este ridicol de ușoară. Găsiți mai jos un ghid în pas pentru a inspecta elemente folosind diferite browsere web pe Windows:

Instrumentul de inspectare Google Chrome

Cum să inspectați elemente în browserul Windows Chrome

• Când utilizați Google Chrome , faceți clic dreapta oriunde pe un site web.
• Va apărea meniul contextual cu clic dreapta.
• În partea de jos, veți vedea Inspect .
• Faceți clic pe Inspectare pentru a vedea codurile HTML și CSS pe un panou din dreapta .

Cum deschid Inspect Element în Chrome fără a face clic dreapta?

Există câteva comenzi rapide utile pentru a deschide instrumentul Inspect Element pe Google Chrome pentru Windows. Aceste taste rapide sunt după cum urmează:

• Ctrl + Shift + C
• Tasta funcțională F12

Tastele rapide de mai sus funcționează și în browserul Mozilla pentru Windows.

Instrumentul Mozilla Inspector

Cum să inspectați elementele pe browserul Windows Mozilla

În browserul Mozilla, procesul este același cu Google Chrome. Cu toate acestea, fereastra Inspector va apărea în partea de jos a browserului în loc de partea dreaptă, ca în Google Chrome.

Instrumentul de inspectare Microsoft Edge

Cum să inspectați elemente în browserul Windows Edge

În mod surprinzător, elementul Inspect de la Microsoft Edge funcționează similar cu browserul Google Chrome. Instrumentul Inspectare este disponibil la clic dreapta. De asemenea, codurile HTML și CSS apar în partea dreaptă, similar cu Google Chrome.

Cum să inspectați elementele pe Mac

Utilizați Google Chrome, Mozilla Firefox sau Microsoft Edge pe computerele Apple Mac? Dacă da, atunci puteți implementa instrumentul Inspect Element urmând pașii menționați mai sus în secțiunea Windows.

Dar, dacă utilizați browserul web macOS implicit, Safari, atunci folosirea instrumentului Inspect Element este un joc dificil. În mod implicit, Safari nu afișează Inspect Element pe un Mac. Iată ce trebuie să faci:

Cum se deschide Inspect Element pe Mac

În primul rând, trebuie să activați instrumentele pentru dezvoltatori pe Safari pe un Mac. Iată cum:

• Rulați browserul Safari .
• Vizitați un site web în care doriți să inspectați elementele web.
• Selectați Safari din bara de meniu de sus a browserului Safari.
• Faceți clic pe Preferințe din meniul contextual care se deschide.
• În ecranul Preferințe , selectați Avansat .
• Bifați meniul Afișare Dezvoltare din partea de jos a ecranului Preferințe avansate .

Ați activat cu succes instrumentele pentru dezvoltatori pe Safari pentru Mac. Acum, urmați acești pași pentru a utiliza Inspect Element:

• Pe orice element al unui site web, cum ar fi un text sau o imagine, faceți clic dreapta pe .
• Va apărea un meniu contextual. În partea de jos, veți vedea Inspectați elementul .
• Faceți clic pe acesta pentru a deschide o secțiune de depanare sub site-ul web, care arată coduri HTML și CSS .

What Are the Keys for Inspect Element?

Este posibil să căutați comenzi rapide pentru Inspect Element pe Mac. Puteți folosi următoarele:

• Comandă + Shift + C
• Apăsați tasta Control și apoi selectați orice element.
• Faceți clic pe trackpad cu două degete

Cum să inspectați elementele pe Chromebookuri

Chromebookul folosește Google Chrome ca browser implicit. Prin urmare, după deschiderea oricărui site web, pur și simplu faceți clic dreapta pentru a găsi opțiunea Inspectare element în meniul contextual care urmează.

Dacă utilizați un Chromebook de la serviciu sau de la școală, este posibil să puneți această întrebare:

Why Can’t I Inspect on My School Chromebook?

Majoritatea administratorilor de școli și de afaceri dezactivează funcțiile avansate pe Chromebookul pe care ți-l oferă pentru muncă sau studiu. Deoarece instrumentele pentru dezvoltatori sunt funcții avansate, este posibil ca Chromebookul de la școală sau de la serviciu să nu afișeze instrumentul Inspect Element.

Cum să inspectați elementele pe iPad/iPhone

Din păcate, nu puteți folosi instrumentul Inspect Element pe un iPhone sau iPad fără un Mac.

iOS și iPadOS au Web Inspector pentru aplicația Safari. Cu toate acestea, funcționează numai dacă conectați dispozitivul mobil la un Mac pe care ați activat deja instrumentele de dezvoltare pentru Safari. Mai jos sunt pașii pe care îi puteți încerca:

• Deschideți aplicația Setări iPad/iPhone .
• Faceți clic pe Safari în panoul de navigare din stânga.

Deschiderea Setărilor Safari pe iPad sau iPhone

• Apoi, derulați în jos în partea dreaptă pentru a găsi și selectați Avansat .

Activarea Web Inspector pe iPad și iPhone

• Activați comutatorul pentru Web Inspector .
• Acum, conectați dispozitivul mobil la Mac folosind USB .
• Autorizați iPhone/iPad pe Mac.
• Deschideți orice site web pe un dispozitiv mobil pe Safari.
• Acum, rulați Safari pe Mac și selectați Dezvoltare din bara de meniu de sus.
• În meniul contextual care se deschide, căutați numele dispozitivului dvs. mobil.
• Treceți cursorul peste dispozitivul mobil pentru a vedea toate site-urile web deschise.
• Acum, selectați orice site web pentru a vedea codul sursă HTML și CSS în browserul Safari al Mac.

Concluzie

Ați explorat toate modalitățile posibile de a utiliza instrumentul Inspectare element pentru editarea temporară a paginilor web. De asemenea, ați învățat cum să inspectați elemente pentru diferite dispozitive, cum ar fi Mac, Windows, Chromebook, iPad și iPhone.

Data viitoare când trebuie să modificați o pagină web pentru distracție sau pentru nevoi profesionale, încercați aceste metode. Cu siguranță veți iubi acești pași fără efort față de alte metode complicate explicate în altă parte.

Nu uitați să lăsați comentarii mai jos dacă pașii de mai sus v-au ajutat, orice metodă pe care o considerați provocatoare sau orice sfaturi secrete despre instrumentul Inspect Element.

Aveți nevoie de o pagină web ca referință tipărită? Aflați cum să salvați rapid o pagină web ca PDF acum!