Sfaturi și comenzi rapide de depanare DevTools (Chrome, Firefox, Edge)

Dintre toate instrumentele disponibile în aceste zile, DevTools este probabil unul dintre cele mai avansate. De-a lungul anilor, a devenit un instrument pentru depanare, profilare, auditare și chiar prototipare - toate trăind în aceeași interfață și întotdeauna doar la o scurtătură de la tastatură. Cu toate acestea, DevTools are o mulțime de pietre prețioase obscure și comori nedescoperite, care trăiesc la marginile îndepărtate ale filelor ascunse și ale setărilor experimentale. Să reparăm asta.

În acest articol, să ne aprofundăm în unele dintre funcțiile utile și obscure din DevTools . Vom analiza toate browserele moderne (Chrome, Firefox, Edge, Safari) și instrumentele utile pe care ni le oferă nouă, dezvoltatorilor web. Ne vom concentra pe cele pe care le folosim frecvent pe SmashingMag și pe unele dintre tehnicile și strategiile mici care ne ajută să remediam erori deranjante și să scriem cod mai bun.

Crearea profilurilor de browser

Când vine vorba de profilarea unui site web pentru performanță sau de urmărire a unei anumite probleme de accesibilitate, de ceva timp am creat profiluri separate de browser pentru fiecare sarcină. De obicei lucrăm cu cel puțin 5 profiluri de utilizator, fiecare cu propriile extensii, marcaje, marcaje și funcții activate sau dezactivate. Să le aruncăm o privire mai atentă.

• Profil de accesibilitate
  Un profil de browser curat, care include diverse instrumente pentru verificarea accesibilității, de exemplu Accessibility Insights, ax și a11y.css, împreună cu alte câteva linters de accesibilitate și simulator de viziune a culorilor.

• Profil de depanare
  Un profil cu câteva setări experimentale pentru profilare activate, precum și o opțiune de deschidere automată a DevTools pentru fiecare fereastră nouă, împreună cu un CSS de diagnosticare personalizat pentru auditare și profilare rapidă.

• Profil de performanță
  Un profil curat, fără extensii, cu câteva marcaje speciale pentru auditare cu Lighthouse, RequestMap, un CSS de diagnosticare a performanței și câteva link-uri legate de performanță de reținut (de exemplu, prioritatea resurselor la încărcare). Merge întotdeauna bine cu 4 × throttling CPU și throttling rețea (Slow 3G).

• Client fericit
  Pe baza datelor pe care le avem din analizele noastre, acesta este un profil suficient de apropiat de cel pe care îl vor avea mulți dintre cititorii noștri (oameni minunați ca tine). Acesta va conține câteva extensii populare, extensii comune de dezvoltare web, blocare de anunțuri, gestionare a filelor, Google Docs offline, LastPass, VPN, Browserstack, Grammarly etc. Fără limitare în uz.

• Client nemultumit
  Un profil pentru un cititor cu o conexiune lentă, accelerată (3G lentă), memorie scăzută, procesor slab, cu cele mai populare 10 extensii de browser activate. De obicei, folosim acest profil pentru a testa cele mai grele pagini ale noastre pentru a experimenta cele mai proaste experiențe posibile ale clienților.

În funcție de sarcina la îndemână, putem sări la unul dintre profilurile dedicate. Comoditatea reală provine din aranjamentul simplu conform căruia fiecare dintre profiluri are extensii specifice , bookmarkleturi și setări ale browserului, toate setate și gata de funcționare. Deci, dacă este necesar, putem trece direct la depanarea performanței sau la auditarea accesibilității fără nicio bătaie de cap pentru a căuta extensiile potrivite.

Probabil este de la sine înțeles că facem tot posibilul pentru a menține fiecare profil curat și neaglomerat - asta este valabil atât pentru extensiile de browser, cât și pentru marcajele browserului, cookie-urile și memoria cache.

Comenzi rapide globale de la tastatură

Desigur, având în vedere cantitatea mare de funcții disponibile în DevTools, nu este foarte surprinzător că unele dintre ele sunt destul de greu de găsit între file, panouri, pictograme roată și puncte. Cu toate acestea, nu este nevoie să memorați locul unde sunt plasate. În schimb, merită să vă amintiți doar câteva comenzi rapide de la tastatură globale utile - vă vor ajuta să treceți mai rapid la anumite funcții.

• Deschiderea meniului de comandă (Chrome, Edge)
  Fiind probabil una dintre cele mai cunoscute, această comandă are de fapt două caracteristici. Cmd/Ctrl + Shift + P deschide o căutare rapidă de completare automată pentru panouri, sertare și toate funcțiile din DevTools. Cmd/Ctrl + P deschide un sertar cu toate fișierele disponibile utilizate în pagina curentă. Dacă trebuie să accesați rapid orice funcție DevTools, meniul de comandă este o modalitate rapidă de a ajunge acolo - pentru sertare generale, meniuri ascunse sau caracteristici specifice.

• Deschiderea setărilor DevTools (toate browserele moderne)
  De obicei, există o mulțime de instrumente și funcții obscure ascunse în panoul „Setări” - de la dispozitive emulate la profiluri și experimente de accelerare a rețelei. În Chrome, puteți face clic pe pictograma roată din colțul din dreapta sus sau puteți utiliza Shift + ? . În Firefox, puteți sări la Setări cu F1 .

• Comutați modul Inspectare element (toate browserele moderne)
  În loc să faceți clic pe o pictogramă Inspect și apoi să vă concentrați pe elementul pe care doriți să îl depanați, puteți comuta în modul Inspectare element cu Cmd/Ctrl + Shift + C .

• Comutați modul HTML (toate browserele moderne) În timp ce inspectați un element, s-ar putea să doriți să îi schimbați atributele, de exemplu, clase sau stări. În loc să faceți clic dreapta pe element și să adăugați valori unul câte unul, puteți comuta modul HTML pe elementul selectat curent cu Fn + F2 (sau doar F2 pe Windows).

