Cum se folosește instrumentul Firefox „Inspect Element” pentru a examina un site

Cum se folosește instrumentul Firefox „Inspect Element” pentru a examina un site
⏱️ 6 min read

Dacă ați dorit vreodată să știți cum sunt structurate site-urile dvs. web preferate, serviciile „Inspect” ale unui browser pot fi o binecuvântare ascunsă. Am acoperit instrumentul „Inspect” al Chrome, iar Firefox vine și cu o ofertă similară.

Instrumentul „Inspectare element” Firefox vă poate ajuta să investigați bazele funcționării unui site web, inclusiv elementele HTML și CSS pe care le folosește, încărcarea acestuia în rețea, latența elementelor de încărcare și fișierele pe care le pune în stoc, precum cookie-uri.

Este posibil ca dezvoltatorii experimentați să nu găsească prea multe noutăți în acest manual. Cu toate acestea, novicii și utilizatorii de internet de zi cu zi ar trebui să găsească o nouă latură puternică a capabilităților Firefox și o fântână profundă de fișiere și operațiuni care se află sub fiecare site de pe Internet.

Instalare

Dacă utilizați Firefox, nu trebuie să faceți nimic mai departe. Dacă doriți să începeți să utilizați Firefox și sunteți pe Windows, Linux, Mac, iOS sau Android, urmați acest link pentru a găsi cea mai recentă versiune a browserului. Instalați fișierele de instalare descărcate așa cum ați face în mod normal făcând dublu clic pe ele sau atingând dacă sunteți pe un smartphone.

Distribuțiile majore Linux vin probabil cu Firefox preinstalat sau au copii ale Firefox în depozitele din centrul de software / pachete pe care utilizatorul le poate instala cu ușurință.

Se deschide „Inspectează elementul”

După instalarea Firefox, puteți găsi inspectorul acestuia făcând clic dreapta pe orice element de pe o pagină web. Acesta vă va afișa un meniu drop-down, cum ar fi acesta din imaginea de mai jos, unde „Inspect Element” este situat în partea de jos a listei.

Inspector

Dacă faceți clic pe „Inspectare element”, se va deschide imediat inspectorul din partea de jos a ecranului. În acest moment, titlurile devin cam neclare, deoarece inspectorul va fi deschis tehnic partea „Inspector” a serviciilor sale.

În orice caz, elementul pe care ați făcut clic va fi afișat în mijlocul instrumentului și când treceți mouse-ul peste acel element – cum ar fi <div> eticheta pe care o plasez în imaginea de mai jos – „Inspectorul” va evidenția acel element vizual de pe ecran în pagina web în sine.

Fila inspector Firefox inspector

Acest lucru face ușor să știți la ce elemente vă uitați. De asemenea, facilitează găsirea diferitelor proprietăți ale acestor elemente. Dacă priviți în partea dreaptă a „Inspectorului”, veți vedea proprietățile acelui specific <div> etichetă, inclusiv setările sale pentru marjă, umplutură, margine, dimensiunea fontului și alinierea verticală.

Dacă parcurgeți panoul din partea dreaptă, puteți vedea proprietățile pe care le-a moștenit de la alte elemente. Puteți chiar să modificați proprietățile din acea fereastră și să le vedeți să apară pe pagina web în timp real.

Editor de stil

Puteți continua călătoria dvs. către domeniul foilor de stil în cascadă (CSS) urmând bara de instrumente din partea de sus a inspectorului. Faceți clic pe locul unde scrie „Style Editor” pentru a deschide un dialog nou care afișează trei panouri noi în partea de jos a ecranului.

Fila stil inspector Firefox

Aici puteți vedea cele două fișiere de foi folosite de DuckDuckGo, elementele primei foi de stil selectate și diferitele reguli „@media” ale acelei foi, care guvernează designul receptiv pentru ecrane mai mici și mai mari.

Puteți edita aceste foi de stil la fel ca în secțiunea „Inspector”. În acest caz, există o mulțime de reguli dintre care să alegeți – 1262 reguli numai în prima foaie de stil.

Dacă navigați și mai departe în bara de instrumente la „Monitorul rețelei”, veți găsi solicitările site-ului web pentru acele fișiere și starea acestora. Alte elemente, cum ar fi imagini și fonturi, pot fi, de asemenea, prezente în acea filă și puteți vedea toate aceste cereri și dimensiunea fiecărui fișier după ce cererea a fost procesată.

Fila rețea inspector Firefox

Performanţă

Când deschideți fila „Performanță”, va trebui să faceți clic pe butonul „Începeți înregistrarea performanței” pentru ca inspectorul să adune informații. În câteva secunde va descoperi cadrele pe secundă (FPS) pe care rulează pagina dvs., evenimentele care au avut loc modelul de obiect document (DOM) și recalculările stilului, alături de timpul (de obicei în milisecunde) în care a luat aceste elemente sarcină.

Fila de performanță a inspectorului Firefox

Pentru acest site, puteți vedea evenimentul DOM evidențiat, o trecere a mouse-ului, a durat 6,03 milisecunde ca durată de încărcare. FPS-ul mediu pentru această pagină a fost de aproximativ 39. Iar graficul care arată intervalul meu de timp de răspuns a atins 9000 de milisecunde pentru unele evenimente.

Memorie

În fila „Memorie” va trebui, de asemenea, să faceți clic pe un buton – „Faceți instantaneu” – pentru a aduna informații. Pentru mine, a generat o hartă a evenimentelor care arată aproximativ 600 Kb de șiruri, 1 Mb de obiecte și 1 Mb de scripturi care își găsesc căile în memorie. Puteți vizualiza aceleași elemente în câteva moduri diferite, făcând clic pe meniul drop-down în care apare „Harta copacului”, așa cum puteți vedea în această captură de ecran.

Fila de memorie Firefox inspector

Depozitare

În cele din urmă, dacă faceți clic pe fila „Stocare”, puteți vedea fișierele permanente pe care un site web le-ar fi plasat pe computer. Relevant pentru majoritatea utilizatorilor, aceasta include cookie-uri. Puteți vedea unul încărcat în imaginea de mai jos.

Fila de stocare a inspectorului Firefox

Puteți vedea în panoul din partea dreaptă că acest cookie anume expiră la mijlocul următorului deceniu și că l-am accesat în timpul sesiunii de scriere a acestui articol.

Concluzie

Există multe de parcurs atunci când utilizați inspectorul Firefox. Această introducere a mai multor părți ar trebui să vă țină ocupat pentru o vreme.

Luați ceva timp pentru a modifica elementele HTML ale unui site. Accesați câteva site-uri web diferite pentru a vedea timpul lor de încărcare. Aflați câte cookie-uri încearcă să stocheze o anumită pagină pe computerul dvs. Uneori, aceste informații vă pot oferi o pauză.

Sperăm că această călătorie de descoperire vă va oferi o mai bună înțelegere a ceea ce fac site-urile web, astfel încât acestea să funcționeze așa cum vă așteptați. Poate fi mult mai mult decât v-ați dat seama anterior.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

You may also like...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x