Chrome DevTools: 10 sfaturi și trucuri utile

Lucrez cu Chrome de peste un deceniu, cu mult înainte ca Mozilla să reușească să-și remedieze problemele legate de pierderile de memorie. Și, în calitate de persoană care face zilnic dezvoltarea front-end, am fost și un utilizator pasionat al Chrome DevTools. Fie că este vorba de a face cea mai simplă formă de inspectare CSS sau de a face teste de performanță, DevTools este o parte indispensabilă a rutinei mele ca dezvoltator.

Și de-a lungul anilor am învățat, dar și am adunat diverse sfaturi și trucuri, dintre care unele nu sunt tocmai clare. Dacă doriți o reîmprospătare cu tot ceea ce poate face DevTools, vă recomand să consultați documentația oficială. Dar, mai important, pagina Ce este nou în DevTools, deoarece aici veți obține toate funcțiile și instrumentele noi dintr-o privire.

Cea mai bună modalitate de a răsfoi această resursă este fie să CTRL+F și să cauți „cuvinte cheie” care te interesează, fie poți, de asemenea, să comuți în Cuprinsul de mai sus și apoi să sari direct la un exemplu specific. Sunt sigur că această pagină va crește în timp pe măsură ce învăț lucruri noi, așa că nu ezitați să marcați această pagină pentru referințe viitoare. Să începem lucrurile cu ceva practic, dar foarte util.

Blocați resurse pentru a reda site-ul fără CSS/JavaScript

Luăm JavaScript de la sine înțeles, dar există o mulțime de persoane care blochează JS în browserul lor, majoritatea facând din motive legate de accesibilitate, confidențialitate și securitate.

Și trebuie să luați în considerare, de asemenea, cazurile în care JS/CSS ar putea să nu fie accesibil din cauza problemelor de rețea sau browserul nu reușește să preia o anumită resursă. Deci, cum arată site-ul dvs. când un anumit fișier/biblioteca este blocat?

• Deschideți DevTools și accesați fila Rețea .
• Reîncărcați pagina pe care vă aflați pentru a prelua toate resursele.
• Faceți clic pe orice resursă și selectați Blocați adresa URL a resursei .
• Reîmprospătați pagina pentru a vedea rezultatul.

Cred că acest lucru funcționează și în cadrul instrumentelor de dezvoltare Firefox și Edge.

Modificări CSS dintr-o privire (cu Export)

V-ați lăsat vreodată purtat de schimbarea CSS din DevTools doar pentru a realiza că acum trebuie să reveniți la 10 proprietăți diferite pentru a salva acele modificări? Da. Am fost acolo, am făcut asta.

Din fericire, există o modalitate mai bună de a aborda această problemă.

• Accesați Personalizați și controlați DevTools -> Mai multe instrumente .
• Selectați Modificări .
• O filă permanentă va apărea în interiorul DevTools, prezentând modificările de cod pe care le-ați făcut.

Panoul Modificări poate fi accesat și prin comenzile rapide CTRL/CMD+Shift+P și apoi tastând Modificări în consola Run. În partea de jos a interfeței Modificări, aveți un buton Copiere , care poate fi folosit pentru a exporta direct toate modificările pe care le-ați făcut în acea sesiune.

Schimbați structura aspectului Grid și Flexbox

Am scris recent un articol despre unele dintre cele mai bune generatoare de aspect CSS, așa că următorul sfat merge mână în mână cu acel articol. Mai întâi, inspectați orice container care este suportat de Grid sau Flexbox și apoi căutați proprietatea alocată care are display: flex; sau vice versa.

Lângă proprietate, veți vedea o pictogramă mică pe care se poate face clic (editorul) – făcând clic pe aceasta se va deschide un panou din care puteți utiliza proprietățile de poziționare așa cum sunt specificate în Grid sau Flexbox.

Această caracteristică este utilă atunci când doriți să testați o nouă aliniere a aspectului în timp real. Există, de asemenea, un lucru numit CSS Grid Inspector, pentru care echipa de dezvoltatori Chrome a făcut o scriere.

Depanarea accesibilității cu instrumente încorporate

Accesibilitatea este foarte mult un subiect fierbinte în cercurile dezvoltatorilor front-end. Atât de mult încât majoritatea bibliotecilor de componente și kituri de interfață de utilizator sunt prefabricate cu cele mai bune practici de accesibilitate. Platformele CMS precum WordPress au îmbrățișat, de asemenea, accesibilitatea și au început să implementeze funcții care acordă prioritate inclusivității designului. Și DevTools nu face excepție de la regulă.

» Activarea arborelui de accesibilitate în Chrome DevTools

După ce bifați caseta de validare, va trebui să vă reîncărcați DevTools. În această etapă, veți avea o pictogramă de accesibilitate în colțul din dreapta sus în fereastra Elemente. Făcând clic pe această pictogramă, se va dezvălui întreaga structură a site-ului într-o vizualizare arborescentă DOM. Apoi puteți inspecta secțiunile și elementele individuale ale site-ului și puteți vedea dacă le-a fost atribuită o etichetă ARIA.

» Vizualizator de comandă sursă

Pe același panou ca în imaginea GIF de mai sus există o altă casetă de selectare. Și acea casetă de selectare se numește Afișează ordinea sursei . Ceea ce face aceasta – odată activată – este că vă permite să vedeți ordinea în care apar elementele pentru vizitatorii care ar putea vizita paginile dvs. folosind instrumente de asistență.

Odată activat, puteți selecta orice zonă a paginii dvs. și puteți vedea ordinea în care vor apărea elementele.