• Comutați modul Dispozitiv (toate browserele moderne) Pentru a trece în modul bară de instrumente a dispozitivului, de exemplu pentru a previzualiza cum arată macheta pe ecrane înguste sau pentru a declanșa un depanator de interogări media, puteți utiliza Cmd/Ctrl + Shift + M în Chrome, și Cmd/Ctrl + Opt/Alt + M în Firefox.

Există, de asemenea, o mulțime de alte comenzi rapide utile de la tastatură, de exemplu, pentru întreruperea și reluarea execuției scriptului și pentru a merge la paranteza potrivită (pentru interogări media lungi și funcții JS) în editorul sursă.

Puteți găsi o prezentare completă a tuturor comenzilor rapide de la tastatură pe Comenzile rapide de la tastatură Chrome DevTools și Comenzile rapide de la tastatură Firefox DevTools - de cele mai multe ori, acestea sunt destul de consistente în browserele moderne.

Activați Setările experimentale

DevTools vine împreună cu un set de setări experimentale care nu sunt tocmai recomandate pentru un public larg, dar pot fi într-adevăr foarte utile pentru depanare. Totuși, un cuvânt de precauție: uneori, aceste setări pot îngheța Chrome sau îl pot face destul de lent (de aceea sunt experimentale în primul rând).

Cu toate acestea, cu profiluri separate , puteți activa în siguranță unele dintre aceste setări pentru fiecare profil și apoi să le dezactivați dacă este necesar. Așadar, în timp ce ne folosim profilurile obișnuite fără experimente activate pentru navigarea obișnuită, în modul de depanare alegem întotdeauna mai întâi un profil dedicat, pentru a elimina acele erori puțin mai repede.

Cu DevTools deschis în Chrome, săriți la „Setări” ( Shift + ? cu DevTools deschis) și găsiți „Experimente” în bara laterală. Evident, există o mulțime de setări experimentale disponibile în fiecare DevTools, dar cele menționate mai jos sunt doar cele pe care le considerăm destul de utile în munca noastră.

În toate elementele prezentate acolo, merită să activați „Imprimare automată frumoasă în panoul sursă” , ceea ce ar înfrumuseța stilurile și scripturile comprimate în mod implicit atunci când vizualizați sursa. De asemenea, puteți activa depanarea CSS Grid și depanarea Flexbox pentru a rezolva problemele de aspect. Există, de asemenea, o diferență de sursă și un vizualizator de ordine de sursă care pot fi utile.

Iar pentru auditurile de performanță, puteți marca „Cronologie: inițiatori de evenimente” și „Cronologie: urmărirea invalidării” care se vor afișa în panoul Performanță, evidențiind scripturile care au provocat operațiuni costisitoare, cum ar fi Sarcinile lungi și Recalculările de stil. În plus, în Edge, puteți activa straturile compuse în vizualizarea 3D.

Pentru un anumit profil, puteți accesa mai multe funcții ascunse, accesând chrome://flags/ în profilul browser ales. de exemplu, acolo puteți activa cele mai recente și experimentale funcții JavaScript , funcțiile experimentale ale platformei web sau activați sugestii de încărcare a resurselor pentru a oferi o previzualizare a conexiunilor lente de rețea.

În Firefox, săriți la Setări cu F1 . În partea de jos a stației de andocare, puteți solicita browserului să afișeze stilurile browserului, să activeze/dezactiva completarea automată CSS, să schimbe preferințele editorului, să comute intermitent vopsea, să ajusteze comportamentul capturii de ecran și să activeze hărțile sursă (nu sunt activate în mod implicit). În Safari, puteți găsi Setări experimentale în „Dezvoltare → Setări experimentale”.

Comutarea între statele de andocare (Chrome, Edge, Firefox)

Desigur, vizualizarea panoului din DevTools nu este o revelație deosebit de mare. În fila „Stiluri” din andocare, stilurile apar de sus în jos, ordonate în funcție de specificul lor CSS. Cu toate acestea, un lucru mic pe care l-am trecut cu vederea mult de ani de zile este un mic buton de comutare :hov plasat chiar deasupra stilurilor.

Vă permite să forțați o stare de element ( :active , :focus , :focus-within , :hover , :visited și :focus-visible , și cel mai recent :target ) asupra unui anumit element interactiv - de exemplu, pentru a aplica :focus și :active stări :active pe butoanele pentru verificări de accesibilitate.

În Firefox, puteți schimba o pseudo-clasă pentru un element DOM pe măsură ce îl inspectați - caracteristica este disponibilă cu un clic dreapta pe un nod DOM.

Totuși, un lucru care vă împiedică întotdeauna este poziția dock-ului , care uneori funcționează mai bine în partea dreaptă și, uneori, în partea de jos - în funcție de locul în care bug-ul v-a invadat arborele DOM.

Pentru a comuta rapid între stările de andocare , puteți folosi Cmd/Ctrl + Shift + D. O captură de reținut este că comanda rapidă va dezaoca DevTools într-o fereastră separată numai dacă DevTools a fost în poziția implicită (ancoată la dreapta). În caz contrar, comanda rapidă va comuta doar între poziția implicită și cea în care ați schimbat-o.

Vizualizare cu panouri triple (Firefox)

Deși s-ar putea să fim obișnuiți cu o vizualizare cu panouri duble, Firefox oferă implicit o vizualizare utilă cu trei panouri - arată ușor diferit în diferite secțiuni. În vizualizarea Inspector, alături de HTML și stiluri, puteți plasa instrumentul de depanare a aspectului, puteți afișa stiluri de computer sau urmări modificările CSS - este foarte util să aveți acces rapid la toate aceste informații fără a fi nevoie să comutați între file.

