Instrumentele ascunse ale Chrome DevTools: Descoperă-le potențialul maxim!
Chrome DevTools reprezintă un motiv major pentru care dezvoltatorii preferă acest browser în detrimentul altora.
Cu toate acestea, majoritatea dintre noi exploatăm doar o mică parte din funcționalitățile sale, ignorând numeroasele opțiuni inovatoare care sunt adăugate în mod constant.
Haideți să explorăm împreună câteva dintre aceste perle ascunse!
Fiecare dintre noi are preferințele sale în ceea ce privește sistemul de operare, platforma hardware, tipul de dispozitiv și alți factori. Totuși, un aspect ne unește: majoritatea folosim browserul Chrome, iar acest lucru pare a fi o tendință dominantă. Se poate afirma cu siguranță că războaiele browserelor s-au încheiat, iar Chrome a ieșit victorios.
Utilizatorii de Windows folosesc browserul implicit doar pentru a instala Chrome, ulterior ignorând orice „recomandare” a sistemului de operare. Același lucru se întâmplă și pe dispozitivele Apple, în special MacBook-urile și dispozitivele cu ecran mai mare, unde utilizatorii și dezvoltatorii evită Safari, în ciuda eforturilor Apple de a convinge contrariul.
În plus, dacă un dispozitiv nu rulează Chrome, este foarte probabil să utilizeze un browser derivat, compatibil cu Chrome, precum Brave sau Vivaldi. Deși tehnic nu sunt bazate direct pe Chrome, acestea reprezintă totuși o opțiune preferată de mulți utilizatori. Utilizatorii obișnuiți pot opta pentru aceste alternative din motive ideologice sau particulare, dar când vine vorba de dezvoltatori, Chrome rămâne alegerea dominantă.
Chiar și consumul ridicat de memorie, o problemă frecvent menționată, este ignorat în favoarea uneltelor de dezvoltare avansate oferite de Chrome DevTools.
Sursa imaginii: documentația oficială Chrome DevTools
Dacă citești acest articol, presupunem că ești un utilizator avansat, un entuziast sau un dezvoltator web. Prin urmare, nu este necesară o introducere în DevTools, cum se deschide sau care sunt diferitele sale funcții.
Fără a mai pierde timpul, să explorăm câteva dintre funcțiile mai puțin cunoscute, dar extrem de utile ale Chrome DevTools.
Modul de design
Un proces obișnuit în activitatea dezvoltatorilor este inspectarea elementelor de pe o pagină web și modificarea codului HTML pentru a previzualiza anumite aspecte sau a testa efectul unor modificări.
Totuși, lucrul direct cu codul HTML în DevTools nu este întotdeauna simplu. Navigarea printr-o structură complexă de etichete, efortul de a identifica parantezele potrivite și manipularea spațiilor albe inestetice pot fi provocări. Acest lucru devine și mai complicat dacă ești un designer și preferi o abordare mai vizuală.
Iată un exemplu de captură de ecran de pe site-ul tipstrick.ro:
O structură HTML complexă și clase CSS complicate sunt tipice pentru majoritatea site-urilor web moderne, ceea ce face ca experiența cu DevTools să fie cel puțin suboptimală. 🤭
Însă există o funcționalitate în DevTools numită Modul de Design, care poate simplifica procesul în multe situații. Acest mod (care nu este denumirea oficială, ci un nume informal datorită modului în care este activat și a funcționalității sale) permite modificarea paginii web în mod vizual și direct, similar cu editarea unei foi de calcul sau a unui document text. Un dezavantaj este că această funcție nu este activată în mod implicit și este nevoie de câțiva pași suplimentari pentru a o activa, mai ales pentru utilizatorii non-tehnici.
Totuși, activarea este destul de simplă. Trebuie doar să urmezi instrucțiunile de mai jos. În funcție de familiaritatea ta cu mediul de dezvoltare, pașii pot fi foarte ușori sau mai dificili. Iată ce trebuie să faci:
- Asigură-te că pagina web pe care vrei să o editezi este încărcată și vizibilă (fila respectivă este cea activă).
- Deschide panoul DevTools în mod obișnuit (comandă rapidă de la tastatură, clicuri de mouse, etc.). Personal, prefer comenzile rapide de la tastatură, pe Mac folosesc Opt+Cmd+I.
- Odată deschis DevTools, accesează fila „Consolă”. Unii dintre voi vor considera aceste informații banale, dar este important să ne gândim și la utilizatorii care se familiarizează cu consola browserului și JavaScript.
- Fă clic pe prima linie, în dreptul cursorului, unde vei putea introduce text. Aici poți scrie cod JavaScript (vezi captura de ecran de mai jos).
- Acum, introdu codul JavaScript. Nu te îngrijora, este foarte scurt și simplu:
document.designMode = "on". Poți copia și lipi codul (asigură-te că nu copiezi și formatarea) sau îl poți tasta dacă te simți încrezător. - Apasă Enter/Return.
„Atât de simplu?”
Da, chiar atât de simplu!
Acum poți modifica liber pagina, ca și cum ar fi un document editabil. Urmărește acest exemplu video în care modific site-ul Spotify folosind Modul Design:
Modul Design, deși interesant, nu este o soluție universală. Nu poți, de exemplu, să copiezi și să lipești butoane, să le schimbi aspectul sau să faci modificări complexe. Numărul de acțiuni pe care le poți realiza este limitat în comparație cu un editor vizual de pagini web. Totuși, este util pentru modificări rapide și directe de conținut.
Se pare că Google testează reacția utilizatorilor față de această funcție. Dacă este bine primită, este probabil ca în viitor să vedem opțiuni de editare mai avansate!🤞🏻🤞🏻
Simularea condițiilor de rețea
Fila Rețea din Chrome DevTools este una dintre cele mai utilizate funcții (nu am statistici oficiale, dar ca dezvoltator web, folosesc fila Consolă 20-30% din timp, iar fila Rețea restul timpului). Aceasta oferă informații detaliate despre solicitările efectuate de o pagină, tipul acestora, metadate, starea, progresul descărcării resurselor, timpii de încărcare, etc. Cu o astfel de utilitate, nu este de mirare că fila Rețea este atât de populară.
Cu toate acestea, este ușor să treci cu vederea funcția despre care vom discuta acum. Este vorba despre un meniu derulant inofensiv care indică „Online”.
Dacă dai clic pe acest meniu, vei observa diverse opțiuni care îți permit să simulezi viteza rețelei: 3G rapid, 3G lent, offline, etc. Deși pot exista multiple situații în care această funcție este utilă, cel mai des este folosită pentru testarea performanței unui site web pe rețele lente sau testarea comportamentului aplicațiilor web offline (dacă au fost adăugate aceste funcționalități).
Să vedem cum funcționează. Setez rețeaua la „Slow 3G” și reîncarc pagina din captura de ecran anterioară. Observă, în captura de ecran precedentă, cum majoritatea resurselor sunt descărcate în mai puțin de 100 de milisecunde, folosind conexiunea mea de internet rapidă (40 Mbps).
Acum, să vedem ce se întâmplă cu o rețea 3G lentă.
Ce diferență!
Timpul de încărcare al resurselor este acum între 5 și 10 secunde. Încărcarea completă a paginii a durat 17.25 secunde! Înțeleg la ce te gândești, dar este important să reții că, pe o rețea 3G lentă, orice site web modern va avea nevoie de câteva secunde pentru a se încărca. Încărcarea rapidă pe rețele lente este o problemă complexă, care de obicei presupune o decizie de business în care eforturile sunt justificate de rezultate.
Observă pictograma de avertizare din fila Rețea din captura de ecran de mai sus. Acesta este un mod prin care Chrome îți reamintește că ai făcut o modificare care nu este implicită, iar dacă nu știi ce faci, ar trebui să o resetezi.
Selectorul interactiv de culori
Inspectarea elementelor DOM în DevTools este o activitate cotidiană pentru majoritatea dezvoltatorilor web. De asemenea, suntem familiarizați cu secțiunea de detalii CSS, unde putem edita și vedea rezultatele imediat.
O facilitate utilă ascunsă în acest context este selectorul de culori care apare atunci când dai clic pe o proprietate CSS de culoare!
Acest selector nu este unul simplu. Îți permite să controlezi transparența, să schimbi sistemele de culori, să alegi o culoare direct din pagină și multe altele.
Data viitoare când experimentezi cu culorile unui site web, nu trebuie să ghicești sau să introduci manual codul hexazecimal pentru nuanța dorită. Pentru mulți dezvoltatori, care preferă să proiecteze site-uri web direct în browser, funcții de genul acesta reprezintă un real ajutor! 🙂
Monitorizarea evenimentelor pe pagină
Adesea, ne dorim să știm ce se întâmplă cu un anumit element care ne interesează. Acest lucru este valabil mai ales atunci când folosim jQuery într-o bază de cod extinsă, fie ea proprie sau a altora. Logica evenimentelor poate fi dispersată în tot codul, iar urmărirea unei erori poate deveni un coșmar.
Din fericire, Chrome DevTools oferă o funcție specială care te ajută în aceste situații. Aceasta monitorizează elementul indicat și înregistrează evenimentele în consolă. Din păcate, această funcție nu acceptă selectarea elementelor folosind clase CSS. Deci, nu poți folosi sintaxa jQuery $(“#email”).🙂
Totuși, să vedem cum funcționează. Începem prin a folosi instrumentul de inspecție DevTools pe elementul dorit. Da, este același instrument pe care îl folosim zilnic.
În captura de ecran de mai jos, am folosit instrumentul de inspecție pentru a evidenția un câmp de introducere text. Prin „evidențiere” nu mă refer la evidențierea vizuală a elementului de pe pagină, ci la faptul că am selectat elementul cu ajutorul cursorului inspector, iar codul HTML corespunzător a fost evidențiat în DevTools.
Acest lucru va face ca elementul inspectat să fie accesibil ca o variabilă specială JavaScript denumită $0. Acum, fără a da clic în altă parte pe pagina web (mai ales în secțiunea de cod HTML), facem clic pe Consolă și adăugăm un ascultător de evenimente pentru acel câmp de text. Este nevoie de o singură linie de cod: monitorEvents($0, 'mouse'). Partea „mouse” de aici îi indică lui Chrome că suntem interesați doar de evenimentele generate de mouse.
De îndată ce apăsăm Enter/Return, monitorizarea este activată și dacă acum trecem cu mouse-ul peste sau dăm clic pe câmpul de text, evenimentele vor fi înregistrate în consolă ca obiecte JavaScript:
După cum poți vedea în captură de ecran, mai multe evenimente mouse au fost capturate în timp ce am dat clic pe element, am introdus numele meu și am mutat mouse-ul (evenimentele de tastatură nu au fost înregistrate). Fiecare eveniment este un obiect JavaScript complex, care conține o mulțime de informații. De exemplu, am extins obiectul eveniment „click” și numărul de proprietăți a fost atât de mare încât nu a încăput într-o singură captură de ecran!
Te încurajez să încerci această funcție cât mai repede, deoarece cu siguranță îți va economisi timp și efort în viitoarele proiecte!
Rapoarte de performanță a site-ului web
În zilele noastre, performanța unui site web este crucială pentru succesul afacerii tale. Chiar și o mică îmbunătățire a performanței poate genera un impact major asupra SEO-ului și a satisfacției utilizatorilor. Dar cum afli care părți ale site-ului tău au nevoie de atenție?
Este necesar să angajezi o echipă de experți și să aștepți câteva zile pentru un diagnostic?
În unele cazuri, acest lucru poate fi necesar, dar, din fericire, Chrome DevTools ne oferă o soluție. În cele mai recente versiuni de Chrome (de la sfârșitul anului 2020), vei găsi fila Lighthouse în DevTools. Înainte, aceasta se numea Audituri, și, confuz, acesta este numele pe care îl vei găsi în documentele oficiale la data scrierii acestui articol. Ideea este că Lighthouse era un site web popular pentru verificarea gratuită a performanței site-ului, dar apoi Google l-a desființat (nu au fost oferite motive). Din fericire, aceeași funcționalitate puternică a reapărut ulterior în DevTools.
Pentru a genera un raport de performanță, trebuie doar să apeși un buton după ce pagina de interes a fost încărcată:
După cum poți observa în partea dreaptă a capturii de ecran, există opțiuni pentru a controla cantitatea de informații dorită. Odată ce ești mulțumit de setări, apasă butonul mare albastru și relaxează-te. După câteva secunde, vei avea un raport util care arată cam așa:
Cifrele pe care le vezi în captura de ecran de mai sus indică scorul general pentru fiecare categorie. Categoria pentru aplicații web progresive (PWA) este inactivă, deoarece acest site web nu are capabilități PWA. De asemenea, după cum poți observa după dimensiunea barei de defilare, este un raport detaliat.
Iată cum arată o parte a secțiunii despre performanță:
Nu pretind că Lighthouse și sugestiile sale sunt soluția supremă pentru performanța site-ului, dar sunt extrem de utile, mai ales pentru că majoritatea proprietarilor și dezvoltatorilor de site-uri web nu au o imagine clară asupra problemelor și a soluțiilor.
Recunosc că și eu, ca dezvoltator web, mă simt uneori pierdut în fața problemelor legate de performanță, deoarece acestea reprezintă un domeniu specializat. Astfel, Lighthouse este un instrument puțin cunoscut și subapreciat, care face parte acum din Chrome DevTools și este extrem de util atât pentru proprietarii de afaceri, cât și pentru dezvoltatori/administratori de sistem.
Performanță în editarea codului
Fila Surse din DevTools ne permite să accesăm diferitele fișiere încărcate de un site web. Aici poți edita cod, salva fragmente, etc. Acest lucru nu ar trebui să surprindă dezvoltatorii web. Însă DevTools oferă câteva facilități integrate care ușurează viața dezvoltatorilor obișnuiți cu IDE-urile lor preferate.
DevTools folosește câteva comenzi rapide de la tastatură care îți vor economisi timp și îți vor reduce frustrarea legată de editarea codului. De exemplu, Ctrl+D (sau Cmd+D pe Mac) poate fi folosit pentru a evidenția mai multe instanțe ale unui cuvânt. În mod similar, ținând apăsat Ctrl (sau Cmd pe Mac) și dând clic în mai multe locuri din cod, vei obține mai mulți cursoare. Urmărește videoclipul de mai jos pentru o imagine mai clară:
Dacă ți se pare util, explorează documentația oficială pentru a profita de toate funcțiile de editare a codului oferite de DevTools.
Controlul stării elementelor DOM
Uneori, când testăm sau depanăm codul, comportamentul dorit este disponibil doar într-o anumită stare a elementului. În funcție de stare, poate fi frustrant să obții vizualizarea dorită. Pentru mine, starea „hover” este o provocare, deoarece știu că am pierdut mult timp încercând să „prind” momentul hover, utilizând CSS temporar sau alte soluții complicate.
Din fericire, Chrome DevTools oferă o modalitate simplă de a schimba starea unui element inspectat. În plus, opțiunea se află chiar acolo, dacă dai clic dreapta pe element (în fila Elemente). Totuși, datorită numărului mare de funcții și a presiunii unei zile de lucru, este ușor să o treci cu vederea:
Da, este chiar atât de simplu!
Acum nu mai trebuie să adaugi logică condițională de testare în cod, să scrii CSS suplimentar sau să apelezi la alte soluții complexe pentru a observa un element într-o stare diferită.
Panoul de instrumente
Ultimul, dar nu cel din urmă pe această listă, este panoul Instrumente. Este o altă funcție extrem de utilă, care este destul de ascunsă și poate fi accesată doar folosind comenzile rapide de la tastatură. După cum sugerează și numele, panoul Instrumente nu este un singur instrument, ci un fel de tablou de bord în care sunt disponibile aproape toate funcțiile DevTool. Datorită numărului mare de funcții oferite, în partea de sus este disponibilă o bară de căutare.
Pentru a activa panoul Instrumente, asigură-te că ești în panoul DevTools și apasă Ctrl+Shift+P (sau Cmd+Shift+P pentru utilizatorii Mac):
Panoul Instrumente este plin de surprize. De exemplu, știai că poți face o captură de ecran direct din DevTools?
Probabil nu, pentru că trebuie să activezi panoul Instrumente și să scrii „captură de ecran” în bara de căutare pentru a descoperi acest lucru:
Vei observa, de asemenea, mai multe opțiuni pentru a face capturi de ecran, inclusiv una pentru nodul DOM selectat! Explorează panoul Instrumente și te asigur că nu vei fi dezamăgit!
Dacă ai nevoie de o captură de ecran a oricărei pagini web de la distanță, consulta instrumentul tipstrick.ro Screenshot.
Concluzie
Browserul Chrome este bogat în funcții, dar adevărata sa valoare constă în funcționalitățile oferite de DevTools. După cum am observat în acest articol, există numeroase opțiuni ascunse – și altele care sunt la vedere – pe care majoritatea utilizatorilor nu le cunosc. De ce sunt ascunse aceste funcții?
Presupun că unele dintre ele sunt încă în stadiu experimental (cum ar fi Modul Design), iar dezvoltatorii Chrome doresc să facă mai dificilă accesarea acestor funcții de către utilizatorii obișnuiți. Pentru restul, cred că este vorba pur și simplu de o suprasolicitare informațională: dacă există, să zicem, 120 de funcții, unele dintre ele cu sub-funcții, este aproape imposibil să proiectezi o interfață de utilizare potrivită. De asemenea, în trecut, Google nu a excelat la UX-ul produselor sale, deci există și acest factor. 🤷🏻♂️
Sper că ai găsit utile unele dintre aceste funcții. Dar, mai important, sper că acest articol ți-a oferit o idee despre ce se ascunde și unde, astfel încât data viitoare când vei dori să explorezi sau să cauți ceva anume, vei știi unde să cauți mai adânc. 😆