De ce ar trebui să începeți să utilizați instrumentele pentru dezvoltatori Chrome chiar acum

Este esențial pentru dezvoltatori să aveți un set frumos de instrumente la îndemână pentru a vă testa site-ul. Unde este cel mai bun loc pentru a le păstra? În browserul dvs., desigur! Popularul browser web Google, Chrome, are instrumente pentru dezvoltatori încorporate chiar înăuntru. Este un set de instrumente create pentru autorizarea și depanarea web. Instrumentele pentru dezvoltatori Chrome (cunoscute sub numele de DevTools) oferă dezvoltatorilor acces la funcționarea internă a browserului web și a aplicațiilor web.

Folosind Chrome DevTools puteți cunoaște stilurile utilizate, dimensiunea imaginilor, scripturile utilizate etc. Puteți depana și știi ce erori există pe pagină. Puteți chiar să activați sau să dezactivați stilurile sau să le schimbați complet, pentru a vedea ce efect are pe site-ul dvs. web.

Este în browserul tău

Instrumentele în sine sunt ușor de accesat. Iată trei moduri de a le deschide:

1. În browserul Chrome - selectați meniul Chrome (cele trei bare orizontale din colțul din dreapta sus), selectați Mai multe instrumente, apoi selectați Instrumente pentru dezvoltatori.
2. Faceți clic dreapta pe un element din orice pagină și selectați Inspectare element.
3. Pe tastatura dvs. din Windows selectați ctrl + shift + i. Pe Mac selectați cmnd + opt + i.

Oricare dintre acestea va deschide fereastra DevTools din partea de jos a browserului.

Fereastra primară

Instrumentele apar în partea de jos a ecranului. Veți vedea o fereastră principală cu meniuri în partea de sus și elemente ca vizualizare implicită și o fereastră secundară cu meniuri și stiluri ca selecție implicită.

Instrumentele sunt grupate în sarcini. Există 8 grupuri care includ Elemente, Rețea, Surse, Cronologie, Profiluri, Resurse, Audituri și Consolă.

Elemente

Aici puteți vedea structura HTML a paginii dvs. Există o comutare în partea de jos pentru HTML și Body. Puteți trece cu mouse-ul peste oricare dintre elemente pentru a vedea informații detaliate despre fiecare.

Puteți face clic pe săgeți pentru a deschide și a închide conținutul elementelor principale pentru a le face mai ușor de citit. Deci, puteți închide corpul și puteți citi doar antetul, puteți alege elementul din antet pentru a vedea, etc. Acesta este un instrument excelent pentru vizualizarea HTML a site-ului dvs. web.

Reţea

Aceasta arată fiecare element care va fi încărcat, cum sunt încărcate, tipul fișierului, dimensiunea fișierului, timpul necesar încărcării și o cronologie a momentului în care va fi încărcat în secvența de încărcare a paginii. Aceasta poate fi utilizată pentru depanarea problemelor de rețea, cum ar fi blocajele la încărcarea paginilor și solicitările greșite.

De exemplu, dacă vedeți o mulțime de erori 404, puteți privi mai atent pentru a vedea care sunt problemele. Poate că ați dat jos o pagină care încă primește mult trafic sau poate cineva a scris greșit un link.

Surse

Aceasta arată scripturile și fragmentele care se vor încărca și de unde provin.

Cronologie

Aceasta vă arată timpul de încărcare a fiecărei resurse. Puteți vedea ce necesită cel mai mult timp, ceea ce vă ajută să reduceți încărcarea paginii.

Profiluri

Aceasta arată utilizarea memoriei pentru fiecare element. Acest lucru este minunat pentru a vă arăta codul care trebuie optimizat.

Resurse

Aici puteți inspecta resursele încărcate. Puteți privi cookie-urile, memoria cache a aplicațiilor, bazele de date HTML5 etc.

Audituri

Aceasta vă permite să analizați pagina. Puteți audita după ce s-a încărcat sau pe măsură ce se încarcă.

Starea actuală de audit

În primul rând, am selectat să rulez Audit Present State. Aceasta efectuează auditul pe măsură ce site-ul se află în prezent, deja încărcat în browserul meu.

Îmi oferă o listă de articole, le colorează în funcție de importanța lor și arată numărul de probleme. Pot vedea mai multe detalii făcând clic pe ele.

Am extins mai multe dintre ele pentru a vedea informații detaliate despre fiecare. Îmi oferă informații despre utilizarea rețelei și performanța paginii web. Îmi oferă sfaturi despre cum să rezolv problemele și le acordă prioritate pentru mine.