Ori de câte ori editați stiluri în Firefox, DevTools evidențiază interogările media utilizate în întreaga pagină , cu salturi rapide la secțiunile CSS în care este definit un comportament punct de întrerupere. Toate acestea sunt afișate chiar lângă codul sursă, deci nu este nevoie să căutați un anumit punct de întrerupere. (Ca să nu mai vorbim de stiluri destul de formatate în mod implicit - asta este la îndemână!).

O vizualizare similară este disponibilă și în Chrome și Edge, dar este disponibilă doar în panoul „Elemente” (pictograma barei laterale în colțul din dreapta sus) și până acum arată doar stiluri calculate (de aceea se numește „Stiluri calculate Bara laterală”).

Filtrarea stilurilor după proprietate (Firefox)

În general, Firefox DevTools sunt puternic subestimate. O altă caracteristică remarcabilă pe care o oferă Firefox este o opțiune de filtrare a tuturor stilurilor după o anumită proprietate (indicată cu o pictogramă de filtru). De exemplu, dacă observați că unele stiluri sunt suprascrise de altele împrăștiate undeva pe foaia de stil, puteți ascunde toate definițiile care nu afectează acea proprietate particulară cu un filtru rapid și puteți vedea unde se întâmplă exact suprascrierile.

De asemenea, pe o anumită pagină, puteți evidenția toate instanțele care se potrivesc cu un anumit selector. De exemplu, dacă observați o eroare cu redarea imaginilor de profil în secțiunile întunecate și luminoase ale paginii, puteți evidenția toate instanțele unei anumite clase fără a le căuta manual sau a adăuga stiluri suplimentare pentru a le evidenția. Este suficient să localizați selectorul în panoul Stiluri și să alegeți o pictogramă țintă pentru a „evidenția toate elementele care se potrivesc cu acest selector”.

În panoul „Stiluri”, Firefox explică, de asemenea, care proprietăți CSS nu afectează elementul selectat și de ce, împreună cu recomandări cu privire la ceea ce ar putea ajuta la remedierea problemei sau la evitarea unui comportament neașteptat (funcția se numește CSS inactiv).

O altă caracteristică utilă este că Firefox atribuie insigne de scroll și overflow elementelor care provoacă depășirea sau derularea containerului (depanare la depășire) - foarte util atunci când încercați să vă dați seama de ce o bară de defilare orizontală apare dintr-o dată sau un element nu apare. nu te comporți așa cum era de așteptat.

Extinderea nodurilor recursiv (Chrome, Edge, Firefox)

Când inspectați un element cu un DOM imbricat profund, uneori poate dura ceva timp pentru a parcurge arborele, de la un nod imbricat la altul. Făcând clic dreapta pe săgeata de pe un nod, puteți alege „Extinde recursiv”, iar nodul selectat în prezent (și toți copiii săi) se vor extinde cu un singur clic. Alternativ, puteți ține apăsat Opțiune (sau Ctrl + Alt pe Windows) în timp ce faceți clic pe pictograma săgeată de lângă numele elementului.

Colectați și exportați acoperirea codului (Chrome, Edge)

Pe o anumită pagină, este posibil ca cea mai mare parte din CSS și JavaScript să nu fie folosite deloc, deși vor fi livrate în browser. Panoul „Acoperire cod” (meniul de comandă → „Afișare acoperire”) vă permite să explorați ce stiluri și coduri nu sunt utilizate pe o anumită pagină. Folosim acoperirea codului pentru a colecta CSS critice pentru fiecare dintre șabloanele utilizate pe site, iar a face acest lucru manual poate fi destul de obositor.

Cu „Acoperirea codului” în vigoare, trecând prin câteva scenarii care includ o mulțime de atingeri, file și redimensionare ferestre, exportăm și datele de acoperire pe care DevTools le colectează ca JSON (prin pictograma de export/descărcare). În plus, puteți folosi Puppeteer, care oferă și un API pentru a colecta acoperire (dar nu suntem încă acolo).

Depanare interogări media (Chrome, Edge)

Cu zeci de interogări media în zbor pentru o anumită pagină, poate deveni cu ușurință dificil să urmăriți stilurile care sunt suprascrise de alte stiluri incluse într-o interogare media. Pentru a găsi secțiunea specifică din fișierul dvs. CSS care ar putea cauza un comportament neașteptat, ne putem îndrepta atenția către depanatorul de interogări media . În mod implicit, este ascuns în spatele roții „Setări” din bara de instrumente a dispozitivului, dar este de fapt destul de util când este disponibil implicit.

Comutați bara de instrumente a dispozitivului (modul de răspuns) cu Cmd/Ctrl + Shift + M și alegeți cele trei puncte din colțul din dreapta sus. Apoi alegeți „Afișați interogări media”. Acum ar trebui să puteți vedea bare orizontale reprezentând domeniul de aplicare al fiecărei interogări media .

S-ar putea să pară puțin confuze la început, dar modul în care aceste bare sunt aliniate reprezintă lățimea ecranului și este replicat în partea stângă și în partea dreaptă a ferestrei de vizualizare. Barele mai apropiate de centrul ecranului sunt suprascrise de cele mai îndepărtate de centru. Bara albastră din partea de sus indică interogări media max-width , cea verde interogări media cu lățime min-width max-width , iar cea portocalie reprezintă doar interogări media min-width .

Pentru toate barele, puteți urmări ce interogări media le conțin atunci când treceți cu mouse-ul peste ele. Puteți sări la un anumit interval de interogări media și să inspectați problemele de aspect în detaliu cu panoul Stiluri deschis. Făcând clic pe orice poziție a unei bare, puteți declanșa anumite puncte de întrerupere, iar dacă faceți clic dreapta pe o bară, puteți dezvălui poziția acesteia în codul sursă. De fapt, puteți sări rapid înainte și înapoi între interogări media, mai degrabă decât să redimensionați manual ecranul și să verificați lățimea ecranului iar și iar.

