Google Chrome nu este doar un browser rapid pentru consumatori, ci ascunde și o serie de funcții pentru dezvoltatori sub capota sa. Puteți dezvălui o parte din această putere cu instrumentul „Inspectați”. Deși inițial este copleșitor, instrumentul vă oferă informații despre modul în care sunt construite site-urile web și vă poate ajuta să depanați propriile site-uri.
Accesarea instrumentului de inspecție
Instrumentul Inspectare poate fi găsit în meniul contextual al Chrome.
Faceți clic dreapta pe orice element din browserul dvs. și faceți clic pe „Inspect” în meniul contextual.
O fereastră va ieși din partea laterală a browserului Chrome așa cum se vede mai jos. Aceasta se numește panoul DevTools. Dacă ați folosit vreodată Firebug pe Firefox, ați putea recunoaște unele părți ale acestuia.
Există multe aici, așa că hai să examinăm piesele individuale.
Inspectând inspectorul
Panoul de inspecție este împărțit în mai multe file diferite, care sunt vizibile în partea de sus a ferestrei. Ne vom concentra pe fila Elemente implicită.
Există două butoane utile lângă aceste file. Primul este instrumentul Inspectare element.
Acest instrument vă permite să treceți mouse-ul și să selectați diferite elemente DOM pe care să le inspectați.
Al doilea buton activează modul Previzualizare dispozitiv. În acest mod, puteți vedea cum arată pagina dvs. web la diferite rezoluții și dimensiuni de ecran.
Dacă faceți clic pe butonul respectiv, veți vedea pagina dvs. web într-o vizualizare nouă.
Apoi puteți utiliza meniul derulant de deasupra previzualizării paginii sau mânerele de pe laturile previzualizării paginii pentru a redimensiona fereastra de previzualizare a dispozitivului.
Vizualizare HTML
Majoritatea filei DevTools este ocupată de panoul HTML.
Acest panou este ca o „Vizualizare sursă” super-alimentată. Este structurat în funcție de DOM, cu elemente imbricate în interiorul elementelor părinte.
Veți vedea că elementul pe care l-ați „inspectat” la început este evidențiat automat cu un fundal gri sau albastru. Aici am inspectat o imagine care este conținută într-un link. După cum era de așteptat, văd o etichetă de ancorare evidențiată.
Dar unde este imaginea mea? Pot dezvălui orice element DOM cuibărit în eticheta de ancorare făcând clic pe triunghiul de dezvăluire de lângă . În acest caz, săgeata dezvăluie eticheta pe care mă așteptam să o găsesc.
De asemenea, veți observa o mică bară de meniu în partea de jos a panoului HTML.
Aceasta se numește traseul de pesmet și vă arată toate elementele părinte ale elementului selectat. Pentru a naviga la unul dintre aceste elemente, faceți clic pe el.
Stiluri
Sub vizualizarea HTML vedem, de asemenea, un panou care arată orice reguli CSS care se aplică elementului nostru. Aceasta se numește panoul Stiluri și, în acest caz, vedem toate regulile care se aplică etichetei de ancoră pe care am inspectat-o mai devreme.
Puteți activa sau dezactiva o regulă trecând peste ea și dând clic pe caseta de selectare de lângă aceasta.
Această modificare se va reflecta imediat în previzualizarea paginii. Și dacă faceți clic direct pe o regulă, îi puteți schimba numele și valoarea.
De asemenea, puteți căuta anumite reguli folosind caseta de căutare Filtrare.
Cu toate acestea, panoul Styles este capabil de mult mai mult decât doar atât. Consultați documentația Google pentru o explicație completă a numeroaselor funcții ale panoului Style.
Modelul cutiei și stilul calculat
Alături de vizualizarea stilului este modelul cutiei pentru elementul meu selectat. Dacă nu sunteți familiarizați, modelul cutiei este o descriere abstractă a marginii, chenarului, umpluturii și dimensiunii conținutului aplicate unui anumit element.
În acest caz, văd că elementul meu are o dimensiune primară de 461 x 209 pixeli. Nu conține reguli de margine, margine sau umplere, astfel încât acele casete sunt goale.
Dacă alegeți un element cu unele reguli de poziție, marjă, margine sau umplutură, modelul dvs. de cutie ar putea arăta mai mult așa.
De asemenea, puteți vedea un in situ model casetă dacă faceți mouse-ul peste elementele DOM cu instrumentul Inspectare element activat.
Sub modelul casetei este o listă cu toate regulile de stil care se aplică acestui element special. Aceasta este ușor diferită de panoul Stiluri. Nu afișează liniile reale ale CSS – doar efectele acestor reguli. Acesta se numește „stilul calculat” al obiectului și este rezultatul combinat al CSS-ului dvs.
În cele din urmă, puteți căuta anumite reguli tastând în caseta Filtru.
Concluzie
Dacă lucrați frecvent cu pagini web, instrumentul Chrome Inspect merită explorat. Și celelalte file din DevTools, cum ar fi Console și Network, pot fi de neprețuit pentru dezvoltatori. Există mai multe lucruri decât putem acoperi acum, dar Documentația proprie Google este minuțios și util.