Reîncarcă pagina și Audit la încărcare

M-am întors și am selectat să aud la încărcare. Rezultatele sunt similare, dar, așa cum era de așteptat, există mai multe probleme la încărcarea paginii decât după încărcarea paginii.

Între cele două primesc informații despre JavaScript, stocarea în cache a browserului, stocarea în cache a proxy-ului, dimensiunea modulelor cookie, difuzarea conținutului dintr-un domeniu fără cookie, dimensiunile imaginii, ordinea și stilurile scripturilor, plasarea CSS în capul documentului, eliminarea riles-urilor CSS neutilizate și utilizarea CSS-ului normal nume de proprietăți. Desigur, rezultatele vor varia în funcție de site.

Informațiile nu sunt la fel de detaliate ca PageSpeed ​​Insights, dar sunt suficiente pentru a mă începe și îmi place comoditatea ca acestea să fie integrate în instrumentul pe care îl folosesc oricum. Vă recomand să îl rulați de fiecare dată când modificați site-ul. Este prea ușor de utilizat pentru a nu-l utiliza.

Consolă

Aceasta este Consola JavaScript unde puteți testa pagini și aplicații. Puteți depana scripturile și puteți primi sfaturi cu privire la ce modificări să faceți. Consola vă permite să introduceți comenzi, astfel încât să puteți interacționa cu pagina dvs. web. Va înregistra informațiile de diagnosticare pentru a vă ajuta cu depanarea. Îl puteți folosi în ecranul principal sau în sertar (fereastra de sub ecranul principal).

Puteți utiliza consola sau linia de comandă API. Puteți să scrieți în Consolă, să vă formatați elementele și ieșirile de stil, să măsurați timpul de execuție sau încărcare, să vizualizați și să marcați cronologia, să numărați instrucțiuni, să setați puncte de întrerupere, să evaluați expresii, să monitorizați evenimentele, să stivați mesaje, să vedeți erori și avertismente și multe altele. Mai Mult.

Acesta este un instrument puternic, dar este foarte mult să îl folosești. Din fericire, materialul de referință bun este furnizat cu exemple despre modul de utilizare.

Depanare

Selectând ctrl + p în Windows sau cmd + p pe Mac, se va deschide ecranul de depanare unde puteți selecta scripturile de depanare. Acest instrument vă oferă funcțiile de depanare pe care v-ați aștepta să le vedeți în orice mediu de programare: întrerupeți, continuați, intrați în, treceți peste, puncte de întrerupere, cod formatat etc.

Fișierele de ajutor detaliate sunt furnizate pentru a vă ajuta să utilizați modul de depanare.

Fereastra Stiluri CSS

Caseta din extrema dreaptă conține toate informațiile CSS. Pe măsură ce selectați un element, fereastra Stiluri din dreapta vă arată informațiile despre stiluri pentru element. Această secțiune este interesantă. Există cinci grupuri de instrumente: Stiluri, Calculat, Ascultători de evenimente, Puncte de întrerupere DOM și Proprietăți.

Stiluri

Puteți selecta stilurile și le puteți modifica manual în această fereastră. De exemplu, puteți selecta dimensiunea și culoarea fontului.

Selectați dimensiunea fontului și introduceți propria dimensiune. Când o faceți, dimensiunea fontului selectat se va schimba pe ecran.

Efectuarea selecției pe o culoare a fontului va deschide selectorul de culori. Selectați culoarea dorită și apăsați Enter. Veți vedea că fontul pe care l-ați selectat se schimbă în noua culoare. Acesta este un mod excelent de a încerca noi stiluri, dimensiuni și culori de fonturi.

Dacă faceți clic pe site.CSS din dreapta, veți deschide o fereastră mai mare cu informațiile în detaliu. Aici, puteți introduce numele fontului pe care doriți să îl utilizați, să specificați o culoare, să specificați o dimensiune etc.

Calculat

Aceasta arată dimensiunea cutiei în pixeli. Are umplutură, margine și margine.

Mod dispozitiv

Există un mic buton în stânga între lupă și meniul Elements care arată ca un dispozitiv mobil. Ghici ce? Este un dispozitiv mobil. Acesta este modul de emulare a dispozitivului. Acesta este un mod minunat de a vedea cât de receptiv este site-ul dvs.

Dispozitiv

Ceea ce este și mai răcoros decât a fi doar un dispozitiv mobil este că poți alege ce dispozitiv mobil este și apoi poți vedea site-ul web ca și când l-ai fi privit pe acel dispozitiv. Acum, ESTE minunat!