Ca o notă secundară rapidă, puteți, de asemenea, să specificați dispozitivele dvs. emulate personalizate în loc de cele predefinite - de fapt, există deja o mulțime de presetări de dispozitive disponibile. În plus, puteți utiliza panoul „Senzori” pentru a controla anumite senzori ale dispozitivului, dacă este necesar. În plus, în Firefox puteți activa și dezactiva simularea tactilă și puteți defini un anumit User Agent, de exemplu pentru a verifica modul în care se comportă pagina cu un crawler al motorului de căutare care solicită pagina.

Emulați interogări media preferințe (Chrome, Edge, Firefox)

În plus față de interogările media legate de dimensiunea ecranului, putem, de asemenea, să emulăm interogări media specifice accesibilității, de exemplu prefers-color-scheme , prefers-reduced-motion și deficiențe de vedere. Pentru a comuta emularea, mergeți la panoul de control al comenzii ( Cmd/Ctrl + Shift + P ) și tastați „Afișați redarea”. Acum, în setări puteți alege o emulație preferată.

(De asemenea, aici puteți alege să evidențiați zonele care trebuie revopsite („Paint Flashing”), zonele care s-au deplasat („Layout Shift Regions”) și depanați problemele de performanță de defilare.)

Vorbind despre emulare: îți amintești cum, în trecut, te-ai chinuit să găsești o eroare de aspect pentru foaia de stil de imprimare? În același panou, puteți previzualiza modul în care funcționează stilurile dvs. de imprimare și aici - nu este nevoie să tipăriți un PDF al unei pagini aleatorii din nou și din nou pentru a afla ce a cauzat o problemă majoră de randare.

De asemenea, în același panou în Chrome puteți adăuga tot felul de caracteristici de depanare a randării — de exemplu, intermiterea vopselei, chenarele straturilor, problemele de performanță de defilare, dezactivarea AVIF și WebP.

Ca o notă secundară, există o opțiune din bara de instrumente DevTools pentru „Forțare aspect întunecat ” și „Forțare stiluri media de imprimare ” în Safari și puteți simula deficiențele de vedere în fila „Accesibilitate” din Firefox. (Vom vorbi mai multe despre accesibilitate mai târziu.) În Firefox, vizualizarea de tipărire este disponibilă și deasupra panoului „Stiluri” în modul „Inspectare”.

Deschideți automat DevTools în fiecare filă nouă (Chrome)

Cu auditurile de performanță, ar putea dori să explorăm mai multe pagini simultan și să observăm cum se comportă acestea cu DevTools separate, fără a fi nevoie să ne întrebăm care DevTools este responsabil pentru ce fereastră. Pentru a economisi puțin timp în timpul depanării, puteți crea o comandă rapidă cu o comandă Terminal care ar deschide un browser cu DevTools care se deschide automat în mod implicit în fiecare filă nouă.

Pentru a realiza acest lucru, trebuie să trecem --auto-open-devtools-for-tabs atunci când rulăm un browser Chrome, bazat pe Edge. Rulem un script Alfred simplu pentru a deschide browserul Canary cu steag atunci când este necesar (sfat de pălărie pentru Addy) - foarte util atunci când aveți nevoie de el:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --auto-open-devtools-for-tabs htps://www.smashingmagazine.com

Puteți găsi o prezentare generală foarte cuprinzătoare a tuturor comutatoarelor din linia de comandă Chrome, Edge în ghidul lui Peter Beverloo despre comutatoarele din linia de comandă Chrome.

Capturi de ecran completă (Chrome, Edge, Firefox)

Când selectați un nod HTML în panoul „Elemente”, puteți face clic dreapta pe nod și puteți solicita DevTools să creeze o captură de ecran a nodului respectiv, iar în „Modul de răspuns” puteți face o captură de ecran a părții vizibile a nodului. pagină sau o captură de ecran la dimensiune completă (trei puncte în colțul din dreapta sus).

Pentru a crea o captură de ecran de dimensiune completă puțin mai rapid, puteți, de asemenea, să solicitați o „captură de ecran completă” în meniul de comandă ( Cmd/Ctrl + Shift + P → „Captură de ecran completă”). De obicei, este puțin mai rapid. Rețineți că părțile din pagină care sunt încărcate leneș sau redate progresiv (de exemplu, cu content-visibility ) ar putea să nu apară corect în captură de ecran, așa că ar putea fi necesar să derulați mai întâi până la capăt în pagină.

În Firefox, puteți genera o captură de ecran a părții vizibile a paginii accesând mai întâi modul „Bara de instrumente dispozitiv”, apoi găsind pictograma camerei în colțul din dreapta sus și activând-o. Sau pentru o captură de ecran completă, va trebui să comutați mai întâi „Fă o captură de ecran a întregii pagini” în „Setări”, apoi veți găsi pictograma camerei în bara de instrumente DevTools.

Rigle pentru componente (Chrome, Edge, Firefox)

Poate ați dori să verificați rapid lățimea și înălțimea unei imagini sau a unui spot publicitar. Dar, în loc să faceți o captură de ecran sau să inspectați un element și să copiați/lipi valorile de width și height , puteți utiliza o regulă pentru a măsura dimensiunea unei componente. Regulile sunt furnizate în toate browserele moderne, dar Firefox DevTools vă permite, de asemenea, să măsurați o porțiune a paginii . Puteți găsi instrumentul de măsurare în partea dreaptă a DevTools, chiar lângă pictograma „Mod receptiv”.

Urmărirea modificărilor (Chrome, Edge, Firefox)

Pe măsură ce depanați o anumită problemă, este posibil să fi comentat câteva linii de cod și, probabil, să fi adăugat un cod nou care pare să rezolve problema definitiv. Modificările dvs. trebuie acum să fie replicate în fișierele sursă reale. Pentru a face acest lucru, nu este nevoie să colectați manual toate modificările pe care le-ați făcut în toate fișierele dvs.

