Google Chrome DevTools pentru non-dezvoltatori

Google Chrome se numără printre cele mai utilizate browsere, cu aproape 65% din utilizatori la nivel global. Și există un motiv bun pentru asta, funcționează bine, acceptă o mulțime de funcții web, se integrează nativ cu tot ceea ce Google oferă și este ușor de utilizat.

Dar există mai mult decât partea utilizatorului. Este foarte bine construit și pentru dezvoltatori. Firefox este un alt browser grozav care oferă o experiență superă de dezvoltare, deși baza de utilizatori este relativ mică. Deci, din acest motiv, ne concentrăm pe Chrome și este DevTools, dar, din fericire, interfața de utilizare a majorității browserelor rămâne foarte similară, astfel încât sfaturile de aici vor fi traduse bine în Firefox, Safari, Edge și alte browsere.

Ce este Chrome DevTools?

Chrome DevTools este un set de instrumente pentru dezvoltatori web încorporate direct în browserul Google Chrome. DevTools vă poate ajuta să editați pagini din mers și să diagnosticați rapid problemele, ceea ce vă ajută în cele din urmă să creați site-uri web mai bune, mai repede.
Pagina de pornire a documentelor Chrome DevTools

DevTools sunt ceea ce utilizează majoritatea dezvoltatorilor front-end (și adesea back-end) pentru a inspecta performanța unei pagini web, etichetele HTML care o definesc și stilurile care sunt aplicate în forma sa cea mai de bază. Oferă o mulțime de alte caracteristici super utile pe care le vom analiza atâta timp cât funcționează și în cazul de utilizare general și pentru non-dezvoltatori.

Instrumentele dev sunt ceea ce vedeți în captura de ecran de mai sus, cu codul în stânga și diferite proprietăți în dreapta. Aceasta este vizualizarea implicită pe care o veți vedea dacă apăsați Comandă + Opțiune + C (Mac) sau Control + Shift + C (Windows, Linux, Chrome OS).

DevTools oferă o mulțime de capabilități, dar cele mai notabile ar fi:

• Structura documentului generat (HTML) odată cu încărcarea paginii și în timp ce se încarcă.
• Ce CSS se aplică anumitor elemente HTML, precum și ceea ce este moștenit de la cele părinte.
  Vizualizați dimensiunea ferestrei, dimensiunile elementelor, umpluturile, marginile, marginile și multe altele.
• Abilitatea de a modifica totul pe pagină, în afară de scripturile care rulează.
• Plecați să faceți modificări la cod care sunt salvate odată ce reîmprospătați pagina (însă nu este posibil în mod implicit)
• Toate modificările fac parte din partea clientului - adică orice schimbați, veți vedea numai până când reîmprospătați pagina.
• Departe de testare fără cache și cu o viteză de rețea mai mică simulată.
• Instrumente pentru a măsura performanța și a înscrie performanța unei pagini, precum și a oferi sfaturi pentru rezolvarea acesteia.
• Afișați consola paginii și erorile, avertismentele și mesajele, precum și o modalitate de a executa codul javascript acolo.

Aceasta este o listă foarte scurtă, dar acoperă unele dintre caracteristicile mai notabile, în special ceea ce vom acoperi.

În legătură cu aceasta : Cum să creați prima dvs. extensie Chrome

De ce aveți nevoie de DevTools, care sunt cazurile de utilizare?

Pentru dezvoltatori este evident, dar ce se întâmplă cu non-dezvoltatorii? Ei bine, există câteva trucuri și sfaturi îngrijite care vă vor apropia de statutul de utilizator puternic. Adesea, proprietarii de site-uri identifică probleme pe site, pun o întrebare sau două și uneori primesc un fragment de cod pentru a „lipi” pentru a remedia o problemă. Unul dintre modurile în care dezvoltatorii testează astfel de fragmente este aplicându-le direct pe instrumentele de dezvoltare. Este, de asemenea, o modalitate de a oferi o previzualizare frumoasă dezvoltatorilor dvs. despre cum doriți să arate lucrurile.

Aplicați codul CSS

Prima și cea mai obișnuită utilizare a DevTools este modificarea și aplicarea CSS. CSS este ceea ce definește modul în care arată o pagină, este estetica. Pentru a face acest lucru, trebuie doar să indicați elementul pe care doriți să îl stilizați, faceți clic dreapta și alegeți „inspectați”

Același lucru este valabil pentru majoritatea celorlalte browsere, deși textul elementului de meniu poate varia ușor. După ce faceți acest lucru, veți vedea că DevTools se deschid și selectați direct elementul de care aveți nevoie. Acolo, veți vedea cele două părți principale ale instrumentelor de dezvoltare. Laturile HTML și CSS (stânga și dreapta):

