Cum să utilizați instrumentul Inspect Element în Chrome

Instrumentul Inspect Element din Google Chrome este o caracteristică puternică care permite utilizatorilor să vizualizeze și să modifice HTML, CSS și JavaScript ale unui site web direct din browser. Aceasta este utilizată în mod obișnuit de către dezvoltatorii și designerii web pentru depanare, editarea stilurilor, testarea codului și chiar pentru a examina mai îndeaproape modul în care sunt construite anumite elemente ale site-ului. Acest ghid vă va arăta cum să accesați și să utilizați eficient instrumentul Inspect Element în Chrome.

Ce este instrumentul Inspect Element?

Instrumentul Inspect Element face parte din suita Chrome’s Developer Tools (DevTools). Acesta vă permite să:

Să inspectați și să editați HTML și CSS în timp real.
Depanarea codului JavaScript.
Simulați diferite dimensiuni ale ecranului pentru testarea designului receptiv.
Inspectați solicitările de rețea și vedeți modul în care un site web încarcă resursele.
Testați modificările fără a afecta site-ul real.

Cum să deschideți instrumentul Inspect Element în Chrome

Există mai multe moduri de a accesa instrumentul Inspect Element în Chrome:

Metoda 1: Faceți clic dreapta pe o pagină Web

Navigați la site-ul web pe care doriți să îl inspectați.
Faceți clic dreapta pe orice element de pe pagină (de exemplu, o imagine, un text sau un buton).
Selectați Inspect din meniul contextual care apare.

Aceasta va deschide fila Elements din DevTools, evidențiind HTML-ul elementului selectat.

Metoda 2: Utilizarea comenzilor rapide de la tastatură

Puteți deschide rapid instrumentul Inspect Element utilizând comenzi rapide de la tastatură:

Windows/Linux: Ctrl Shift I
Mac: Command Option I

Metoda 3: Din meniul Chrome

Faceți clic pe meniul cu trei puncte (⋮) din colțul din dreapta sus al Chrome.
Mergeți la Mai multe instrumente > Instrumente pentru dezvoltatori.

Panoul DevTools se va deschide în partea de jos sau laterală a ferestrei browserului.

Prezentare generală a interfeței DevTools

Odată ce deschideți instrumentul Inspect Element, veți vedea mai multe file în partea de sus a panoului DevTools:

Elemente: Afișează structura HTML și stilurile CSS ale paginii.
Console (Consolă): Utilă pentru rularea comenzilor JavaScript și vizualizarea mesajelor de eroare.
Surse: Vă permite să vizualizați și să depanați fișiere JavaScript.
Rețea: Afișează toate solicitările de rețea, ceea ce este util pentru analizarea timpilor de încărcare a paginilor și a resurselor.
Performanță: Ajută la analiza performanței unei pagini web.
Aplicație: Afișează detalii precum cookie-uri, stocare locală și cache.
Lighthouse: Oferă rapoarte de audit și performanță a site-ului web.

Cel mai des utilizat tab: Elemente

Tab-ul Elemente este nucleul instrumentului Inspect Element, permițându-vă să vizualizați și să modificați HTML și CSS ale unei pagini web.

Cum să utilizați instrumentul Inspect Element pentru HTML și CSS

1. Inspectarea elementelor HTML

Deschideți fila Elements (făcând clic dreapta și selectând Inspect sau utilizând comenzile rapide de la tastatură).
Plasați cursorul peste diferite elemente din arborele HTML pentru a le vedea evidențiate pe pagina web.
Faceți clic pe orice element HTML din panoul Elemente pentru a vizualiza stilurile CSS corespunzătoare în panoul Stiluri din dreapta.

2. Editarea HTML în timp real

Faceți dublu clic pe o etichetă, un atribut sau un text HTML din fila Elemente pentru a-l edita.
Apăsați Enter pentru a aplica modificările.
Modificările se vor reflecta imediat pe pagină, dar sunt temporare și se vor reseta atunci când actualizați pagina.