În Chrome, comutați comanda „Modificări locale” când editați fișierul sursă. Ar trebui să vedeți un instrument de urmărire a modificărilor care apare în panoul de mai jos. Dacă este prăbușit, trageți-l afară trăgându-l vertical. Panoul evidențiază proprietățile modificate și ceea ce s-a schimbat exact, astfel încât să puteți copia și lipi modificările imediat.

Un lucru de reținut este că probabil că este o idee bună să urmăriți modificările în timp ce rulați serverul local - fără eliminarea automată a întreruperilor de rând și a spațiilor, deoarece acestea ar apărea și ca modificări. Această problemă nu există în Firefox, unde puteți găsi și un panou „Modificări” care face același lucru, împreună cu un buton prietenos „Copiați toate modificările”.

Anulări locale (Chrome, Edge)

S-ar putea să fi fost în această situație înainte: doriți doar să experimentați cu câteva modificări, dar s-ar putea să vă fie destul de frică să apăsați accidental pe „Actualizează” în browser pentru a pierde toate modificările făcute pe pagină. Poate că nu puteți rula site-ul la nivel local sau poate nu doriți să rulați întreaga versiune pentru câteva modificări locale minore. În astfel de cazuri, „Anulări locale” din Chrome poate fi o mană divină.

Mai întâi, creați un folder pe computer în care vor fi stocate toate modificările locale ( local-overrides pe desktop pare a fi un nume și un loc rezonabil pentru acest tip de sarcină). Apoi mergeți la fila „Surse” și alegeți „Overrides” în colțul din stânga sus al DevTools (ar putea fi ascuns în spatele unui chevron dublu). Acum faceți clic pe „Selectați folderul pentru înlocuiri” și alegeți folderul proaspăt creat - acesta este folderul pe care Chrome îl va folosi pentru a stoca modificările locale. Va trebui să faceți clic pe „Permite” pentru a acorda permisiuni Chrome pentru a salva fișiere pe hard disk.

Acum, puteți alege orice fișier din panoul „Surse”, faceți clic dreapta oriunde în cod și alegeți „Salvare pentru înlocuiri” cu clic dreapta. Acesta este un indiciu pentru ca Chrome să creeze un fișier nou și să stocheze tot conținutul fișierului, împreună cu modificările dvs., pe hard disk. (Puteți dori să faceți mai întâi clic pe butonul {} pentru a face codul puțin mai ușor de citit). ( Mulțumesc lui Trys pentru indiciu! )

După ce ați definit suprascrierile locale, Chrome va intercepta solicitările de rețea și va folosi codul dvs. în loc de răspunsul real. De asemenea, va avea grijă de modificările aduse fișierului și va injecta modificări în pagină în mod automat , foarte mult ca și cum ați avea o dezvoltare locală instalată cu modul de vizionare activat. Orice fișier care este suprascris de suprascrieri locale va avea un mic punct violet lângă ele în panoul „Elemente”.

Partea cea mai bună : acum puteți deschide fișierul în editorul dvs. de text și puteți face modificări de acolo , în timp ce vedeți aceste modificări apar și în DevTools - și dacă trebuie să treceți la DevTools pentru a adăuga puncte de întrerupere, o puteți face din DevTools, faceți modificări ale codului, iar aceste modificări vor fi vizibile și în editorul dvs. de text. Aproape magie!

Sfat pro de la Harry Roberts: suprascrierile locale nu vă permit să păstrați sau să urmăriți versiunile sau variantele, dar puteți atașa un șir de interogare la adresa URL și puteți încărca variante separate ale aceleiași pagini. Extrem de util atunci când editați pagini HTML.

Ah, și dacă trebuie să dezactivați din nou suprascrierile locale, bifați „Activați suprascrierile locale” în același panou – altfel stilurile vor suprascrie stilurile existente din nou și din nou, ceea ce este ceva ce s-ar putea să nu doriți.

Depanare de la distanță (Chrome, Safari)

Dacă trebuie să depanați aplicațiile sau paginile de pe un telefon mobil, puteți utiliza un proxy Devtools pentru dispozitivele iOS pentru a depana Chrome pe iOS și, de asemenea, puteți utiliza DevTools pentru a depana Mobile Safari pe iOS cu Chrome DevTools.

Pentru a depana Mobile Safari cu Safari Inspector, activați „Web Inspector” în „Setări → Safari → Advanced → Web Inspector” și deschideți depanatorul cu „Develop” → (numele telefonului dvs.). Ar trebui să aveți DevTools din Safari să vi se deschidă.

Pentru dispozitivele Android, deschideți Opțiuni pentru dezvoltatori pe Android și selectați „Activați depanarea USB” . Pe mașina dvs. de dezvoltare, puteți apoi să vă descoperiți dispozitivul mobil accesând chrome://inspect#devices și alegând „Remote Target”. Puteți găsi o mulțime de detalii și instrucțiuni la „Începeți cu depanarea de la distanță a dispozitivelor Android”. Tot acolo puteți găsi DevTools dedicat pentru depanarea Node.js.

Întrerupeți execuția scriptului (Chrome, Edge, Firefox)

Când testați CSS critic sau depanați JavaScript, este posibil să doriți să păstrați starea DOM înainte ca un anumit script să fie executat sau să fie aplicat un anumit stil. Pentru asta sunt punctele de întrerupere a modificării DOM în DevTools.

Făcând clic dreapta pe cele trei puncte de rău augur de lângă numele elementului, puteți alege modificările „Break on” subarboresc (inserții și eliminări de noduri în arborele DOM cu rădăcină la nodul dat), modificări de atribut (de exemplu, când este adăugat un atribut sau eliminat, sau o valoare de atribut se modifică — de exemplu, cu clase) sau eliminarea nodului.

