Cum să utilizați instrumentele pentru dezvoltatori Chrome pentru a vă îmbunătăți site-ul WordPress

Chrome Developer Tools (DevTools) este un set uimitor de instrumente de creație web și de depanare pentru Google Chrome. DevTools oferă acces la elementele care construiesc pagini web. Puteți utiliza instrumentele DevTools pentru a depana problemele legate de aspect, pentru a vedea și modifica CSS, pentru a seta puncte de întrerupere JavaScript, pentru a inspecta codul pentru optimizare și multe altele. Instrumentele DevTools sunt gratuite și sunt deja integrate în browserul dvs. Chrome. Deci, dacă aveți Chrome, atunci le aveți deja.

În acest articol, vom obține o imagine de ansamblu asupra instrumentelor și cum să le folosim pentru a vă îmbunătăți site-ul WordPress.

Deschiderea Instrumentelor

Există mai multe moduri de a deschide instrumentele:

1. Selectați meniul Chrome, alegeți Instrumente, apoi alegeți Instrumente pentru dezvoltatori.
2. Faceți clic dreapta pe orice element de pe ecran și selectați Inspectați element (metoda mea preferată).
3. Ctrl + Shift + I (pentru PC) | Cmd + Opt + I (pentru Mac)

Fereastra DevTools

Fereastra de instrumente conține două panouri. Ambele conțin instrumente care pot fi folosite împreună. Iată o privire asupra instrumentelor.

Primul conține 8 grupuri de instrumente. Instrumentele includ:

• Elemente
• Reţea
• Surse
• Cronologie
• Profiluri
• Resurse
• Audituri
• Consolă

A doua secțiune conține:

• Stiluri
• Calculat
• Ascultători de evenimente
• Puncte de întrerupere DOM (Document Object Model).
• Proprietăți

Există mai multe moduri diferite în care puteți vizualiza instrumentele. Puteți redimensiona ferestrele pentru a face loc. De asemenea, puteți muta ferestrele în partea dreaptă a ecranului pentru a vă oferi un ecran divizat cu instrumentele pe o parte și site-ul dvs. pe cealaltă parte.

Elemente

Acest panou vă arată arborele DOM, care reprezintă elementele HTML ale paginii dvs. și vă permite să inspectați sau să editați oricare dintre elemente. Puteți vedea ajustările CSS în timp real.

Puteți deschide și restrânge oricare dintre panouri pentru a facilita vizualizarea și navigarea făcând clic pe noduri (acestea arată ca săgeți sau triunghiuri). Vizualizarea arborelui DOM arată mai degrabă starea actuală a arborelui decât HTML original (de exemplu, este posibil să fi fost modificat de JavaScript).

Când treceți cu mouse-ul peste un element din vizualizarea arborescentă, elementul de pe pagina web va fi evidențiat. Vă va afișa informații precum stilul fontului, dimensiunea imaginii etc.

Dacă faceți clic pe unul dintre elemente, fereastra din dreapta va afișa CSS-ul. Aici puteți selecta stiluri și puteți modifica fonturi, culori, dimensiuni, margini, chenare, umplutură etc.

În subsol veți vedea pesmet, astfel încât să puteți reveni dacă este necesar. Puteți edita oricare dintre elemente doar făcând clic pe el și introducând modificările. Când apăsați Enter, veți vedea că modificările au loc.

De exemplu, această imagine are în prezent 600 de pixeli lățime. Pot selecta lățimea și pot introduce o nouă valoare și pot apăsa enter.

Imaginea se schimbă imediat la noua dimensiune.

Pentru a schimba stilul fontului, selectați fontul și selectați ceea ce doriți să schimbați în fereastra de stiluri din dreapta.

Puteți chiar să trageți elementele și să le plasați în noi locații pentru a schimba aspectul paginii dvs.

Mut comentariile recente deasupra postărilor recente doar trăgând div-ul.

Făcând clic dreapta vă oferă un nou set de funcții. Puteți vedea diferite stări ale elementelor, puteți modifica ca HTML, puteți seta pauze, puteți copia calea CSS și multe altele. De asemenea, puteți face clic dreapta și șterge un nod. Este atât de ușor încât este aproape înfricoșător.

Am folosit acest instrument pentru a găsi dimensiunile imaginilor și pentru a inspecta fragmente de cod.

Reţea

Panoul Rețea arată ce resurse de pe site-ul dvs. sunt solicitate și descărcate. Este reprezentat grafic în timp real. Dacă vedeți ce elemente durează cel mai mult pentru descărcare, vă oferă informații despre problemele de rezolvat pentru a vă optimiza pagina.

Puteți filtra și afișa diferite vizualizări și tipuri de diagrame, cum ar fi cascada. Puteți înregistra activitatea din rețea și o puteți salva pentru a o putea analiza mai târziu.