Exemplu: Schimbați textul unui titlu de la <h1>Welcome to My Site</h1> to <h1>Hello World!</h1> făcând dublu clic pe text și editându-l.

3. Editarea CSS în timp real

Selectați un element pe care doriți să îl stilizați din fila Elemente.
În panoul Styles din dreapta, puteți edita proprietățile CSS existente sau adăuga unele noi.
Pentru a adăuga un stil nou, faceți clic pe un spațiu gol din panoul Styles și tastați proprietatea CSS și valoarea.

Exemplu: Modificați culoarea de fundal a unui element:

background-color: #ff0000;

Modificările se vor aplica imediat, dar nu sunt salvate permanent pe site.

4. Activarea și dezactivarea stilurilor CSS

Fiecare proprietate CSS din panoul Styles are o casetă de selectare lângă ea.
Debifați o proprietate pentru a o dezactiva temporar sau bifați-o din nou pentru a o activa din nou.

Acest lucru este util pentru a testa modul în care modificările din CSS ar putea afecta designul fără a edita permanent codul.

5. Copierea și editarea HTML

Faceți clic dreapta pe un element HTML din fila Elemente.
Alegeți Copy > Copy element pentru a copia codul HTML selectat.
Apoi îl puteți lipi în editorul dvs. de text sau îl puteți utiliza pentru dezvoltare.

Utilizarea filei Console

Tab-ul Console este un alt instrument puternic din DevTools, care vă permite să executați comenzi JavaScript direct pe pagină:

Mergeți la fila Console.
Tastați comenzi sau expresii JavaScript și apăsați Enter pentru a le executa.

Exemplu: Modificați culoarea de fundal a paginii:

document.body.style.backgroundColor = ‘#00ff00’;

Aceasta va schimba culoarea de fundal a paginii în verde.

Simularea dispozitivelor mobile

Instrumentul Inspect Element vă permite, de asemenea, să testați cum arată un site web pe diferite dimensiuni de ecran și dispozitive:

Faceți clic pe pictograma Toggle device toolbar (o pictogramă mică de telefon și tabletă) din colțul din stânga sus al panoului DevTools.
Selectați un dispozitiv din meniul derulant (de exemplu, iPhone, iPad, Galaxy).
Reglați rezoluția și orientarea ecranului pentru a vedea cum răspunde site-ul web la diferite dimensiuni ale ecranului.

Această caracteristică este extrem de utilă pentru testarea designului responsiv.

Depanarea JavaScript

Fila Surse este utilizată pentru depanarea JavaScript:

Deschideți fila Surse în DevTools.
Puteți seta puncte de întrerupere făcând clic pe numerele de linie ale codului JavaScript.
Acest lucru vă permite să întrerupeți execuția codului și să inspectați variabilele, funcțiile și stiva de apeluri.

Analiza rețelei cu fila Network

Fila Rețea afișează toate solicitările de rețea care apar la încărcarea unei pagini, inclusiv imagini, scripturi și foi de stil:

Deschideți fila Rețea înainte de a reîmprospăta pagina.
Actualizați pagina pentru a vedea toate solicitările de rețea.
Puteți filtra solicitările în funcție de tip (de exemplu, XHR, JS, CSS) și puteți vedea cât timp durează încărcarea fiecărei resurse.

Acest lucru este util pentru optimizarea vitezei de încărcare a paginii.

Rezumat

Instrumentul Inspect Element din Google Chrome este o caracteristică versatilă și esențială pentru dezvoltatorii web, designeri și chiar utilizatorii curioși care doresc să înțeleagă cum sunt construite site-urile web. Învățând cum să inspectați și să modificați HTML, CSS și JavaScript, puteți depana probleme, testa stiluri noi și vă puteți asigura că site-ul dvs. web arată bine pe diferite dispozitive. Cu ajutorul diferitelor instrumente și file disponibile în Chrome DevTools, puteți obține o înțelegere mai profundă a modului în care funcționează site-urile web și le puteți optimiza pentru o performanță mai bună.