Cu toate acestea, puteți utiliza, de asemenea, un punct de întrerupere condițional de linie de cod atunci când cunoașteți regiunea exactă a codului pe care trebuie să o investigați, dar doriți să vă întrerupeți numai când o altă condiție este adevărată. În plus, să nu uităm de punctele de înregistrare pentru a scoate o valoare într-un fragment de cod fără a scrie console.log din nou și din nou.

Fragmente de cod (Chrome, Edge)

Dacă aveți câteva fragmente de cod pe care le utilizați des pentru a urmări ceea ce ar fi putut cauza comportamentul erorilor, puteți stoca și accesa aceste fragmente în panoul „Fragmente”. Într-un fel, aceste fragmente JavaScript sunt similare cu bookmarklet-urile, dar spre deosebire de acestea din urmă, le puteți gestiona din confortul unei zone dedicate în DevTools.

Deoarece sunt scripturi, putem adăuga puncte de întrerupere atunci când rulează aceste scripturi sau putem selecta o porțiune din codul dvs. din „Fragmente” și să rulăm acea porțiune a codului în loc să executăm întregul fragment.

Panoul „Fragmente” este situat printre „Surse”, lângă „Anulări locale”. După ce ați adăugat un fragment, îl puteți rula fie făcând clic dreapta și selectând „Run”, fie cu Cmd/Ctrl + Enter . Desigur, fiecare fragment este disponibil și din Panoul de comandă.

În general, dacă vă aflați că rulați o sarcină de rutină din nou și din nou, există șanse mari să o plasați în „Fragmente de cod” și să automatizați această sarcină cu un script. DevTools Snippets include câteva scripturi utile pentru eliminarea memoriei cache, afișând anteturi și salvând obiecte ca fișiere .json din consolă, dar le puteți folosi pentru a modifica DOM-ul sau pentru a afișa orice informații utile, cum ar fi semnele de performanță (care este ceea ce facem noi). În plus, puteți conecta și un CSS de diagnosticare a performanței pentru a indica imagini încărcate lene, imagini nedimensionate sau scripturi sincrone.

Rulați teste automatizate personalizate (Safari)

Una dintre caracteristicile adesea uitate din Safari DevTools este opțiunea de a defini și de a rula o serie de verificări automate. Gândiți-vă la ea ca la o suită de testare personalizată , cu o serie de teste mici, care pot fi complet definite în funcție de tipul de audit pe care un dezvoltator ar dori să îl ruleze. În mod implicit, suita de testare este axată pe accesibilitate, dar o puteți ajusta după cum credeți de cuviință, de exemplu, pentru a verifica dacă există scripturi de sincronizare în DOM sau dacă toate imaginile au un atribut definit de width și height , sau chiar dacă toate imaginile sunt încărcate leneș. ( mulțumesc, Nikita! )

Hărți sursă (Chrome, Edge, Firefox)

Când depanați codul de producție, este extrem de util să puteți urmări modificările la o anumită componentă sau modul pe care îl utilizați în baza de cod. Pentru a mapa codul minimizat la codul sursă, putem folosi hărți sursă. Dacă generați o hartă sursă ca parte a construcției dvs., puteți utiliza hărți sursă în timp ce vă depanați codul în DevTools .

În Chrome, trebuie să activați hărțile sursă pentru JavaScript și CSS în „Setări”, apoi adăugați un dosar la „Spatiu de lucru”. DevTools cu apoi încearcă să deducă automat toate mapările și să încarce fișierele sursă în plus față de cele minimizate. Apoi puteți citi și depana codul compilat în sursa sa originală. Chiar și mai bine decât atât: puteți în continuare să vă parcurgeți punctele de întrerupere, iar toate erorile, jurnalele și punctele de întrerupere se vor mapa la codul real. Pentru a vă construi harta sursă, instrumentul Devtool de la Webpack vă poate ajuta.

For Firefox, once the source map is generated, a transformed file has to include a comment that points to the source map . Just make sure that your bundler does the job for you. Once it's in place, in the source list pane, the original source (.scss or .ts files) will appear, and you can debug it right there.

Clear Service Worker's Cache And Storage (Chrome, Edge)

When we hit “Hard Refresh” in the browser, the browser will not use anything from the cache when reloading the page. Instead, it will re-fetch all assets from the server, without relying on caching.

If you right-click the “Refresh” button with DevTools open, you'll find another option: “Empty Cache and Hard Reload”. The difference is that if the page prompts any dynamic fetches via JavaScript, they might still use the cache. The latter option clears them, too, while the former doesn't.

Both of these options, however, don't clear cookie or service worker's cache — which you might want to do in some scenarios. Jump to the Command menu ( Cmd + Shift + P ) and type/autocomplete “Clear site data”. When this option is activated, the browser will clean all of the data (as the name assumes), including the service worker's cache as well as the unregistering of the service worker. (Alternatively, you can click “Clear Site Data” in the Application panel.)

And if you want to delete only cache or only cookies quickly, you can right-click on any request in the “Network” panel, and choose “Clean browser cache” from there.

In Firefox, you'll need to head to the “Privacy & Security” panel and find the “Cookies and Site Data” section there.

Filters In The Network Panel (Chrome, Edge, Firefox)

There seems to be not much to explore in the “Network” panel as it basically just shows the list of browser requests (along with server responses) in chronological order. However, there are plenty of obscure little helpers as well.

First of all, with an overview of requests in front of us, we can choose which columns we'd like to see . Right-click on the header of one of the columns and select the ones that you find useful for the task at hand. We always choose the “Priority” column to see in which priorities assets are being requested, and if we need to adjust that order to deliver critical assets faster (based on JavaScript Resource Loading Priorities in Chrome, Edge).

We can also filter requests to find specific ones that might be causing trouble ( thanks for the tip, Harry ). At the top of the “Network” panel you'll find an input field, which accepts not only keywords but also commands for filtering. Here are a few examples of the useful ones:

• is:from-cache shows all resources that were delivered from the cache,
• is:service-worker-initiated , shows only requests prompted by a service worker,
• is:running shows all incomplete or unresponsive requests,
• larger-than:250k shows all resources that are larger than 250 Kb,
• -larger-than:250k shows all resources that aren't larger than 250 Kb (same size and smaller),
• mixed-content: shows all assets that are loaded over HTTP instead of HTTPS,
• -has-response-header:Cache-Control highlights assets that don't have any caching headers,
• Obviously we can also search for bad practices like document.write and @import in HTML and CSS, plus we can use regular expressions as well.

All filters can be combined as well, separated by an empty space. You can check a comprehensive list of all filters as well, or just type - in the filters input and get an autocomplete preview of all features ( huge thanks to Harry for the tip! ).

Check Initiators In The Network Panel (Chrome, Edge)

If you want to quickly check which assets a particular resource has requested, or by which resource an asset was requested, there is a simple way to discover it in DevTools as well. This is especially useful in cases where you might have a couple of third-party scripts that might be calling fourth-party-scripts.

When you are inspecting a request in the “Network” panel, hold Shift while hovering over an element. The pink background color will indicate resources that this element has prompted to download, and the green background color will indicate the initiator that actually prompted the request.

Choose a User Agent (Chrome, Edge, Firefox)

Sometimes you might want to check how the page will render with a different user agent, eg to make sure that a Googlebot gets a properly rendered version of the page. By heading to “Network conditions”, you can define the behavior for caching, network throttling and a user agent.

În mod implicit, acesta din urmă este „automat”, dar există 10 grupuri predefinite, de la GoogleBot Desktop și Mobile până la Android și UC Browser. De asemenea, vă puteți defini propriul agent de utilizator dacă este necesar. Cu toate acestea, aceste setări nu vor rămâne păstrate pe măsură ce navigați de la o filă la alta.

În Firefox, va trebui să mergeți la pagina about:config a Firefox și să definiți un șir general.useragent.override .

Modificați comportamentul de defilare în panoul de performanță (Chrome, Edge)

La prima vedere, panoul de performanță poate părea destul de descurajantă cu diagramele sale de flacără , multe date afișate simultan și comportamentul de defilare destul de neconvențional. În mod implicit, defilarea verticală obișnuită acționează ca mărire într-o porțiune selectată a cronologiei, dar o putem modifica.

În „Setări”, puteți comuta „Acțiunea roții mouse-ului Flamechart” de la „Mărire” la „Defilare” - și voila, derularea preferată va fi păstrată! Dar dacă ai vrea să folosești atât zoom-ul, cât și derularea ? Sfatul cheie este să țineți apăsat „Shift” în timp ce derulați pentru a comuta comportamentul preferat.

Înțelegerea panoului de performanță (Chrome, Edge)

Vă amintiți „Cronologie: inițiatori de evenimente” și „Cronologie: urmărirea invalidării” pe care le-am menționat în setările experimentale? Aceste caracteristici experimentale sunt utile în panoul Performanță atunci când căutați o cauză a operațiunilor costisitoare - așa-numitele sarcini lungi (sarcini care durează peste 50 ms pentru a fi finalizate). Scopul este atunci de a împărți sarcinile lungi în sarcini mai scurte și, de obicei, are sens să se concentreze mai întâi pe cele mai lungi sarcini lungi.

Mergeți la panoul Performanță și începeți să profilați cu Cmd/Ctrl + Shift + E . După un timp necesar pentru reîmprospătare și colectare a datelor, acele sarcini lungi și costisitoare vor apărea în cronologie, evidențiate cu un dreptunghi roșu în colțul din dreapta sus. Lungimea lor indică cât de costisitoare este de fapt operația. Sarcinile au un buget prietenos de 50 ms pentru finalizare , motiv pentru care prima porțiune de 50 ms a sarcinii este afișată cu gri continuu. Ori de câte ori depășești acest buget, restul sarcinii este evidențiat cu dungi roșii/gri.

Diagrama de flacără este o vizualizare a în ce constă fiecare sarcină. Toate părțile unei sarcini sunt afișate sub sarcinile reale, cu un fundal galben reprezentând scripting. Dacă faceți clic pe „Evaluați scriptul” sub fiecare dintre sarcini, puteți trage în sus sertarul „Rezumat” din partea de jos și puteți vedea ce script a cauzat costul. Dacă faceți clic pe bara violet etichetată „Recalculați stilul” , DevTools va arăta exact ce a declanșat invalidarea stilurilor.

Probabil cea mai subestimată caracteristică din DevTools este într-adevăr sertarul „Rezumat” , care ar afișa apoi și ce elemente au fost afectate de recalcularea stilului (deci puteți sări la ele imediat) și ce a inițiat această sarcină în primul rând.

Depanarea animațiilor Janky cu straturi (Chrome, Edge, Safari)

Ai nevoie doar de câteva animații, poate cu un pic de paralaxă, o navigare glisantă sau o manipulare răutăcioasă a indexului z, pentru a te confrunta cu cadre scazute și animații neplăcute . Contorul FPS din panoul de performanță (Chrome) va dezvălui dacă rulați cadrele fără probleme, dar dacă nu este cazul, puteți explora problemele de randare în fila „Straturi”.

Unele dintre probleme pot fi detectate cu ușurință prin urmărirea cărora dintre elemente le lipsește o proprietate will-change proprietății și care folosesc o cantitate disproporționată de memorie . Așa am observat o componentă mare care a fost ascunsă în afara ecranului cu o poziționare relativă de -1000px în afara ecranului, provocând o utilizare de câțiva MB de memorie. De asemenea, atunci când depanați o problemă canvas, rețineți că Safari are un depanator Canvas Memory Usage.

Vizualizare 3D Z-Index Depanator (Edge)