Puteți vizualiza detaliile resurselor. Detaliile includ:

• Antete de solicitare și răspuns HTTP – aceasta afișează adresa URL a solicitării, metoda HTTP, codurile de stare a răspunsului și afișează anteturile de răspuns și solicitări HTTP cu valorile lor și parametrii șirului de interogare.
• Previzualizare resurse – arată o previzualizare pentru imagini și resurse JSON.
• Răspuns HTTP – acesta arată conținutul neformatat al resursei.
• Numele și valorile cookie-urilor – aceasta arată cookie-urile care sunt transmise în anteturile de solicitare HTTP și de răspuns ale resursei și șterge cookie-urile.
• Mesaje WebSocket – acesta arată mesajele care sunt trimise sau primite printr-o conexiune WebSocket.
• Cronometrarea rețelei de resurse - aceasta arată un grafic al timpului petrecut pe fazele rețelei care sunt implicate în încărcarea resursei.

Vizualizarea cascadă este o modalitate excelentă de a vedea timpul necesar pentru încărcarea fiecărui element de la începutul solicitării până la livrarea ultimului octet al elementului. Văzând care elemente necesită cel mai mult timp, puteți înțelege mai bine unde să faceți ajustări.

Puteți salva datele rețelei pentru analize viitoare.

Surse

Puteți utiliza panoul surse pentru a vedea și a remedia codul dvs., cum ar fi JavaScript și scripturile care fac parte din pagina încărcată. Puteți întrerupe, relua, parcurge codul și face pauză la excepții. Include caracteristicile de bază de execuție a codului, astfel încât să puteți trece peste, să pășiți, să ieșiți și să comutați punctele de întrerupere. Puteți utiliza punctele de întrerupere pentru a depana JavaScript, actualizările DOM și apelurile de rețea. De asemenea, puteți seta puncte de întrerupere condiționate în care orice expresie poate reveni ca adevărată sau falsă. Punctul de întrerupere va întrerupe apoi codul dacă condiția este îndeplinită.

Există o caracteristică de imprimare destul de care face codul redus ușor de citit. Acest lucru face, de asemenea, mai ușor să vedeți unde să vă plasați punctele de întrerupere. Dacă acest lucru nu funcționează așa cum aveți nevoie, puteți utiliza un format de mapare bazat pe JSON, numit hartă sursă. Hărțile sursă sunt create de un minificator care are această caracteristică încorporată.

Cronologie

Panoul Cronologie arată unde se petrece timpul pentru încărcarea paginii și utilizare. Acesta va picta și reprezenta fiecare eveniment pe cronologia. Acesta va afișa resurse precum JavaScript, stiluri de calcul și revopsire. Puteți înregistra evenimentele și le puteți analiza în pași. Există trei moduri:

• Evenimente – o listă a tuturor evenimentelor organizate după tip. Aceasta vă arată care sarcini necesită cel mai mult timp.
• Cadre – aceasta arată munca care trebuie făcută în fiecare cadru al performanței de redare a site-ului dvs. De exemplu, dacă site-ul dvs. este redat la 60 de cadre pe secundă, vă va arăta munca făcută în 1/60 de secundă. Aceasta include încărcarea scripturilor, pictarea aspectului, gestionarea evenimentelor etc. Puteți utiliza aceasta pentru a vedea orice activitate anormală la încărcarea paginii.
• Memorie – aceasta prezintă grafic utilizarea memoriei de-a lungul timpului. Vă arată toate documentele, nodurile și ascultătorii de evenimente care sunt păstrate în memorie. Acest lucru vă ajută să aflați ce cauzează scurgerile de memorie.

Profiluri

Aici puteți profila timpul de execuție și utilizarea memoriei paginilor web și aplicațiilor. Aceasta vă arată unde sunt utilizate resursele. Acesta este un instrument bun pentru a vă optimiza codul.

Va înregistra trei tipuri de profil:

• Colectați profilul CPU JavaScript - acesta arată timpul de execuție al funcțiilor dvs. JavaScript.
• Take Heap Snapshot – aceasta arată utilizarea memoriei și distribuția obiectelor JavaScript.
• Record Heap Allocations – aceasta înregistrează alocările de obiecte pentru a arăta scurgerile de memorie în timp.

Resurse

Puteți folosi acest panou pentru a inspecta resurse. Vă va arăta informații despre IndexedDB, baza de date web SQL, module cookie de cache pentru aplicații, stocare locală și de sesiune și multe altele. De asemenea, vă puteți inspecta resursele vizuale, cum ar fi fonturile, imaginile și foile de stil.

Fila IndexedDB vă permite să vă inspectați bazele de date IndexedDB și depozitele de obiecte și să vizualizați și să ștergeți înregistrările.

