Chrome DevTools este unul dintre cele mai mari motive pentru care dezvoltatorii refuză să atingă orice alt browser.
Dar cei mai mulți dintre noi folosesc doar o mână de funcții, rămânând nevăzuți de multe alte funcții uimitoare care sunt lansate în tăcere.
Să descoperim câteva dintre aceste pietre prețioase ascunse!
Toată lumea are sistemul de operare preferat, platforma hardware, tipul de dispozitiv, factorul de formă a dispozitivului etc. Dar un lucru este comun tuturor – rulează browserul Chrome și numai browserul Chrome! Cred că este sigur să spun că războaiele browserelor s-au încheiat, iar Chrome a câștigat convingător.
Utilizatorii Windows folosesc browserul implicit doar pentru a descărca Chrome și apoi folosesc Chrome, ignorând toate „recomandările” Windows. Același lucru este valabil și pentru dispozitivele Apple (în special MacBook-urile și dispozitivele cu ecran mai mare), unde utilizatorii și dezvoltatorii evită Safari, în ciuda multor afirmații puternice și a tacticilor de conversie ale Apple.
Și dacă un dispozitiv nu rulează Chrome, sunt șanse mari să ruleze un spin-off compatibil cu Chrome, cum ar fi Curajos sau Vivaldi. Da, știu, din punct de vedere tehnic, aceste browsere nu se bazează pe Chrome, dar asta este o altă discuție. Utilizatorul obișnuit ar putea folosi aceste alte browsere din motive ideologice sau speciale, dar când vine vorba de dezvoltatori, nu există niciun alt browser la vedere, cu excepția Chrome.
Chiar și faptul că este un monstru care mănâncă amintirile este ignorat. Motivul este simplu: Chrome DevTools.
Sursa imagine: documente oficiale Chrome DevTools
Acum, dacă citiți acest articol, este sigur să presupuneți că sunteți fie un utilizator cu putere, un chinuitor, un dezvoltator web sau ceva de-a lungul acestor linii. Ca atare, niciunul dintre noi nu are nevoie de o introducere în DevTools, cum să-l deschideți, diferitele sale caracteristici etc.
În schimb, fără a pierde timpul, să ne aruncăm direct în unele dintre caracteristicile mai puțin cunoscute, dar uimitor de utile ale Chrome DevTools.
Cuprins
Modul de proiectare
Unul dintre lucrurile pe care le fac dezvoltatorii în mod obișnuit este să inspecteze un element de pe pagină și apoi să-i modifice HTML pentru a previzualiza ceva sau a testa efectul unei modificări.
Cu toate acestea, lucrul cu HTML direct în DevTools nu este cel mai simplu lucru vreodată – să treci prin supa de etichete, să-ți încordezi ochii încercând să găsești paranteza de deschidere/închidere potrivită și să faci față cu o cantitate ridicolă de spații albe în timp ce editezi text (spații albe care lipsește în mod clar din documentul pe care îl vedeți), sunt câteva dintre problemele pe care le puteți confrunta. Este și mai rău dacă ești designer și nu vrei să treci prin mizerie.
Iată o captură de ecran de la una dintre paginile acestui site web (tipstrick.ro):
HTML profund imbricat și clasele CSS misterioase și confuze sunt tipice oricărui site web non-trivial de astăzi, unde experiența cu DevTools este cel puțin suboptimă. 🤭
Dar există o caracteristică DevTools numită Design Mode, care poate reduce durerea în multe cazuri. Folosind modul Design (apropo, acesta nu este numele oficial; este doar ceea ce oamenii l-au numit din cauza modului în care este activat și a ceea ce face – nu vă faceți griji, vom vedea foarte curând!), modificările la pagina poate fi realizată vizual și live, la fel ca editarea unei foi de calcul sau a unui editor de text! Singura captură este că această caracteristică nu este activată în mod implicit, iar activarea ei este o mică durere de cap, mai ales pentru cei care nu sunt dezvoltatori.
În orice caz, a face acest lucru este destul de simplu; tot ce trebuie să faceți este să urmați instrucțiunile de mai jos. În funcție de locul în care vă așezați pe curba de sofisticare a utilizatorului, acest lucru ar putea fi ridicol de ușor sau moderat de dificil. Iată ce trebuie făcut:
- Asigurați-vă că pagina web pe care doriți să o editați este încărcată și că o priviți în prezent (adică fila în cauză este cea activă).
- Deschideți panoul DevTools așa cum o faceți de obicei (comandă rapidă de la tastatură, clicuri de mouse, orice). Îmi place să folosesc comenzile rapide de la tastatură, iar pe Mac, Opt + Cmd + fac treaba.
- Acum, cu DevTools deschise, accesați fila numită „Consola”. Unii dintre voi s-ar putea să vă dați ochii peste cap la cât de prostesc și evident par toate acestea, dar hei, să ne gândim și la (sute de?) mii de oameni care se luptă în timp ce lucrează cu consola browserului și JavaScript (din orice motiv). ).
- Faceți clic pe prima linie de lângă cursor, care va prezenta apoi un prompt de tastare, iar acum puteți scrie cod JavaScript acolo (vezi captura de ecran puțin mai jos).
- Acum trebuie să scriem un cod JavaScript. Nu vă supărați, deoarece ceea ce aveți nevoie pentru a scrie/introduce este foarte scurt și simplu: document.designMode = „on”. De asemenea, puteți copia și lipi codul de pe această pagină (dacă o faceți, asigurați-vă că formatarea nu este copiată – avem nevoie doar de text simplu) sau dacă vă simțiți încrezător, introduceți-l.
- Apăsați Enter/Return.
„Asta e??!”
Da, asta-i tot!
Acum puteți modifica în mod liber pagina ca și cum ar fi un document. Urmăriți acest exemplu de videoclip în care editez în direct site-ul web Spotify folosind modul Design:
Caracteristica Design Mode, oricât de interesantă este, nu este un glonț de argint; nu puteți, de exemplu, să copiați-lipiți cu ușurință butoanele, să le schimbați aspectul și așa mai departe. Numărul real de lucruri pe care le poate face în comparație cu un editor vizual de pagini web de vis este foarte scăzut; cu toate acestea, rezolvă cazurile de utilizare în care conținutul trebuie schimbat vizual și din mers.
Acestea fiind spuse, nu este prea exagerat să pretindem că oamenii din Chrome testează cât de bine este primită această caracteristică; dacă găsește o recepție bună și un caz de utilizare puternic, este rezonabil să ne așteptăm că vor urma în curând capacități de editare mai puternice! 🤞🏻🤞🏻
Simularea condițiilor de rețea
Fila Rețea din Chrome DevTools este poate cea mai utilizată (nu am date despre ea, desigur, dar ca dezvoltator web, tind să folosesc fila Consolă poate 20-30% din timp, iar fila Rețea în restul timpului). Ne oferă tot felul de informații despre solicitările care se fac din pagină, tipul acestora, metadate/anteturi, stare, progresul descărcării materialelor (imagini, foi de stil, etc.), timpii de încărcare și așa mai departe. Cu o utilitate atât de incredibilă, nu este de mirare că fila Rețea este cea mai comună.
Și totuși, este simplu să pierdeți caracteristica despre care discutăm; s-ar putea să nu fi observat un meniu derulant inofensiv care afirmă ceea ce este evident: Online.
Dacă faceți clic pe aceasta, veți vedea un meniu derulant cu diverse opțiuni care vă permit să accelerați viteza rețelei: 3G rapid, 3G lentă, offline etc. Deși pot exista diverse cazuri de utilizare pentru această opțiune, cea mai comună este testarea site-ului web. performanță pe rețele lente sau comportamentul aplicațiilor web atunci când sunt offline (presupunând că au fost adăugate astfel de capabilități).
Să luăm asta pentru o învârtire. Voi seta rețeaua la „Slow 3G” și voi reîncărca aceeași pagină din captura de ecran anterioară. Înainte de a face asta, observați în captura de ecran anterioară cum pe conexiunea mea actuală de rețea (o bandă largă de 40 Mbps), majoritatea activelor sunt descărcate în mai puțin de 100 de milisecunde.
Și acum, este timpul să vedem ce îi face 3G lentă.
Ce diferență!
Observați că timpul de încărcare a activelor este acum în intervalul 5-10 secunde. De asemenea, site-ul s-a terminat de încărcat complet în 17,25 secunde! Da, știu la ce te gândești, dar trebuie să iei în considerare că într-o rețea 3G lentă, orice site modern va dura câteva secunde să se încarce. Dacă doriți încărcare rapidă pe rețele lente este un alt lucru, deși, în general, trebuie să fie o decizie de afaceri în care câștigurile justifică efortul.
În captura de ecran de mai sus, observați pictograma de avertizare din fila Rețea. Acesta este modul Chrome de a vă reamintește că ați făcut o schimbare persistentă și care nu este implicită și, dacă nu știți ce faceți, poate ar trebui să o resetați.
Selector interactiv de culori
Inspectarea elementelor DOM în DevTools este ceva ce facem cu toții aproape în fiecare zi. De asemenea, suntem obișnuiți cu secțiunea de detalii CSS afișată alături și știm că o putem edita și vedea rezultatele imediat.
O mică comoditate ascunsă printre toate acestea este că, dacă faceți clic pe o proprietate de culoare CSS, va apărea o interfață familiară de selectare a culorilor!
Observați că nu este un selector de culori de bază. Vă permite să controlați transparența, să schimbați sistemele de culoare utilizate, să alegeți o culoare direct din pagină și multe altele.
Deci, data viitoare când experimentați cu culorile de accent ale unui site, de exemplu, nu trebuie să vă descurcați sau să ghiciți valoarea potrivită pentru nuanța pe care o aveți în vedere! De fapt, multora le place să proiecteze site-uri web direct în browser; pentru ei, caracteristici ca acestea sunt o mană divină! 🙂
Elemente de monitorizare a evenimentelor pe pagină
De multe ori ne aflăm într-o situație în care ne-am dori să știm ce se întâmplă cu acel element specific care ne interesează. Acest lucru este valabil mai ales atunci când folosim jQuery într-o bază de cod non-trivială – indiferent dacă este a ta sau a altora; manevrele de evenimente și logica sunt răspândite peste tot, iar urmărirea unei erori poate fi un coșmar.
Din fericire, Chrome DevTools are o funcție ingenioasă tocmai pentru asta. Acesta va observa elementul indicat pentru tine și va înregistra evenimentele pe consolă. Dar există un pic de dezamăgire: această caracteristică nu are capabilități de selecție a elementelor bazate pe numele claselor CSS. Deci, modalitatea jQuery de $(„#email”) nu este disponibilă. 🙂
Acestea fiind spuse, să vedem cum să funcționeze. Începem prin a face un simplu „element de inspectare” folosind inspectorul DevTools. Da, este același instrument de inspecție pe care îl folosim în fiecare zi.
În captura de ecran de mai jos, am folosit instrumentul inspector pentru a evidenția introducerea textului. Prin „evidențiere” nu mă refer la faptul că elementul de pe pagină este evidențiat (nu este, după cum puteți vedea); mai degrabă, cursorul inspector a fost făcut clic pe textul de intrare și codul HTML corespunzător din DevTools este evidențiat.
Acest lucru vizează elementul inspectat în prezent pentru monitorizarea evenimentelor, ceea ce face ca elementul să fie accesibil ca o variabilă JavaScript specială numită $0. Apoi, asigurându-mă că nu fac clic în altă parte pe fereastra browserului neglijent (în special pe partea de cod HTML), dau clic pe Consolă și atașez un ascultător de evenimente pentru această introducere de text. Pentru aceasta, tot ce am nevoie este o singură linie de cod: monitorEvents($0, ‘mouse’). Partea „mouse” de aici îi spune lui Chrome că sunt interesat doar să urmăresc evenimentele bazate pe mouse.
De îndată ce apăs pe Enter/Return, monitorizarea este activată și dacă acum trec cu mouse-ul peste sau dau clic pe textul de intrare, acele evenimente sunt înregistrate în consolă ca obiecte JavaScript:
După cum puteți vedea în captură de ecran, mai multe tipuri de evenimente de mouse au fost capturate în timp ce am făcut clic pe element, am tastat numele meu și apoi am mutat mouse-ul departe (evenimentele de tastare, fiind evenimente de la tastatură, nu au fost înregistrate). Evenimentele sunt obiecte JavaScript în sine, așa cum reiese din captură de ecran; fiecare obiect eveniment conține o cantitate enormă de informații. De exemplu, am extins obiectul eveniment „clic”, iar numărul de proprietăți nu a putut încadra pe toate într-o singură captură de ecran!
Vă încurajez cu căldură să încercați această funcție imediat, deoarece cu siguranță vă va scuti de multe bătăi de cap în proiectele viitoare!
Rapoarte de performanță a site-ului web
În zilele noastre, performanța site-ului face sau distruge o afacere/site-ul web. Chiar și o mică creștere a performanței se traduce prin câștiguri masive de SEO, precum și prin satisfacția utilizatorilor. Dar de unde știi care părți ale site-ului tău au nevoie de atenție și care sunt deja bune?
Trebuie să angajați o echipă de experți și să așteptați cu răbdare câteva zile?
Ei bine, există cazuri în care acest lucru trebuie făcut, dar, din fericire, Chrome DevTools ne acoperă pe ceilalți. În cele mai recente versiuni de Chrome (sfârșitul anului 2020), veți găsi o filă Lighthouse în DevTools. Cu câteva luni în urmă, se numea Audituri și, destul de confuz, acesta este numele pe care îl veți găsi în documentele oficiale în momentul scrierii. Oricum, ideea este că Lighthouse era un site web la modă pentru verificarea gratuită a performanței site-ului, dar apoi Google l-a dat jos (nu au fost date motive). Din fericire, aceeași funcționalitate puternică a reapărut ulterior în DevTools.
Pentru a genera un raport de performanță, tot ce trebuie să faceți este să apăsați un singur buton după ce pagina care vă interesează s-a încărcat:
După cum puteți vedea în partea dreaptă a capturii de ecran, există câteva opțiuni pentru a controla câte informații doriți (și, desigur, pentru ce doriți să testați). Odată ce sunteți mulțumit de setări, apăsați butonul mare albastru, așezați-vă pe spate și relaxați-vă. Câteva secunde mai târziu, veți avea un raport benefic care arată cam așa:
Numerele pe care le vedeți în captura de ecran de mai sus arată scorul general pentru fiecare categorie. Categoria pentru aplicații web progresive (PWA) este inactivă, probabil pentru că acest site web nu are capabilități PWA. De asemenea, după cum vă puteți da seama după dimensiunea barei de defilare din captură de ecran (în partea dreaptă), este un raport lung.
Iată cum arată o parte a secțiunii despre performanță:
Nu voi pretinde că Lighthouse și sugestiile sale sunt sfântul Graal al performanței site-ului, dar acestea sunt extrem de utile; asta pentru că proprietarii și dezvoltatorii de site-uri web rareori au habar despre problemele care există și cum să le rezolve.
Sincer, chiar și eu mă simt pierdut ca dezvoltator web, deoarece performanța și testarea tind să fie un fel de specializări. Ca atare, Lighthouse este un instrument puțin cunoscut, subapreciat, care acum face parte din Chrome DevTools, care este de o utilizare imensă atât pentru proprietarii de afaceri, cât și pentru dezvoltatori/administratorii de sistem.
Performanță în editarea codului
Fila Surse din DevTools ne permite să accesăm diferite fișiere încărcate de site-ul web. De asemenea, are capabilități precum editarea codului, salvarea fragmentelor etc. Acest lucru nu ar trebui să surprindă dezvoltatorii web. Cu toate acestea, DevTools are și câteva facilități încorporate care fac viața mai ușoară dezvoltatorilor obișnuiți cu IDE-urile lor de cod preferate.
DevTools folosește câteva comenzi rapide de la tastatură bine-cunoscute care vă vor economisi timp și vor minimiza frustrarea legată de disputele de cod. De exemplu, Ctrl + D (sau Cmd + D pe Mac) poate fi folosit pentru a evidenția mai multe apariții ale unui cuvânt. În mod similar, țineți apăsat Ctrl (sau Cmd pe Mac) și faceți clic în mai multe locuri din cod vă oferă mai multe cursore. Aruncă o privire la videoclipul de mai jos pentru a-ți face o idee mai bună:
Dacă credeți că acest lucru este grozav, asigurați-vă că vă scufundați în documentele oficiale pentru a profita de toate funcțiile de editare a codului pe care DevTools le oferă.
Controlați starea elementului DOM
Uneori testăm sau depanăm ceva, dar comportamentul pe care îl urmărim este disponibil doar într-o anumită stare de element. În funcție de starea în care se află, s-ar putea să ajungi să te distrezi groaznic; pentru mine, este starea „hover”, deoarece îmi amintesc că am pierdut nenumărate minute încercând să cronometrez acțiunea de hover sau acționând pe CSS suplimentar, temporar, etc.
Din fericire, Chrome DevTools are o modalitate ușoară de a schimba starea unui element inspectat. În plus, opțiunea de a face acest lucru este chiar acolo dacă facem clic dreapta pe element (în fila Elemente), dar având în vedere numărul de caracteristici și presiunile unei zile de muncă, este ușor să trecem cu vederea:
Da, este chiar atât de simplu!
Acum, nu trebuie să introduceți logica de testare condiționată în codul dvs., să scrieți CSS suplimentar sau să treceți prin alte cercuri atunci când observați un element într-o stare diferită.
Panoul de instrumente
Ultimul, dar cu siguranță nu în ultimul rând, pe această listă este panoul Instrumente. Este o altă dintre acele caracteristici incredibil de utile care sunt bine ascunse și pot fi văzute 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. Deoarece există prea multe funcții care oferă funcționalitatea generală DevTools, o bară de căutare este disponibilă chiar în partea de sus.
Pentru a activa panoul Instrumente, asigurați-vă că vă aflați în panoul DevTools și apoi apăsați Ctrl + Shift + P (sau Cmd + Shift + P pentru utilizatorii de Mac):
Panoul Instrumente este plin de capabilități și surprize. De exemplu, știați că puteți face o captură de ecran direct din DevTools?
Pun pariu că nu, pentru că ar trebui să activați panoul Instrumente și să tastați „captură de ecran” în bara de căutare pentru a descoperi asta:
Veți observa, de asemenea, mai multe opțiuni pentru a face capturi de ecran, inclusiv una pentru nodul DOM selectat! Explorați mai mult panoul Instrumente și vă asigur că nu veți fi dezamăgiți!
Dacă trebuie să faceți o captură de ecran a oricărei pagini web de la distanță, consultați instrumentul tipstrick.ro Screenshot.
Concluzie
Browserul Chrome în sine este bogat în funcții, dar locul în care strălucește cu adevărat este oferta DevTools. După cum am văzut în acest articol, există destul de multe caracteristici bine ascunse – și altele care se ascund la vedere – despre care marea majoritate a utilizatorilor nu le știu. De ce sunt ascunse aceste caracteristici?
Presupun că unele dintre acestea sunt foarte experimentale (cum ar fi Modul Design), iar dezvoltatorii Chrome vor să îngreuneze utilizatorii obișnuiți să găsească aceste funcții. Pentru restul multor caracteristici, cred că este pur și simplu un caz de supraîncărcare a informațiilor: dacă există, să zicem, 120 de caracteristici, unele dintre ele având subfuncții și așa mai departe, este aproape imposibil să proiectați interfața de utilizare potrivită pentru astfel de funcții. un scenariu. De asemenea, în trecut, Google nu a făcut o treabă grozavă cu UX-ul produselor sale, așa că există asta. 🤷🏻♂️
Oricum, sper că ați găsit utile unele dintre aceste funcții. Dar, mai important, sper că acest articol v-a dat o idee despre ce se ascunde unde, astfel încât data viitoare când doriți să explorați sau să căutați ceva anume, să știți unde să mergeți pentru a „sapă adânc”. 😆