Un alt instrument util pentru a urmări problemele de randare și problemele de index z este Vederea 3D a DOM-ului Edge („Setări” → „Mai multe instrumente” → Vizualizare 3D). Instrumentul oferă o vizualizare interactivă a straturilor DOM și z-index . Puteți chiar să alegeți să vizualizați DOM-ul colorat cu culorile reale de fundal ale elementelor DOM sau să afișați numai contexte de stivuire.

Nu a fost niciodată mai simplu să vezi cum sunt distribuite valorile z-index pe pagină și de ce suprapunerile sau panourile nu apar așa cum era de așteptat atunci când sunt declanșate.

Profilare mai bună a accesibilității (Chrome, Edge, Firefox)

Nu ar fi grozav să existe un instrument de accesibilitate unic, care să ofere detalii și îndrumări despre orice, de la ordinea filelor la atributele ARIA și anunțurile cititorului de ecran? Pentru a ajunge aproape de asta, am creat un profil de accesibilitate dedicat cu extensii utile și bookmarkleturi menționate la începutul articolului. Cu toate acestea, DevTools oferă și câteva funcții utile din cutie.

În Chrome și Edge, panoul „Accesibilitate” arată arborele de accesibilitate, atributele ARIA utilizate și proprietățile calculate. Când utilizați un selector de culori, puteți verifica și ajusta în mod convenabil culorile pentru a se potrivi pentru un raport de contrast conform AA/AAA (împreună cu posibilitatea de a comuta între HEX, RGB, HSL cu Shift + Click pe eșantion - mulțumesc Ana! ).

După cum am menționat deja, panoul „Redare” vă permite, de asemenea, să emulați deficiențele de vedere. Auditurile Lighthouse includ, de asemenea, o secțiune cu recomandări privind accesibilitatea paginii. În plus, atunci când inspectați un element, informațiile de accesibilitate apar și în prezentarea generală.

Firefox are și instrumente avansate de accesibilitate. În plus față de arborele de accesibilitate și verificatorul de contrast, Firefox DevTools evidențiază roluri și repere, împreună cu recomandări și verificări de accesibilitate . De exemplu, puteți verifica dacă există probleme de contrast pe întreaga pagină, puteți verifica dacă toate linkurile pot fi focalizate și includ stilul de focalizare și puteți revizui etichetele de text. În plus, puteți comuta și ordinea de filare.

În plus, puteți instala extensii axate pe accesibilitate, cum ar fi Accessibility Insights, ax și a11y.css, împreună cu alte câteva linters de accesibilitate și simulatoare de viziune a culorilor.

Merită menționat

Evident, există literalmente sute, și poate chiar mii, de alte funcții utile disponibile în DevTools. Multe dintre ele sunt destul de cunoscute și nu au nevoie de prea multe introduceri, dar merită totuși menționate.

• Grid CSS / Inspectori Flexbox (Firefox, Chrome, Edge)
  Dacă aveți o problemă de aspect legată de Grid și Flexbox, probabil veți găsi o cauză a problemei prin DevTools. Inspectorii Grid și Flexbox sunt foarte utili, deoarece arată suprapunerea grilei și limitele containerelor, precum și indicii despre orice, de la flex-basis la grid-gap .

• Expresii vii
  Dacă v-ați obișnuit să introduceți aceeași expresie JavaScript în consolă, ați putea încerca să o automatizați cu expresii live. Funcția, disponibilă în Chrome, Edge și Firefox, vă permite să introduceți o expresie o dată și apoi să o fixați în partea de sus a consolei, iar valoarea expresiei live se va actualiza automat.

• Panoul de animații
  Firefox are un panou foarte util pentru a urmări problemele cu animațiile, inclusiv încetinirea acestuia și vizualizarea modului în care un element se schimbă în timp.

• Panoul Fonturi
  Firefox are, de asemenea, un panou „Fonturi” la îndemână, care merită explorat pentru orice fel de problemă legată de fonturi. L-am folosit destul de mult atunci când am încercat să potrivim fontul alternativ cu fontul web, de exemplu, deoarece puteți rafina proprietățile tipografice cu un glisor și puteți vedea impactul în acțiune. De asemenea, oferă previzualizări ale textului atunci când treceți cu mouse-ul peste o familie de fonturi în stiluri.

• Prezentare generală CSS
  Dacă activați „Prezentare generală CSS” în setările experimentale ale Chrome, DevTools va adăuga o filă cu un raport cuprinzător al declarațiilor CSS utilizate pe o pagină. De asemenea, va lista toate culorile și fonturile utilizate, precum și interogările media și declarațiile neutilizate la care puteți sări imediat.

Și ăsta este un Wrap!

Când ne-am propus să pregătim această prezentare generală, trebuia să fie destul de scurtă, prezentând doar câteva dintre caracteristicile utile pe care DevTools le oferă. S-a dovedit că există o mulțime de funcții de care nu știam înainte de a începe să scriem acest articol - și am putut să le dăm peste ele cu ajutorul amabil al cititorilor minunați Smashing care își contribuie cu experiențele pe Twitter. Vă mulțumesc foarte mult pentru contribuțiile voastre amabile!

De asemenea, vă mulțumim pentru toți contribuitorii tuturor DevTools din toate browserele - vă aplaudăm pentru eforturile dvs. și pentru timpul și efortul de a face experiența noastră de dezvoltare mai bună. Conteaza.

Dacă am omis ceva valoros , vă rugăm să răspundeți în comentarii. Și dacă ați găsit ceva util, sperăm că veți putea aplica acești mici ajutoare în fluxul dvs. de lucru imediat și, poate, veți putea trimite un link către această postare unui prieten sau doi - poate că le vor găsi util. Ah, și nu uitați: puteți depana și DevTools cu DevTools - doar apăsați Cmd/Ctrl + Shift + I de două ori la rând. ;-)

Acum, depanare fericită, tuturor!