Cum să utilizați instrumentul Inspectare element browser

Dacă lucrați cu multe site-uri web, probabil că sunteți mereu în căutarea unor modalități mai rapide și mai eficiente de a face lucrurile. Dacă da, instrumentul Inspectează elementul, disponibil în majoritatea browserelor majore, ar putea fi un avantaj util pe care să îl ai la îndemână. Cu acesta, puteți identifica rapid clasele CSS, puteți previzualiza modificările elementelor dintr-o pagină, puteți simula un site pe dispozitive mobile și multe altele.

În acest articol, vom introduce instrumentul Inspectare element și vă vom arăta cum să îl accesați în cele mai populare browsere web. Apoi vă vom prezenta câteva exemple despre modul în care îl puteți utiliza ca parte a fluxului de lucru pentru dezvoltarea web.

Hai să săpăm!

Cum să accesați instrumentul Inspectare element în browserele principale

Instrumentul Inspectare element este un utilitar care vă permite să vizualizați codul sursă subiacent al oricărei pagini web. În plus, îl puteți utiliza pentru a face modificări temporare și a vedea rezultatele în timp real, lăsând intact codul sursă original. Acest lucru este incredibil de util dacă trebuie să testați o modificare sau să diagnosticați o problemă. De asemenea, poate fi util dacă întâlnești un site cu o caracteristică care îți place și ești curios cum a fost implementat.

Majoritatea browserelor importante - inclusiv Chrome, Firefox și Safari - oferă o variantă a acestui instrument. Să vedem cum să îl accesăm în fiecare dintre ele.

Accesarea elementului Inspect în Google Chrome

Există trei moduri de a accesa instrumentul Inspectare element în Chrome:

• Faceți clic dreapta pe un element din pagină și alegeți Inspectați .
• Faceți clic pe meniul cu trei puncte din colțul din dreapta sus al ferestrei și alegeți Mai multe instrumente> Instrumente pentru dezvoltatori.
• Apăsați Ctrl + Shift + C pe tastatură ( Cmd + Opțiune + C pe Mac).

Când instrumentul se deschide, acesta vă va prezenta o vizualizare divizată. Pe de o parte, aveți o previzualizare a site-ului web pe care îl inspectați, împreună cu câteva controale pentru a regla vizualizarea și a simula diferite rezoluții ale ecranului:

Pe de altă parte, există mai multe panouri care conțin informații. Panoul superior este codul HTML al paginii. Plasând cursorul peste o parte a codului, se va evidenția zona relevantă a paginii din dreapta:

Mai jos este un panou care prezintă informații despre pagină. Detaliile afișate aici variază în funcție de care dintre filele selectate. În capturile de ecran de mai sus, afișează stilurile CSS ale paginii.

Panoul de jos este pur și simplu știri și actualizări despre Instrumentele pentru dezvoltatori Chrome. Puteți închide în siguranță acest lucru pentru a reduce dezordinea făcând clic pe X.

În cele din urmă, puteți modifica locația acestor panouri făcând clic pe meniul cu trei puncte din colțul din dreapta sus al panoului HTML și selectând una dintre opțiunile de andocare.

Accesarea elementului Inspect în Mozilla Firefox

Instrumentul Inspectare element din Firefox este destul de similar cu Chrome și poate fi accesat în moduri similare:

• Faceți clic dreapta pe un element din pagină și alegeți Inspectare element.
• Faceți clic pe meniul hamburger din colțul din dreapta sus al ferestrei Firefox și selectați Web Developer> Inspector .
• Apăsați Ctrl + Shift + C pe tastatură ( Cmd + Opțiune + C pe Mac).

Firefox implicit plasează panourile de informații în partea de jos a ecranului:

Cu toate acestea, le puteți muta cu ușurință făcând clic pe meniul cu trei puncte și selectând o altă opțiune.

Accesarea elementului Inspect în Safari

Pe computerele Mac, browserul web Safari oferă și un instrument Inspect Element. Cu toate acestea, există un pas suplimentar pentru accesarea acestuia - va trebui să activați instrumentele pentru dezvoltatori Safari.

