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

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 web real. 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 elementele în browserul Windows Chrome
Cum să inspectați elementele în browserul Windows Chrome
  • Atunci când se utilizează Google Chrome, Click dreapta oriunde pe un site web.
  • Va apărea meniul contextual cu clic dreapta.
  • În partea de jos, vei vedea Inspecta.
  • Clic Inspecta pentru a vizualiza codurile HTML și CSS pe a panoul din partea dreaptă.

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 + Schimb + 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
Cum să inspectați elementele pe browserul Windows Mozilla

În browserul Mozilla, procesul este același cu Google Chrome. Însă Inspector fereastra 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
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

Folosiți Google Chrome, Mozilla Firefox sau Microsoft Edge pe computerele Mac Apple? 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:

  • Alerga cel browser 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.
  • Clic Preferințe din meniul contextual care se deschide.
  • Pe Ecranul de preferințe, Selectați Avansat.
  • Bifați Arată Dezvoltare meniul din partea de jos a Preferințe avansate ecran.

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, Click dreapta.
  • Va apărea un meniu contextual. În partea de jos, vei vedea Inspectează elementul.
  • Faceți clic pe acesta pentru a deschide o secțiune de depanare sub site-ul web care arată HTML și CSS coduri.

Care sunt cheile pentru inspectarea elementului?

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

  • Comanda + Schimb + C
  • apasă pe Control tasta ș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:

De ce nu pot inspecta pe Chromebookul meu de la școală?

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 utiliza 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 iPad/iPhone Setări aplicația.
  • Clic Safari în panoul de navigare din stânga.
Deschiderea Setărilor Safari pe iPad sau iPhone
Deschiderea Setărilor Safari pe iPad sau iPhone
  • Apoi, derulați în jos în partea dreaptă pentru a găsi și selecta Avansat.
Activarea Web Inspector pe iPad și iPhone
Activarea Web Inspector pe iPad și iPhone
  • Activați comutatorul pentru Inspector web.
  • 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 Dezvolta în 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 precum 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ă? Învață cum să salvați rapid o pagină web ca PDF acum!