Depanarea poate fi plictisitoare și chiar mai frustrantă atunci când nu puteți localiza cu ușurință eroarea. Instrumentele pentru dezvoltatori Chrome 106 (devtools) sunt setate pentru a simplifica procesul de depanare, făcându-l mai ușor și rapid.

Acum puteți să sortați cu ușurință fișierele, să vă optimizați căutarea, să ascundeți scripturi terță parte, să accesați rapoarte de performanță aprofundate și multe altele discutate în acest articol. Aceste instrumente de dezvoltare sunt esențiale, în special pentru dezvoltatorii care lucrează cu cadre JavaScript, cum ar fi Angular, React și Vue.js, care au acum o consolă interactivă și simplificată pentru vizualizare și depanare codul lor.

Să aruncăm o privire mai atentă la câteva dintre aceste noi funcții:

Pentru a beneficia pe deplin de noile actualizări pe Chrome 106, descărcați Chrome Canar, Dev, sau Beta versiuni ca browser de dezvoltare implicit. Veți avea acces la cele mai recente instrumente pentru dezvoltatori care permit testarea API-urilor platformei web și identificarea rapidă a problemelor sau erorilor de pe site-ul dvs. pentru a vă asigura că utilizatorii au cea mai bună experiență pentru clienți.

instagram viewer

1. Fișiere grupate în funcție de Creat/Implementat

Acum puteți naviga direct la componentele aplicației dvs. prin gruparea fișierelor la creat/desfăşurat pe sursă panou. Mergi la Sursă > 3-dot-meniu > Grupare după Authored/Deployed. Acum, când deschideți fișierele, puteți vedea numai fișierele implementate pe panou.

În versiunile anterioare de Chrome, toate fișierele de cod sursă erau vizibile în navigare panoul, ceea ce face dificilă găsirea unui singur fișier.

2. Căutare simplificată de fișiere

Puteți restricționa căutarea în panoul sursă doar la fișierele relevante. În versiunile anterioare de Chrome, fișierele generate de cadru și de alte terțe părți ar apărea în rezultatele căutării, ceea ce face dificilă identificarea elementului de căutare.

Această actualizare este versiunea devtools a optimizării căutării dvs. în browserele web cu Căutare Google cheat sheets. Pentru a configura această setare, accesați Meniu cu 3 puncte > Ascunde sursele listei de ignorare.

Scripturi de la terți vă umplu consola? Chrome 106 a adăugat o extensie pentru lista de ignorare în harta sursă pentru a vă permite să ascundeți scripturile generate automat de cadre și alte terțe părți.

Pentru a activa această funcție, accesați Setări > Lista de ignorare > Adăugați automat scripturi cunoscute de la terți la lista ignorate. Când deschideți din nou fișierele, consola va afișa numai fișierele relevante asociate cu aplicația dvs. Acum puteți vedea codul dvs. fără distragere.

4. Urme de stivă detaliate

Veți lua mai puțin timp pentru a identifica o eroare pe consolă, datorită unei noi funcții pe Chrome 106. Instrumentele pentru dezvoltatori Chrome vă oferă o imagine detaliată a operațiunilor asincrone și a cauzelor lor fundamentale. În versiunile anterioare erau vizibile doar evenimentele care au dus la operațiune. Cele mai recente devTools arată întregul lanț de operațiuni și cauzele lor fundamentale.

Google a configurat un console.createTask() metoda în Chrome 106. Această metodă permite cadrelor să efectueze urmărirea stivei pe consolă. Depanarea JavaScript folosind devtools este la fel de ușoară ca depanarea CSS folosind Chrome.

5. Urmăriți interacțiunile în panoul de performanță

Urmăriți noile interacțiuni în Performanţă panou pentru a identifica potențiale probleme de răspuns la aplicația dvs. În Chrome 106, toate interacțiunile apar în pista Interacțiuni după o operație. Piesa arată sursa interacțiunilor și ID-urile acestora. Urmărirea ajută la identificarea sursei și la interceptarea acesteia în consecință.

6. Informații despre sincronizarea LCP în panoul de performanță

The Cea mai mare vopsea plină de conținut Detaliile de sincronizare (LCP) sunt acum disponibile pe panoul de informații despre performanță. LCP este o valoare esențială a performanței web care raportează timpul de randare necesar pentru a se încărca imaginile sau blocurile de text pe pagina web. Un scor de performanță de 2,5 secunde sau mai puțin este un scor bun.

Pentru a vedea statisticile, navigați la panou de performanță>meniu-3 puncte-mai multe taxe>informații despre performanță. Când redați o înregistrare, Detalii panoul va arăta timpii de încărcare.

Actualizări suplimentare în Chrome 106

Alte îmbunătățiri aduse Chrome 106 includ:

  • Puteți exporta înregistrările de script fără probleme de la Recorder panou. Butonul de export a avut o problemă în versiunile anterioare.
  • Acum aveți un selector de culori în Stiluri panou elemente SVG.
  • Puteți identifica scripturile care vă distorsionează aspectul în Informații despre performanță panou.
  • Puteți afișa căile pentru fonturile web LCP în Informații despre performanță panou.

Aceste caracteristici pot îmbunătăți modul în care utilizați instrumentele de dezvoltare ale browserului.

Ce obțineți de la Chrome 106

Cele mai recente îmbunătățiri ale instrumentelor de dezvoltare din Chrome 106 fac procesul de depanare mai rapid. Noile actualizări facilitează vizualizarea operațiunilor printr-o consolă simplificată și dinamică care vă permite să ascundeți fișiere, să dezactivați scripturi, să înregistrați și să aveți o vedere în profunzime a aplicației dvs. atunci când depanare.

Adăugările Chrome 106 vă vor permite să vă gestionați aplicația și să-i optimizați performanța. Continuați și bucurați-vă de aceste beneficii prin actualizarea la cea mai recentă versiune de Chrome 106.