Ar putea fi un pic dificil să vă găsiți drumul în jurul părții HTML, dar nu vă faceți griji, DevTools va evidenția elementele pe măsură ce le treceți pe panoul din stânga. Odată ce găsiți ceea ce aveți nevoie, în dreapta puteți scrie stiluri. Sunt deja câteva adăugate. Deci, să schimbăm fundalul pentru a citi și să vedem cum arată:

Imediat când tastați, stilurile din pagină se vor actualiza. Puteți scrie orice CSS aici și va fi aplicat la fel ca stilurile deja de pe pagină. Dacă apăsați aproape de sfârșitul regulilor (sub „lățime”), acesta va începe să adauge noi stiluri. Sau le puteți scrie în partea de sus unde scrie „element.style”. Apoi, dacă doriți să partajați acest lucru dezvoltatorilor dvs., puteți doar să selectați codul și să-l copiați-lipiți. Sfat Pro, apucați și „selectorul” de stiluri. Acesta este „.RNNXgb” din captura de ecran de mai sus. Acest lucru le va spune dezvoltatorilor pe ce element adăugați stiluri.

Conectat : WordPress CSS: Ghid de bază pentru începători

Alege o culoare

Un alt lucru îngrijit pe care îl puteți face este să aflați exact ce culoare este utilizată, precum și să utilizați un selector de culori direct din DevTools pentru a vedea alte culori. Doar faceți clic pe pătratul de lângă codul de culoare (unde indică săgeata de deasupra) și va deschide un selector de culori.

Găsiți ce font este utilizat

Dezvoltatorii CSS definesc, de asemenea, fonturile utilizate, dimensiunea fontului, înălțimea liniei, culoarea, greutatea fontului și alte proprietăți legate de tipografie. Toate acestea ar fi afișate în partea dreaptă. Atâta timp cât nu este încrucișat, se aplică stilul pe care îl vedeți. Să aflăm ce font este utilizat pentru căutarea din formularul Google. Faceți clic dreapta, inspectați și derulați în jos până când vedeți fontul sau căutați doar în câmpul „Filtru” de deasupra, în partea de sus a secțiunii din dreapta:

Dacă mergeți mai departe și actualizați fontul, veți vedea cum ar arăta site-ul cu un alt font, unul la care ați putea dori să treceți în curând. Desigur, un dezvoltator va trebui ulterior să modifice codul și să rezolve orice probleme pe care le-ar crea o modificare a fontului, dar această metodă funcționează excelent pentru a testa lucrurile rapid fără a avea setat un mediu de dezvoltare.

Iată cum ar arăta pagina de pornire Google cu „Georgia” setat ca font. Pentru a realiza acest lucru, a trebuit să actualizăm mai multe proprietăți, dar datorită bunei arhitecturi CSS de la dezvoltatorii Google, a fost destul de ușor. De cele mai multe ori, un site slab scris necesită să actualizați o tonă de proprietăți pentru a vedea întregul site actualizat.

În legătură cu : Cum să alegeți cele mai bune fonturi pentru site-ul dvs. web

Cache, accelerație și viteză

Ce este memoria cache? În termeni simpli, o resursă care este salvată pe aparatul dvs. pentru o utilizare viitoare. O resursă ar putea fi JS, fișier CSS sau o imagine. Dacă nu se schimbă de fiecare dată când deschideți o pagină, nu este nevoie să o descărcați de fiecare dată, nu? Deci, browserul îl va păstra pur și simplu pe mașina dvs. pentru o vreme.

Dar ce se întâmplă, dacă a existat o modificare pe server și configurarea nu utilizează cele mai bune practici pentru actualizarea resurselor? Sau pe scurt, chiar dacă dezvoltatorii au schimbat baza de coduri, totuși vedeți stiluri vechi. Ei bine, atunci puteți opri memoria cache și puteți face o „reîmprospătare”.

Deschideți instrumentele de dezvoltare și navigați la fila „Rețea”. Apoi faceți clic pe „dezactivați memoria cache” și efectuați o „reîmprospătare hard”:

Acum, în timp ce răsfoiți pagini cu DevTools deschis, nu vor exista resurse cache din browserul dvs. Paginile se vor încărca mai lent pe măsură ce resursele sunt încărcate de fiecare dată, dar veți vedea modificările. În general, dezvoltatorii păstrează „Disable Cache” activat în mod implicit și îl dezactivează numai atunci când testează interacțiunile reale ale utilizatorilor atunci când sunt importanți timpii de încărcare.

Pe aceeași filă după reîmprospătare, veți vedea și măsurători ale vitezei și greutății paginii. Cât timp se declanșează „Încărcare” (eveniment în care se atașează alte scripturi pentru a face mai multă muncă), câte fișiere sunt solicitate (31 de solicitări mai sus, o sumă destul de bună), cât a fost descărcat și așa mai departe. Este simplu, cu cât este mai mic cu atât mai bine pentru fiecare valoare. Orice depășește 100-150 de cereri și veți începe să vedeți probleme mari de viteză.