Pentru a face acest lucru, mergeți la bara de meniu din partea de sus a ecranului și navigați la Safari> Preferințe> Avansat . Apoi puteți bifa caseta relevantă pentru a activa instrumentele de dezvoltare:

Odată activată, puteți accesa funcția Inspect Element la fel ca în alte browsere:

• Faceți clic dreapta pe un element și alegeți Inspectare element .
• În bara de meniu de sus, navigați la Dezvoltare> Afișare inspector web.
• Apăsați Cmd + Opțiune + I pe tastatură.

Aspectul inițial pentru instrumentul Safari diferă puțin de browserele:

Cu toate acestea, la fel ca în cazul Chrome și Firefox, îl puteți personaliza cu ușurință dând clic pe pictogramele din colțul din stânga sus al ferestrei inspectorului.

5 utilizări comune pentru instrumentul Inspectare element

Acum, că știți cum să accesați instrumentul Inspectare element, să analizăm câteva dintre lucrurile utile pe care le puteți face cu el. Există o mulțime de posibilități, dar utilizările de mai jos sunt unele dintre cele mai frecvente. Rețineți că vom folosi Chrome pentru aceste exemple, dar funcțiile ar trebui să funcționeze similar în alte browsere.

1. Găsiți clase CSS pe un site web

Unul dintre cele mai utile moduri în care puteți utiliza Inspect Element este de a găsi detalii în Foi de tip Cascading Style (CSS). Acest lucru este la îndemână din câteva motive. În primul rând, dacă doar navigați pe internet și întâlniți un site pe care îl iubiți cu adevărat stilul, puteți arunca o privire la CSS pentru a colecta câteva idei pentru propriul dvs. design web.

Este util și pe propriul site. De exemplu, dacă un element nu arată foarte bine, îl puteți inspecta rapid pentru a vă asigura că folosește CSS corect.

Există două moduri de bază de a verifica stilurile folosind Inspect Element. Dacă doriți să vizualizați rapid un singur element, puteți trece cu mouse-ul peste acesta în panoul de previzualizare pentru a vedea câteva informații de bază despre acesta:

Aici, puteți vedea schema de culori, fontul, marginile și multe altele pentru antet pe blogul nostru. În panourile detaliate, instrumentul evidențiază și codul relevant, astfel încât să puteți vedea exact ce se întâmplă. Dacă faceți clic pe un element din previzualizare, se va actualiza panoul de stiluri pentru a afișa și CSS-ul său:

Dacă plutirea peste element nu pare să facă nimic, asigurați-vă că pictograma cursorului din panoul inspectorului este evidențiată în albastru:

În cazul în care cunoașteți clasa sau stilul CSS specific pe care îl căutați și doriți să vedeți fiecare element care îl folosește, puteți utiliza și funcția de căutare. Cu inspectorul deschis, apăsați Ctrl + Shift + F pe tastatură ( Cmd + Shift + F pe Mac). Aceasta deschide o casetă de căutare în care puteți căuta codul paginii . Rezultatele relevante vor fi evidențiate, la fel ca în cazul în care ați căuta un document.

2. Depanarea unui site

Instrumentul Inspectare element este extrem de util pentru soluționarea problemelor. De exemplu, dacă culoarea sau fontul unui element nu arată foarte bine, îl puteți verifica rapid folosind instrumentul așa cum am descris în secțiunea anterioară.

De asemenea, puteți edita direct HTML-ul unei pagini din instrumentul Inspectare element. Pur și simplu faceți dublu clic pe codul pe care doriți să îl modificați pentru a-l edita.

Rețineți că codul nu este modificat de fapt pe site - dacă actualizați pagina, acesta va reveni la forma inițială. Cu toate acestea, această funcționalitate este extrem de utilă pentru teste rapide și depanare.

În cele din urmă, depanatorul încorporat este un instrument mai avansat pe care îl puteți utiliza pentru a vedea orice mesaje de eroare care sunt aruncate în spatele scenei. Pentru a o accesa, faceți clic pe Consolă în partea de sus a ferestrei Inspector:

Există, de asemenea, alte file disponibile pentru vizualizarea surselor, activitatea în rețea și multe altele. Pentru a accesa lista completă, faceți clic pe pictograma săgeată dublă din partea de sus a inspectorului.