Puteți rula comenzi SQL și puteți vizualiza rezultatele într-un format tabelar. Pe măsură ce tastați comenzile, vă va oferi indicii pentru numele tabelelor, comenzile și clauzele.

Fila cookie -uri arată informații despre cookie-uri care au fost create de un HTTP sau JavaScript. Le puteți șterge individual sau în grupuri.

Chrome memorează în cache resursele aplicației. Fila cache a aplicației vă permite să vizualizați starea acelor resurse. De asemenea, vă va afișa adresa URL a resursei, tipul de resursă și dimensiunea acesteia.

Localul și sesiune panoul de stocare vă permite să vizualizați, să creați, să ștergeți și să editați perechile cheie/valoare de stocare locale și de sesiune care erau create cu API-ul de stocare.

Audituri

Panoul de audit analizează pagina pe măsură ce se încarcă și sugerează remedieri pentru a optimiza încărcarea paginii. Are două audituri care separă informațiile în două categorii: Utilizarea rețelei și Performanța paginii web. Puteți efectua ambele audituri sau doar pe cel dorit. Puteți rula auditurile în starea actuală a paginii sau puteți reîncărca pagina și audita la încărcare.

Nu intră în atât de multe detalii precum Google PageSpeed ​​Insights, dar vă oferă suficiente informații pentru a remedia fructul care agățat jos. După ce am trecut prin PageSpeed ​​Insights, pagina mea era într-o formă decentă, dar mi-a oferit câteva informații despre site-ul meu pe care Insights nu le-a făcut.

Consolă

Consola este folosită pentru depanare. Puteți să înregistrați diagnostice, să introduceți comenzi, să evaluați JavaScript, să creați profiluri JavaScript etc. Puteți scrie informații în consolă prin linia de comandă. Folosind linia de comandă, puteți utiliza funcții pentru a selecta și inspecta elemente din DOM, pentru a monitoriza evenimentele și pentru a opri și a porni profiler.

Modul dispozitiv

Una dintre caracteristicile mele preferate este Modul Dispozitiv. Puteți accesa acest lucru cu butonul mic din stânga Elementelor din meniu. Modul Dispozitiv vă permite să alegeți dintre 23 de dispozitive mobile populare diferite (Kindle Fire, mai multe iPhone-uri, mai multe galaxii, laptopuri etc.) și să vedeți cum arată site-ul dvs. și cum reacționează pe acel dispozitiv.

De asemenea, puteți trage ecranul pentru a crea propria dimensiune personalizată a ecranului. Cursorul imită vârful degetului, astfel încât ecranul reacţionează cu mouse-ul la fel cum ar face cu degetul. De asemenea, vă puteți crea propriile dispozitive personalizate în ecranul de setări.

De asemenea, puteți alege tipul de rețea (3G, 4G, Wi-Fi etc.) astfel încât să puteți analiza modul în care arată și reacționează site-ul pe diferite rețele și viteze.

Sertar

În partea de jos a ecranului veți găsi sertarul. Aceasta poate fi activată sau dezactivată cu butonul >_ din partea dreaptă a barei de instrumente. Sertarul contine:

• Consolă – linia de comandă a consolei. Acest lucru face consola disponibilă atunci când utilizați alte panouri.
• Căutare – găsiți orice sursă. Puteți alege să ignorați majuscule și minuscule și să căutați expresii regulate.
• Emulare – instrumente și setări pentru modul dispozitiv. Include funcții precum accelerometrul și coordonatele de geolocalizare.
• Redare – arată caracteristici de randare, cum ar fi contorul de fps, chenarele stratificate compuse, etc. Partea cea mai bună despre aceasta este că va arăta potențiale blocaje.

Este util să aveți aceste instrumente în sertar, deoarece unele dintre panouri nu includ acces la aceste instrumente.

Gânduri finale

Chrome Developer Tools (DevTools) este un set uimitor de instrumente de creație web și de depanare pentru a vă ajuta să vă îmbunătățiți site-ul. Puteți să trageți și să plasați rapid elemente pentru a schimba aspectul site-ului dvs., a remedia pierderile de memorie, a remedia problemele de încărcare a paginilor, a vizualiza site-ul dvs. pe aproape orice dispozitiv mobil și dimensiunea ecranului și multe altele. Această privire de ansamblu nu face decât să zgârie suprafața cât de puternice sunt aceste instrumente. Cel mai bun lucru este că este deja încorporat în Google Chrome, așa că nu trebuie să descărcați nimic.

Aș dori să aud de la tine. Folosești Chrome Developer Tools? Care sunt caracteristicile tale preferate? Ce folosești cel mai mult? Aveți sfaturi despre utilizarea instrumentelor? Povestește-ne despre asta în comentarii.