Am selectat Amazon Kindle Fire HDX 7 ”și ecranul imita acel dispozitiv, astfel încât să pot vedea cum ar arăta site-ul pe ecranul său și cum ar funcționa atingerea.

Puteți schimba orientarea ecranului apăsând butonul Swap Dimensions.

Acesta este un mod minunat de a vedea cum arată site-ul dvs. WordPress pe ecranul mobil mai mic. Am ales iPhone 6 și dimensiunea ecranului s-a schimbat pentru a se potrivi cu noua dimensiune și rezoluție a ecranului. Există multe dispozitive de vizualizat. De asemenea, puteți vedea o dimensiune personalizată trăgând laturile pentru a mări sau micșora dimensiunea.

Reţea

Există, de asemenea, o selecție pentru a alege tipul de rețea prin care accesați site-ul. Acest lucru vă permite să vedeți performanța site-ului dvs. web prin diferite tipuri de conexiuni și viteze. Puteți testa mai multe viteze de la 50 Kbps GPRS la 30 Mbps WiFi și mai multe viteze de conexiune 2G, 3G și 4G. Acesta este un mod excelent de a testa viteza site-ului dvs. web prin rețele carioase și de a obține informații despre ce trebuie îmbunătățit.

Interogări media

Există un mic buton în stânga sus, care arată ca niște trepte de scări. Deschide o altă secțiune a ecranului deasupra ferestrei site-ului web care arată lățimi de pixeli diferite. Dând clic pe ele, ecranul mobilului va ajunge la acea dimensiune. Îți arată:

• Interogări care vizează o lățime maximă
• Lățimi într-un interval
• Interogări care vizează o lățime minimă

Acest lucru vă ajută să reglați stilurile și conținutul media pentru un design complet receptiv.

Sertarul

Există o altă secțiune de instrumente sub ecranul principal numită sertar. Aceasta adaugă:

Consolă - aceasta este aceeași consolă ca în fereastra principală. Plasându-l aici îl puteți folosi împreună cu oricare dintre instrumentele din fereastra principală.

Căutare - vă permite să căutați surse.

Emulare - puteți alege Dispozitiv (Aici puteți alege modelul, rezoluția, rețeaua etc.), Media, Rețea (debit și agent utilizator) și Senzori (ecran tactil, accelerometre etc.).

Redare - afișați dreptunghiuri de vopsea, margini de strat compozite, contor FPS, repictare continuă a paginii și potențiale blocaje de derulare.

Setări și altele

Bara de meniu din dreapta vă va indica numărul de erori și avertismente de pe site-ul dvs., vă va permite să ascundeți sertarul din partea de jos, vă permite să ajustați setările și să andocați instrumentul în fereastra principală (creând un ecran divizat între site-ul dvs. web și DevTools).

Există o mulțime de setări pe care le puteți regla, astfel încât să puteți modifica instrumentele pentru a funcționa așa cum aveți nevoie.

Chrome Canary

Dacă doriți cu adevărat să vă aflați la limita sângerării Chrome DevTools de la Google, încercați Chrome Canary. Pictograma sa este galbenă. Ia-l? Are nevoie de o pelerină. Este cel mai recent și mai mare de la Google. Este conceput pentru dezvoltatori și are cea mai recentă versiune a DevTools. Încă nu este suficient de stabil pentru uz general, deci probabil vă va rupe sistemul.

Dacă sunteți predispus să faceți daune grave mediului dvs. atunci când sistemul dvs. se rupe, uitați-vă la pictograma Chrome Canary din imaginea de mai sus și nu clipiți timp de cinci secunde.

Acum puteți trece la sfârșit. Nu-ți vei aminti această parte.

Încheierea

Instrumentele pentru dezvoltatori Google Chrome sunt un instrument excelent pentru depanarea, îmbunătățirea performanței rețelei, vizualizarea site-ului dvs. pe diferite dimensiuni și rezoluții ale ecranului și obținerea de informații despre locul în care site-ul dvs. trebuie îmbunătățit. Există o mulțime de funcții și puteți adăuga și mai multe prin intermediul extensiilor. Numai aceste instrumente reprezintă un motiv excelent pentru a instala Google Chrome, chiar dacă nu este browserul dvs. principal. Dacă vă alocați timp pentru a afla caracteristicile va avea rezultate, iar site-ul și vizitatorii dvs. vă vor mulțumi pentru asta.

Randul tau! Folosiți Chrome Developer Tools? Am lăsat deoparte caracteristica ta preferată? Ai ceva de adăugat? Aș vrea să aud despre asta în comentariile de mai jos!

Imagine în miniatură a articolului de către Anikei / shutterstock.com