Ce este nou cu DevTools: Cross-Browser Edition

Instrumentele pentru dezvoltatori de browser continuă să evolueze, cu funcții noi și îmbunătățite adăugate tot timpul. Este greu de urmărit, mai ales când utilizați mai mult de un browser. Cu atâta ofertă, nu este surprinzător că ne simțim copleșiți și că folosim funcțiile pe care le cunoaștem deja în loc să ținem pasul cu noutățile.

Este păcat totuși, deoarece unele dintre ele ne pot face mult mai productivi.

Deci, scopul meu cu acest articol este de a crește gradul de conștientizare cu privire la unele dintre cele mai noi funcții din Chrome, Microsoft Edge, Firefox și Safari. Sperăm că vă va face să doriți să le încercați și poate vă va ajuta să vă simțiți mai confortabil data viitoare când trebuie să depanați o problemă specifică browserului.

Acestea fiind spuse, haideți să intrăm direct.

Chrome DevTools

Echipa Chrome DevTools a muncit din greu pentru a-și moderniza baza de cod (acum vechi de 13 ani). Au fost ocupați cu îmbunătățirea sistemului de compilare, migrarea la TypeScript, introducerea de noi componente Web, reconstruirea infrastructurii lor tematice și multe altele. Drept urmare, instrumentele sunt acum mai ușor de extins și schimbat.

Dar, pe lângă această muncă mai puțin orientată spre utilizator, echipa a livrat și o mulțime de funcții. Permiteți-mi să trec peste câteva dintre ele aici, legate de depanarea CSS.

Defilare-snapping

Scroll-snapping CSS oferă dezvoltatorilor web o modalitate de a controla poziția în care un container care poate fi derulat nu mai derulează. Este o caracteristică utilă, de exemplu, pentru liste lungi de fotografii în care doriți ca browserul să poziționeze fiecare fotografie în mod automat în containerul său care poate fi derulat.

Dacă doriți să aflați mai multe despre scroll-snapping, puteți citi această documentație MDN și aruncați o privire la demonstrațiile lui Adam Argyle aici.

Proprietățile cheie ale defilării sunt:

• scroll-snap-type , care spune browserului direcția în care are loc snapping și cum se întâmplă;
• scroll-snap-align , care îi spune browserului unde să se fixeze.

Chrome DevTools a introdus noi funcții care ajută la depanarea acestor proprietăți cheie:

• dacă un element definește scroll-snapping utilizând scroll-snap-type , panoul Elemente arată o insignă lângă el.

• Puteți face clic pe insigna de defilare-snap pentru a activa o nouă suprapunere. Când o faci, mai multe lucruri sunt evidențiate pe pagină:
  • containerul cu suluri,
  • articolele care se derulează în interiorul containerului,
  • poziția în care sunt aliniate elementele (marcată cu un punct albastru).

Această suprapunere face ușor de înțeles dacă și cum lucrurile se fixează după defilare. Acest lucru poate fi foarte util atunci când, de exemplu, articolele dvs. nu au un fundal și granițele dintre ele sunt greu de văzut.

În timp ce defilarea nu este o funcție nouă CSS, adoptarea este destul de scăzută (mai puțin de 4% conform chromestatus.com) și, deoarece specificația s-a schimbat, nu fiecare browser o acceptă în același mod.

Sper că această caracteristică DevTools îi va face pe oameni să vrea să se joace mai mult cu ea și, în cele din urmă, să o adopte pentru site-urile lor.

Interogări de containere

Dacă ați făcut orice fel de dezvoltare web în ultimii ani, probabil ați auzit de interogări de containere. A fost una dintre cele mai solicitate funcții CSS pentru cea mai lungă perioadă de timp și a fost o problemă foarte complexă de rezolvat pentru producătorii de browsere și autorii de specificații.

Dacă nu știți ce sunt interogările de container, aș sugera să parcurgeți mai întâi articolul de la Stephanie Eckles privind interogările de containere CSS.