3. Editați textul pentru a previzualiza modificările

Una dintre cele mai bune utilizări pentru Inspect Element este de a previzualiza rapid modificările aduse textului, fontului sau culorii unei pagini. În acest fel, puteți vedea exact cum arată ideea dvs., fără a vă conecta chiar la tabloul de bord WordPress.

Pentru a edita un element, faceți clic dreapta pe acesta și alegeți Inspectare. Aceasta deschide instrumentul cu codul elementului respectiv. Dacă aveți deja Inspect Element deschis, puteți face clic și pe elementul din panoul de previzualizare pentru a evidenția codul relevant.

Apoi, faceți dublu clic pe cod pentru a-l putea modifica. De exemplu, aici am schimbat titlul blogului nostru:

De asemenea, puteți schimba culorile. Pur și simplu selectați elementul și derulați prin panoul Stiluri pentru a găsi secțiunea relevantă. Puteți face clic pe pătratele de culoare pentru a ridica un selector de culori:

De asemenea, puteți edita codul hexagonal al culorii direct dacă îl cunoașteți pe cel pe care doriți să îl utilizați.

4. Previzualizați modificările imaginii

Inspectarea elementului facilitează, de asemenea, previzualizarea modificărilor imaginii. Acesta este un mod excelent de a încerca și diferite dimensiuni de imagine.

Pur și simplu selectați imaginea pe care doriți să o modificați în panoul de previzualizare, apoi faceți dublu clic pe adresa URL a acestuia în panoul HTML:

Puteți apoi lipi URL-ul unei alte imagini pentru a o testa. Dacă imaginea se află în biblioteca dvs. media WordPress, puteți găsi rapid adresa URL în detaliile atașamentului:

Există chiar și un buton la îndemână pentru a copia adresa URL în clipboard. Amintiți-vă din nou că orice modificare pe care o faceți în inspector este doar temporară și vizibilă numai pentru dvs., așa că nu ezitați să vă jucați.

5. Testați un site folosind emularea dispozitivului

În cele din urmă, o altă caracteristică utilă a Inspect Element este capacitatea de a emula diferite dimensiuni ale ecranului și chiar dispozitive specifice. Acest lucru vă permite să testați capacitatea de reacție a unui site și să vedeți exact cum va apărea cu diferiți factori de formă pentru mobil.

Cu Inspectorul deschis, faceți clic pe pictograma care arată ca un telefon și o tabletă stivuite:

Aceasta permite emularea dispozitivului. Rețineți că poate fi activat implicit atunci când deschideți inspectorul. Redimensionați previzualizarea paginii folosind mânerele din jurul acesteia sau faceți clic pe meniurile derulante din partea de sus a panoului de previzualizare pentru a alege diferite dispozitive:

De asemenea, puteți introduce un anumit raport de aspect sau chiar verificați aspectul paginii atunci când dispozitivul mobil este rotit făcând clic pe pictograma „rotire” din partea de sus a panoului de previzualizare. Pentru a emula diferiți senzori, cum ar fi locația și atingerea, faceți clic pe meniul cu trei puncte din panoul inspectorului și selectați Mai multe instrumente> Senzori .

Concluzie

Fie că sunteți nou în dezvoltarea web sau un profesionist experimentat, instrumentul Inspect Element este un utilitar puternic care ar trebui să fie cu siguranță în arsenalul dvs. Este ușor de accesat, disponibil aproape universal și face o varietate de operații rapide și ușoare.

În acest articol, am demonstrat cum să accesați Inspect Element în Chrome, Firefox și Safari. De asemenea, v-am arătat cum să îl utilizați pentru a localiza clasele CSS, pentru a depana un site web, pentru a modifica temporar textul și imaginile și pentru a emula dispozitive mobile. Cu acest set de instrumente, aveți tot ce aveți nevoie pentru ca Inspect Element să facă parte din fluxul de lucru.

Aveți întrebări despre utilizarea Inspect Element? Spuneți-ne în secțiunea de comentarii de mai jos!

Imagine prezentată prin Kinjugraphics / shutterstock.com.