Cum să inspectezi un element în Chrome, Firefox, Safari și Edge

Pentru a inspecta un element, faceți clic dreapta pe el și alegeți Inspectare în Chrome, Firefox sau Edge. În Safari, activați mai întâi funcțiile pentru dezvoltatori web, apoi faceți clic dreapta sau apăsați Control-clic și alegeți Inspectare element . Browserul își deschide instrumentele și selectează elementul în arborele de documente live. Chrome și Edge numesc panoul Elemente , Firefox îl numește Inspector , iar Safari îl numește Inspector Web .

Inspectarea unui element în Chrome

1. Deschide pagina în Chrome și localizează textul, imaginea, linkul sau controlul pe care dorești să îl examinezi.
2. Faceți clic dreapta pe acel element și selectați Inspectare .
3. În panoul Elemente, căutați rândul selectat în arborele DOM. Panoul Stiluri afișează regulile CSS care afectează nodul respectiv.

Sau folosiți meniul cu trei puncte din Chrome: Mai multe instrumente > Instrumente pentru dezvoltatori . Comenzi rapide: F12 sau Ctrl+Shift+I (Windows/Linux) și Command+Option+I (Mac). Apăsați Ctrl+Shift+C sau Command+Shift+C pentru a deschide Elements în modul de selectare a paginii.

Inspectarea unui element în Microsoft Edge

1. Deschideți pagina în Edge și faceți clic dreapta pe elementul specific.
2. Selectați Inspect . Edge deschide DevTools cu nodul corespunzător selectat în Elements.

Sau selectați Setări și altele (…) > Mai multe instrumente > Instrumente pentru dezvoltatori . F12 sau Ctrl+Shift+I (Windows/Linux) și Command+Option+I (Mac) redeschideți ultimul panou DevTools. Comenzile rapide personalizate pot diferi.

Inspectarea unui element în Firefox

1. Deschideți pagina în Firefox și faceți clic dreapta pe elementul pe care doriți să îl inspectați.
2. Alegeți Inspect . Firefox își deschide Inspectorul cu elementul corespunzător selectat.
3. Extindeți săgețile arborelui pentru a vizualiza elementele secundare sau selectați un alt rând pentru a inspecta o altă parte a paginii.

Deschideți Instrumentele pentru dezvoltatori cu F12 sau Ctrl+Shift+I (Windows/Linux) sau Command+Option+I (Mac). Ctrl+Shift+C sau Command+Option+C deschide Inspector. Dacă un site înlocuiește meniul clic dreapta, utilizați o comandă rapidă sau meniul Firefox.

Inspectarea unui element în Safari

1. În Safari pe Mac, selectați Safari > Configurări din bara de meniu.
2. Deschideți Avansat și bifați Afișați funcțiile pentru dezvoltatorii web . În Safari 16 și versiunile anterioare, setarea este etichetată Afișați meniul Dezvoltare în bara de meniu .
3. Reveniți la pagină, apoi faceți clic dreapta sau apăsați Control-clic pe element și selectați Inspectare element .

Inspectorul Web selectează elementul pe care s-a făcut clic. De asemenea, puteți alege Dezvoltare > Afișare Inspector Web sau puteți apăsa Option+Command+I pentru a-l deschide pentru pagina curentă. Acești pași se aplică pentru Safari pe Mac.

Ce trebuie făcut după ce se deschide panoul

Găsiți elementul HTML corespunzător

Rândul evidențiat este un nod în arborele DOM live. Extindeți săgeata sa pentru a vizualiza elementele imbricate sau faceți clic pe pictograma de selecție a elementelor, treceți cu mouse-ul peste pagină și selectați o țintă. Selectorul este util în cazul elementelor mici sau suprapuse.

Revizuirea sau testarea CSS-ului

Folosește panoul Stiluri (numit Reguli în Firefox) pentru a vedea ce declarații CSS se aplică și de unde provin acestea. Debifează o declarație sau editează o valoare pentru a previzualiza modificările aduse aspectului, culorii, spațierii sau tipografiei. Aceasta nu rescrie fișierele site-ului și nu modifică ceea ce văd ceilalți vizitatori.

Verificați un layout responsiv

Fiecare browser are un control de previzualizare responsiv sau pe dispozitiv. Alegeți sau introduceți o dimensiune mai îngustă a viewport-ului, apoi inspectați același DOM și stiluri. Acest lucru poate dezvălui probleme legate de punctele de întrerupere și aspect, dar nu înlocuiește testarea pe dispozitive reale.

Scurtături de tastatură dintr-o privire

Comenzile rapide pot diferi în funcție de sistemul de operare, versiunea browserului sau setările personalizate. Dacă una nu funcționează, utilizați meniul browserului sau comanda din meniul contextual.

Se salvează modificările din Inspect Element?

Modificările obișnuite din panourile Elemente, Inspector sau Stiluri sunt modificări temporare în browser. Reîncărcarea paginii restaurează de obicei versiunea livrată de site. Unele fluxuri de lucru pentru dezvoltatori pot salva modificări locale pe propriul computer, dar nici măcar acestea nu publică modificările pe serverul site-ului web. Tratați DevTools ca pe o modalitate de a examina și testa o pagină, nu ca pe o modalitate de a modifica un site live pentru toată lumea.

Pentru detalii actuale, consultați ghidul oficial Chrome DevTools , comenzile rapide Firefox , ghidul de configurare și inspecție Safari de la Apple și prezentarea generală a Microsoft Edge .