În câteva cuvinte, acestea sunt o modalitate prin care dezvoltatorii pot defini aspectul și stilul elementelor în funcție de dimensiunea containerului lor. Această abilitate este un avantaj imens atunci când creați componente reutilizabile, deoarece le putem face să se adapteze la locul în care sunt utilizate (mai degrabă decât să se adapteze doar la dimensiunea ferestrei pentru care interogările media sunt bune).

Din fericire, lucrurile se mișcă în acest spațiu, iar Chromium acceptă acum interogări de containere, iar echipa Chrome DevTools a început să adauge instrumente care facilitează începerea acestora.

Interogările containerului nu sunt încă activate în mod prestabilit în Chromium (pentru a le activa, accesați chrome://flags și căutați „interogări container”) și poate dura ceva timp până când acestea sunt. În plus, munca DevTools pentru a le depana este încă la început. Dar unele caracteristici timpurii au aterizat deja.

• Când selectați un element în DevTools care are stiluri care provin dintr-o regulă @container at, atunci această regulă apare în bara laterală Stiluri a panoului Elemente. Acest lucru este similar cu modul în care sunt prezentate stilurile de interogări media în DevTools și va face să știți simplu de unde provine un anumit stil.

După cum arată captura de ecran de mai sus, bara laterală Stiluri afișează 2 reguli care se aplică elementului curent. Cel de jos se aplică elementului .media în orice moment și oferă stilul său implicit. Iar cel de sus este imbricat într-o interogare de container @container (max-width:300px) care are efect numai atunci când containerul este mai îngust de 300px.

• În plus, chiar deasupra @container at, panoul Stiluri afișează un link către elementul la care se rezolvă regula și, trecând cu mouse-ul peste el, afișează informații suplimentare despre dimensiunea sa. În acest fel, știți exact de ce s-a potrivit interogarea containerului.

Echipa Chrome DevTools lucrează activ la această funcție și vă puteți aștepta la mult mai mult în viitor.

Colaborarea Chromium

Înainte de a intra în funcțiile pe care le au alte browsere, să vorbim puțin despre Chromium. Chromium este un proiect open-source pe care sunt construite Chrome, Edge, Brave și alte browsere. Înseamnă că toate aceste browsere au acces la funcțiile Chromium.

Doi dintre cei mai activi contribuitori la acest proiect sunt Google și Microsoft și, când vine vorba de DevTools, au colaborat la câteva funcții interesante pe care aș dori să le parcurg acum.

Instrumente de depanare a aspectului CSS

În urmă cu câțiva ani, Firefox a inovat în acest spațiu și a livrat primii inspectori grid și flexbox. Browserele bazate pe Chromium le permit dezvoltatorilor web să depaneze cu ușurință grid și flexbox.

Acest proiect de colaborare a implicat ingineri, manageri de produs și designeri de la Microsoft și Google, care lucrează pentru un obiectiv comun (aflați mai multe despre proiect în sine în discursul meu BlinkOn).

Printre altele, DevTools are acum următoarele caracteristici de depanare a aspectului:

• Evidențiați mai multe machete de grilă și flexibile pe pagină și personalizați dacă doriți să vedeți nume sau numere ale liniilor de grilă, zonele grilei și așa mai departe.

• Editori flexibili și grid pentru a vă juca vizual cu diferitele proprietăți.

• Pictogramele de aliniere din autocompletarea CSS facilitează alegerea proprietăților și valorilor.

• Evidențiați pe trecerea cursorului pe proprietate pentru a înțelege la ce părți ale paginii se aplică o proprietate.

Puteți citi mai multe informații despre aceasta pe site-urile de documentare ale Microsoft și Google.

Localizare

Acesta a fost un alt proiect de colaborare care a implicat Microsoft și Google care, acum, face posibil ca toate DevTools bazate pe Chromium să fie traduse în alte limbi decât engleza.

Inițial, nu a existat niciodată un plan de a localiza DevTools, ceea ce înseamnă că acesta a fost un efort uriaș. A implicat trecerea peste întreaga bază de cod și localizarea șirurilor de interfață de utilizare.

Rezultatul a meritat totusi. Dacă engleza nu este prima ta limbă și te-ai simți mai confortabil folosind DevTools într-o altă limbă, mergi la Setări ( F1 ) și găsește meniul derulant pentru limbă.

Iată o captură de ecran cu cum arată în Chrome DevTools:

Și iată cum arată Edge în japoneză:

Edge DevTools

Microsoft a trecut la Chromium pentru a dezvolta Edge acum mai bine de 2 ani. Deși, la acea vreme, a provocat multe discuții în comunitatea web, de atunci nu s-au scris sau spus multe despre asta. Oamenii care lucrează pe Edge (inclusiv DevTools) au fost totuși ocupați, iar browserul are acum o mulțime de funcții unice.

Bazat pe proiectul open source Chromium înseamnă că Edge beneficiază de toate funcțiile și remedierea erorilor sale. Practic vorbind, echipa Edge ingerează modificările făcute în depozitul Chromium în propriul depozit.

Dar în ultimul an, echipa a început să creeze funcționalități specifice Edge pe baza nevoilor utilizatorilor Edge și a feedback-ului. Edge DevTools are acum o serie de caracteristici unice pe care le voi trece peste.

Instrumente de deschidere, închidere și mutare

Cu aproape 30 de panouri diferite, DevTools este un program cu adevărat complicat în orice browser. Dar, nu aveți niciodată nevoie de acces la toate instrumentele în același timp. De fapt, atunci când porniți DevTools pentru prima dată, sunt vizibile doar câteva panouri și puteți adăuga mai multe ulterior.

Pe de altă parte, însă, este greu să descoperi panourile care nu sunt afișate implicit, chiar dacă ți-ar putea fi cu adevărat utile.

Edge a adăugat 3 funcții mici, dar puternice, pentru a rezolva acest lucru:

• un buton de închidere pe file pentru a închide instrumentele de care nu mai aveți nevoie,
• un buton + (plus) la sfârșitul barei de file pentru a deschide orice instrument,
• o opțiune de meniu contextual pentru a muta instrumentele.

Următorul GIF arată cum se pot face instrumentele de închidere și deschidere atât în ​​zona principală, cât și în zona sertarului în Edge.

De asemenea, puteți muta instrumentele între zona principală și zona sertarului:

• făcând clic dreapta pe o filă din partea de sus arată un element „Mutare în jos” și
• Făcând clic dreapta pe o filă din sertar, apare un element „Mutare în sus”.

Obținerea de ajutor contextual cu DevTools Tooltips

Este greu pentru începători și dezvoltatori experimentați să știe totul despre DevTools. După cum am menționat mai devreme, există atât de multe panouri încât este puțin probabil să le cunoașteți pe toate.

Pentru a rezolva acest lucru, Edge a adăugat o modalitate de a trece direct de la instrumente la documentația lor de pe site-ul Microsoft.

Această nouă caracteristică Sfaturi instrumente funcționează ca o suprapunere comutabilă care acoperă instrumentele. Când este activat, panourile sunt evidențiate și este oferit ajutor contextual pentru fiecare dintre ele, cu link-uri către documentație.

Puteți porni sfaturile instrumente în 3 moduri diferite:

• folosind comanda rapidă de la tastatură Ctrl + Shift + H pe Windows/Linux ( Cmd + Shift + H pe Mac);
• accesând meniul principal ( ... ), apoi accesând Ajutor și selectând „Toggle the DevTools Tooltips”;
• utilizând meniul de comandă și tastând „Tooltips”.

Personalizarea culorilor

În mediile de editare a codului, dezvoltatorilor le place să-și personalizeze temele de culoare pentru a face codul mai ușor de citit și mai plăcut de privit. Deoarece dezvoltatorii web petrec o cantitate considerabilă de timp și în DevTools, este logic ca acesta să aibă și culori personalizabile.

Edge tocmai a adăugat o serie de teme noi la DevTools, pe lângă temele întunecate și luminoase deja disponibile. Au fost adăugate un total de 9 teme noi. Acestea provin din VS Code și, prin urmare, vor fi familiare persoanelor care folosesc acest editor.

Puteți selecta tema pe care doriți să o utilizați accesând setările (folosind F1 sau pictograma roată din colțul din dreapta sus) sau utilizând meniul de comandă și tastând theme .

Firefox DevTools

Similar cu echipa Chrome DevTools, cei care lucrează la Firefox DevTools au fost ocupați cu o reîmprospătare mare a arhitecturii care vizează modernizarea bazei de cod. În plus, echipa lor este destul de mică în aceste zile, deoarece Mozilla a trebuit să se reorienteze în ultima vreme. Dar, chiar dacă asta înseamnă că au avut mai puțin timp pentru adăugarea de noi funcții, au reușit totuși să lanseze câteva cu adevărat interesante pe care le voi trece acum.

Depanarea barelor de defilare nedorite

V-ați întrebat vreodată: „de unde vine această bară de derulare?” Știu că am, iar acum Firefox are un instrument pentru a depana tocmai această problemă.

În panoul Inspector, toate elementele care defilează au lângă ele o insignă de scroll , care este deja utilă atunci când ai de-a face cu arbori DOM profund imbricați. Pe deasupra, puteți face clic pe această insignă pentru a dezvălui elementul (sau elementele) care au determinat apariția barei de derulare.

Puteți găsi mai multe documente despre el aici.

Vizualizarea ordinii de tabulare

Navigarea într-o pagină web cu tastatura necesită utilizarea tastei tab pentru a vă deplasa printre elementele focalizabile unul câte unul. Ordinea în care elementele focalizate sunt concentrate în timpul utilizării tab este un aspect important al accesibilității site-ului dvs., iar o ordine incorectă poate crea confuzie pentru utilizatori. Este deosebit de important să acordați atenție acestui lucru, deoarece tehnicile moderne de aspect CSS permit dezvoltatorilor web să rearanjeze elementele dintr-o pagină foarte ușor.

Firefox are un panou util Inspector de accesibilitate care oferă informații despre arborele de accesibilitate, găsește și raportează automat diverse probleme de accesibilitate și vă permite să simulați diferite deficiențe de vedere a culorilor.

Pe lângă aceste caracteristici, panoul oferă acum o nouă suprapunere a paginii care afișează ordinea de filare pentru elementele focalizabile.

Pentru a-l activa, utilizați caseta de selectare „Afișare ordine de filare” din bara de instrumente.

Puteți găsi mai multe documente despre el aici.

Un nou instrument de performanță

Nu multe zone de dezvoltare web depind de instrumente la fel de mult ca optimizarea performanței. În acest domeniu, panoul de performanță al Chrome DevTools este cel mai bun din clasă.

În ultimii câțiva ani, inginerii Firefox s-au concentrat pe îmbunătățirea performanței browserului în sine și, pentru a-i ajuta să facă acest lucru, au creat un instrument de profilare a performanței. Instrumentul a fost creat inițial pentru a optimiza codul nativ al motorului, dar a acceptat și analiza performanței JavaScript chiar de la început.

Astăzi, acest nou instrument de performanță înlocuiește vechiul panou de performanță Firefox DevTools în versiunile de pre-lansare (Nightly și Developer Edition). Învârtiți-l când aveți ocazia.

Printre altele, noul profiler Firefox acceptă partajarea profilurilor cu alții, astfel încât acestea să vă ajute să îmbunătățiți performanța cazului dvs. de utilizare înregistrat.

Puteți citi documentația despre acesta aici și puteți afla mai multe despre proiect în depozitul lor GitHub.

Safari Web Inspector

Nu în ultimul rând, să trecem peste câteva dintre caracteristicile recente ale Safari.

Mica echipă de la Apple a fost foarte ocupată cu o gamă largă de îmbunătățiri și remedieri în jurul instrumentelor. Aflarea mai multe despre Safari Web Inspector vă poate ajuta să fiți mai productiv atunci când vă depanați site-urile pe dispozitive iOS sau tvOS. În plus, are o mulțime de caracteristici pe care alte DevTools nu le au și despre care nu mulți oameni le știu.

Depanare grilă CSS

Cu Firefox, Chrome și Edge (și toate browserele bazate pe Chromium) având instrumente dedicate pentru vizualizarea și depanarea grilelor CSS, Safari a fost ultimul browser major care nu a avut acest lucru. Ei bine, acum are!

În esență, Safari are acum aceleași caracteristici ca și instrumentele DevTools ale altor browsere în acest domeniu. Acest lucru este grozav, deoarece înseamnă că este ușor să treci de la un browser la altul și să fii în continuare productiv.

• Insignele de grilă sunt afișate în panoul Elemente pentru a găsi rapid grile.
• Făcând clic pe insignă, se comută suprapunerea de vizualizare a paginii.
• Un nou panou Layout este acum afișat în bara laterală. Vă permite să configurați suprapunerea grilei, să vedeți lista tuturor grilelor de pe pagină și să comutați suprapunerea pentru ele.

Totuși, ceea ce este interesant despre implementarea Safari este că au reușit cu adevărat aspectul de performanță al instrumentului. Puteți activa mai multe suprapuneri diferite simultan și puteți derula în jurul paginii fără ca aceasta să cauzeze deloc probleme de performanță.

Un alt lucru interesant este că Safari a introdus un panou Elemente cu 3 panouri, la fel ca Firefox, care vă permite să vedeți DOM-ul, regulile CSS pentru elementul selectat și panoul Layout, toate odată.

Aflați mai multe despre CSS Grid Inspector pe această postare de blog WebKit.

O serie de îmbunătățiri ale depanatorului

Safari avea un panou separat de Resurse și Depanator. Le-au îmbinat într-un singur panou Surse, care face mai ușor să găsiți tot ce aveți nevoie atunci când vă depanați codul. În plus, acest lucru face ca instrumentul să fie mai consistent cu Chromium, cu care mulți oameni sunt obișnuiți.

Consecvența pentru sarcinile comune este importantă într-o lume cu browsere încrucișate. Dezvoltatorii web trebuie deja să testeze pe mai multe browsere, așa că dacă trebuie să învețe o paradigmă complet nouă atunci când folosesc DevTools ale altui browser, poate face lucrurile mai dificile decât ar trebui să fie.

Dar Safari s-a concentrat recent și pe adăugarea de caracteristici inovatoare la depanatorul său, pe care alte DevTools nu le au.

Script bootstrap:
Safari vă permite să scrieți cod JavaScript care este garantat să ruleze mai întâi înainte de oricare dintre scripturile de pe pagină. Acest lucru este foarte util pentru a instrumenta funcțiile încorporate pentru adăugarea de instrucțiuni de debugger sau înregistrarea în jurnal, de exemplu.

Configurații noi puncte de întrerupere:
Toate browserele acceptă mai multe tipuri de puncte de întrerupere, cum ar fi puncte de întrerupere condiționate, puncte de întrerupere DOM, puncte de întrerupere pentru evenimente și multe altele.

Safari și-a îmbunătățit recent întreaga suită de tipuri de puncte de întrerupere, oferindu-le tuturor o modalitate de a le configura extensiv. Cu această nouă caracteristică punct de întrerupere, puteți decide:

• dacă doriți ca un punct de întrerupere să ajungă numai atunci când o anumită condiție este adevărată,
• dacă doriți ca punctul de întrerupere să întrerupă execuția sau doar să execute un cod,
• sau chiar redați un bip audio, astfel încât să știți că a fost executată o linie de cod.

Funcțiile consolei queryInstances și queryHolders :
Aceste două funcții sunt cu adevărat utile atunci când site-ul dvs. începe să folosească o mulțime de obiecte JavaScript. În unele situații, poate deveni dificil să urmăriți dependențele dintre aceste obiecte și pot începe să apară și scurgeri de memorie.

Safari are un instrument de memorie care vă poate ajuta la rezolvarea acestor probleme, permițându-vă să explorați instantanee ale memoriei. Dar uneori știți deja care clasă sau obiect provoacă problema și doriți să aflați ce instanțe există sau ce se referă la el.

Dacă Animal este o clasă JavaScript în aplicația dvs., atunci queryInstances(Animal) va returna o matrice a tuturor instanțelor sale.

Dacă foo este un obiect în aplicația dvs., atunci queryHolders(foo) va returna o matrice cu toate celelalte obiecte care au referințe la foo .

Gânduri de închidere

Sper că aceste caracteristici vă vor fi utile. Vă pot recomanda doar utilizarea mai multor browsere și familiarizarea cu instrumentele lor DevTools. A fi mai familiarizat cu alte DevTools se poate dovedi util atunci când trebuie să depanați o problemă într-un browser pe care nu îl utilizați în mod regulat.

Să știți că toate companiile care produc browsere au echipe care lucrează activ la DevTools. Sunt investiți în a le face mai bune, mai puțin cu probleme și mai puternice. Aceste echipe depind de feedback-ul dumneavoastră pentru a construi lucrurile potrivite. Fără a auzi despre problemele cu care vă confruntați sau despre ce caracteristici vă lipsesc, le este mai greu să ia deciziile corecte cu privire la ce să construiască.

Raportarea erorilor către o echipă DevTools nu vă va ajuta doar când vine remedierea, ci poate ajuta și pe mulți alții care s-au confruntat cu aceeași problemă.

Merită să știți că echipele DevTools de la Microsoft, Mozilla, Apple și Google sunt de obicei destul de mici și primesc o mulțime de feedback, așa că raportarea unei probleme nu înseamnă că va fi rezolvată rapid, dar ajută, iar echipele respective ascultă .

Iată câteva modalități prin care puteți raporta erori, puteți pune întrebări sau solicita funcții:

• Firefox DevTools
  • Firefox folosește Bugzilla ca urmăritor public de erori și oricine este binevenit să raporteze erori sau să ceară noi funcții creând o nouă intrare acolo. Tot ce aveți nevoie este un cont GitHub pentru a vă conecta.
  • Luarea în contact cu echipa se poate face fie pe Twitter utilizând contul @FirefoxDevTools, fie conectându-vă la chat-ul Mozilla (găsiți documentația despre chat aici).
• Safari Web Inspector
  • Safari folosește, de asemenea, urmărirea publică a erorilor pentru erorile lor WebKit. Iată documentația despre cum să cauți erori și să raportezi unele noi.
  • De asemenea, puteți intra în contact cu echipa pe Twitter cu @webkit.
  • În cele din urmă, puteți semnala erori despre Safari și Safari Web Inspector folosind asistentul de feedback.
• Edge DevTools
  • Cel mai simplu mod de a raporta o problemă sau de a solicita o funcție este prin utilizarea butonului de feedback din DevTools (figură mică din colțul din dreapta sus al instrumentelor).
  • Punerea întrebărilor echipei funcționează cel mai bine pe Twitter, menționând contul @EdgeDevTools.
• Chrome DevTools
  • Echipa ascultă feedback pe lista de corespondență devtools-dev, precum și pe twitter la @ChromeDevTools.
• Crom
  • Deoarece Chromium este proiectul open-source care alimentează Google Chrome și Microsoft Edge (și altele), puteți raporta, de asemenea, probleme cu instrumentul de urmărire a erorilor Chromium.

Cu asta, multumesc pentru lectura!