DevTools oferă, de asemenea, o simulare a conexiunii lente. O caracteristică foarte utilă pentru a vedea cum funcționează site-ul dvs. într-o rețea mai lentă precum 3G. Pentru a-l activa, schimbați valoarea de lângă „Dezactivați memoria cache” și apăsați Reîmprospătare. Când reîmprospătați, veți vedea fiecare pas al încărcării site-ului. Dacă memoria cache este dezactivată, aceasta ar fi prima vizită pentru utilizări obișnuite.

Vedeți diferența de viteză atunci când selectăm „Slow 3G” și reîmprospătăm în comparație cu primul exemplu care utilizează viteza reală a conexiunii. Aici puteți testa și „Offline” - cum ar funcționa site-ul fără nicio conexiune la internet. Dacă sună ciudat, nu este adevărat, aplicațiile web progresive permit deja site-urilor să funcționeze chiar și fără conexiune la internet dacă au fost accesate cel puțin o dată de către vizitatori.

Auditele sunt o altă caracteristică excelentă, care oferă o analiză rapidă a paginii, ușor de utilizat. Puteți pur și simplu să îl rulați accesând filele „Audituri” și apăsați pe „Generați raportul”:

În dreapta aveți câteva opțiuni pentru a decide ce să testați, deoarece uneori testele pot dura ceva timp (un minut sau două), deci dacă le executați de multe ori, puteți alege exact ceea ce este necesar pentru testul curent. . Iată un exemplu de rezultat cu opțiunile de mai sus pentru ecranul de pornire Google:

Un scor grozav! 94 este foarte bun și prezintă munca grozavă pusă pe această pagină. Amintiți-vă că poate arăta foarte simplu la suprafață, dar există o mulțime de scripturi care rulează în fundal, care rămân ascunse și încetinesc site-urile. Există o mulțime de alte valori testate și puteți face acest lucru pe orice site pentru a afla ce probleme are și ce poate fi îmbunătățit.

În legătură cu : Ce înseamnă cu adevărat „accelerarea site-ului dvs.” și cum să îl realizați?

Consola DevTools

Vederea finală pe care o vom acoperi este consola. Acces ușor prin simpla apăsare a tastei ESC sau accesarea filei „Consolă”. Așa cum era de așteptat, nu există erori, ci doar câteva avertismente care nu ar trebui să ridice prea multe probleme:

Dar, dacă, dintr-un anumit motiv, după o actualizare recentă pe site-ul dvs., o componentă interactivă (cum ar fi un meniu derulant, meniu, hartă, formular) nu mai funcționează, puteți oricând să aruncați o privire la consolă. Este posibil să existe erori care să spună care este motivul.

Iată un exemplu de cum ar arăta o astfel de eroare:

Este puțin ironic să folosești pagina de documentație a jurnalelor de erori pentru a prezenta erorile, nu? În orice caz, servește unui scop bun. Acestea sunt erori care ar opri funcționarea unor caracteristici. Puteți oricând să partajați astfel de informații dezvoltatorilor dvs. și să solicitați asistență. Jurnalele sunt postate live pe măsură ce interacționați cu pagina, deci dacă faceți clic pe un buton și apare o eroare, cel mai probabil scriptul din spatele acestuia are o problemă.

Related : Calea către a deveni un bun web designer

Notificare de securitate : nu este o idee bună să copiați-lipiți codul pe consolă fără a înțelege ce face. Mai ales dacă provine dintr-o sursă de încredere și este utilizat pe aplicații interne / site-uri web ale companiei dvs. Facebook a postat un avertisment din acest motiv pe consola lor:

rezumat

DevTools este un instrument uimitor care ajută atât dezvoltatorii, cât și proprietarii de site-uri. Vă oferă tot ce aveți nevoie pentru a modifica și modifica o pagină. Prin intermediul acestuia puteți schimba CSS, modifica HTML, șterge și rearanja elemente de pe pagină, puteți vedea rapoarte de viteză și erori raportate.

Proprietarii site-urilor îl pot folosi pentru a prezenta dezvoltatorilor idei și exemple ale nevoilor lor care ar putea fi mai ușor de înțeles decât să scrie paragrafe de text. Cu unele cunoștințe CSS cu privire la proprietățile de bază, puteți fi mult mai descriptiv față de nevoile dvs., ceea ce va reduce foarte mult înainte și înapoi și timpul petrecut cu noi schimbări.

Există o mulțime de alte caracteristici care așteaptă să fie utilizate, nu vă fie teamă să explorați!