Acest lucru este util în special atunci când lucrați cu Grid sau Flexbox, ambele având proprietăți pentru rearanjarea ordinii de afișare a articolelor. De exemplu order: 1;

» Sugestii de culori pentru text cu contrast redus

Contrastul culorilor este una dintre problemele majore de accesibilitate, chiar și pentru persoanele care nu suferă neapărat de deficiențe de vedere grave. Am avut cazuri în care vederea începea să se înrăutățească și aveam nevoie să-mi iau o nouă rețetă pentru ochelari, iar ceea ce mi-a dat afară au fost culorile cu contrast scăzut/înalt, care îmi obosesc ochii. Alb pe roșu, verde pe albastru etc.

Echipa web.dev a făcut o întreagă scriere despre cum funcționează următoarea metodă.

Această metodă funcționează pentru orice element de pe pagină. Chiar dacă credeți că contrastul este bine, algoritmul raportului de contrast poate face sugestii subtile pentru a îmbunătăți vizibilitatea generală a contrastului.

Formatați JavaScript/CSS redus în cod care poate fi citit

Este nevoie de doar câteva secunde pentru a importa codul miniat în VS Code și apoi aplicați Prettier, dar de ce să vă deranjați când puteți formata (deminifica) direct din consola DevTools.

Pentru a face acest lucru:

• Deschideți panoul Surse din interiorul DevTools.
• Deschideți orice fișier care a fost redus.
• Faceți clic pe pictograma { } din partea de jos a consolei.
• Codul este acum formatat.

Editarea (text) și eliminarea elementelor cu designMode

designMode face parte din specificația Web API și vă permite să editați direct elemente de pe pagină, deși cu unele limitări. De exemplu, doar textul poate fi editat, dar orice alt element poate fi eliminat complet. Rețineți că aceasta nu este o caracteristică „oficială”, dar este totuși utilă atunci când lucrați cu lucruri precum funcții matematice CSS și alte proprietăți specifice textului.

Pentru a încerca singur:

• Deschideți Consola DevTools.
• Tastați document.designMode="on" și trimiteți.
• Reveniți la pagină și începeți editarea.

Proprietatea off este aplicabilă și atunci când doriți să dezactivați designMode. Și în cazul în care nu ați observat în GIF, acest lucru funcționează grozav și pentru verificarea ortografică a conținutului dvs. de pe pagină.

Capturați capturi de ecran din Emulator de dispozitiv

Aceasta este o caracteristică care mi-a ocolit cel mai mult timp. Fluxul meu de lucru obișnuit pentru realizarea capturii de ecran este fie extensia Snip, fie Awesome Screenshot. După cum se dovedește, puteți captura capturi de ecran pentru mobil/tabletă și alte rezoluții direct din Emulator de dispozitiv.

Dar, acesta nu este singurul motiv pentru care această caracteristică este utilă. De fapt, puteți face capturi de ecran, inclusiv cadrul dispozitivului . Înainte de a intra în mai multe detalii, iată un exemplu:

Deci, cum activezi cadrul dispozitivului pentru capturi de ecran pentru mobil/tabletă?

• Deschideți DevTools.
• Faceți clic pe pictograma Comutare bară de instrumente dispozitiv .
• Navigați la pictograma meniului din dreapta sus (trei puncte).
• Selectați Afișare cadrul dispozitivului .

Iată o previzualizare vizuală:

Problema este că, chiar dacă faceți clic pe butonul, cadrul dispozitivului nu se afișează. Și asta pentru că doar o mână de dispozitive au cadrul afișat. De fapt, va trebui să activați manual aceste dispozitive din meniul disponibil în Dimensiuni -> Editare . Aceste tipuri de dispozitive au un cadru:

• iPhone 5/SE
• iPhone 6/7/8 și Plus
• Nexus 5 și 5x
• Nexus 6P
• iPad

Mulțumim utilizatorului StackOverflow RoCk RoCk pentru clarificare.

Selectați culorile din afara browserului

Aceasta este una dintre cele mai recente caracteristici adăugate la DevTools. Presupunând că sunteți deja familiarizat cu Selectorul de culori – acum este posibil să alegeți culori care nu se află în browser. Cu alte cuvinte, puteți selecta culorile direct de pe desktop, fie că este o imagine sau o anumită pictogramă.

Acum poți lua și mai repede culorile din fotografiile tale preferate.

Utilizați copy() ca pseudo-răzuitor

Funcția copy() poate fi folosită pentru a prelua în masă obiectele găsite pe pagină. Pentru mine, acesta este cel mai rapid mod de a răzui rapid toate adresele URL găsite pe o pagină.

În Consolă tastați:

 copy($$('a').map(a => a.href).join('\n'))

Iar rezultatul este:

Funcția JavaScript alternativă ar arăta astfel:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

Cum se schimbă tema de culoare Chrome DevTools

Mă întreb câți dezvoltatori și-au schimbat tema browserului Chrome la întunecată, dar nu și-au dat seama că trebuie să o faci separat pentru DevTools. Sunt sigur că au fost câțiva.

Cu DevTools deschis, puteți apăsa F1 pentru a deschide setările. Aceasta va deschide panoul de preferințe implicit, unde puteți alege dintre tema Light sau Dark, sau puteți utiliza Preferințe de sistem.

O privire în interiorul unei centrale de dezvoltare

Aceasta nu este în niciun caz o listă exhaustivă a tot ceea ce poate face DevTools. Și cu timpul sper să adaug și mai multe trucuri interesante pe care le întâlnesc. Sper că cel puțin unul sau două dintre aceste sfaturi au fost suficient de interesante pentru a le adăuga în notele tale. Și dacă nu, verificați mai târziu!