Otklanjanje pogrešaka može biti zamorno i još više frustrirajuće ako ne možete lako locirati grešku. Alati za razvojne programere Chromea 106 (devtools) postavljeni su da pojednostave postupak uklanjanja pogrešaka, čineći ga lakšim i bržim.

Sada možete jednostavno sortirati datoteke, optimizirati svoje pretraživanje, sakriti skripte trećih strana, pristupiti detaljnim izvješćima o izvedbi i još mnogo toga o čemu se govori u ovom članku. Ovi razvojni alati su neophodni, posebno za programere koji rade s JavaScript okvirima kao što su Angular, React i Vue.js, koji sada imaju interaktivnu i pojednostavljenu konzolu za vizualizaciju i otklanjanje pogrešaka njihov kod.

Pogledajmo pobliže neke od ovih novih značajki:

Kako biste u potpunosti iskoristili nova ažuriranja za Chrome 106, preuzmite Chrome Kanarinac, Dev, ili Beta verzije kao zadani razvojni preglednik. Imat ćete pristup najnovijim alatima za razvojne programere koji omogućuju testiranje API-ja web platforme i brzo identificiranje problema ili grešaka na vašoj web stranici kako biste osigurali da vaši korisnici imaju najbolje korisničko iskustvo.

instagram viewer

1. Datoteke grupirane prema autoru/postavljenom

Sada se možete kretati izravno do komponenti svoje aplikacije grupiranjem datoteka na autor/razmješten na izvor ploča. Ići Izvor > Izbornik s 3 točke > Grupiraj prema autoru/uvedenom. Sada, kada otvorite datoteke, možete vidjeti samo svoje raspoređene datoteke na ploči.

U prethodnim verzijama Chromea sve datoteke izvornog koda bile su vidljive u navigacija ploča, što otežava pronalaženje jedne datoteke.

2. Pojednostavljeno pretraživanje datoteka

Možete ograničiti pretraživanje na izvornoj ploči samo na relevantne datoteke. U prethodnim verzijama Chromea, datoteke generirane okvirom i drugim trećim stranama prikazivale bi se u rezultatima pretraživanja, što bi otežavalo prepoznavanje stavke pretraživanja.

Ovo ažuriranje je verzija devtools za optimizaciju vašeg pretraživanja na web preglednicima Googleove varalice za pretraživanje. Za konfiguraciju ove postavke idite na Izbornik s 3 točke > Sakrij izvore popisa zanemarivanja.

Skripte treće strane pune vašu konzolu? Chrome 106 dodao je ekstenziju popisa zanemarivanja u izvornu kartu kako bi vam omogućio skrivanje skripti koje su automatski generirali okviri i druge treće strane.

Za aktiviranje ove značajke idite na Postavke > Popis zanemarivanja > Automatski dodaj poznate skripte treće strane na popis zanemarenih. Kada ponovno otvorite datoteke, konzola će prikazati samo relevantne datoteke povezane s vašom aplikacijom. Sada možete vidjeti svoj kod bez smetnji.

4. Detaljni tragovi snopa

Trebat će vam manje vremena za prepoznavanje pogreške na konzoli, zahvaljujući novoj značajci na Chromeu 106. Chromeovi alati za razvojne programere daju vam detaljan pregled asinkronih operacija i njihovih temeljnih uzroka. U prethodnim verzijama bili su vidljivi samo događaji koji su doveli do operacije. Najnoviji devTools pokazuju cijeli lanac operacija i njihove temeljne uzroke.

Google je konfigurirao a console.createTask() metoda u Chromeu 106. Ova metoda omogućuje okvirima da izvode praćenje steka na konzoli. Otklanjanje pogrešaka u JavaScriptu pomoću alata za razvoj jednako je jednostavno kao otklanjanje pogrešaka u CSS-u pomoću chrome-a.

5. Pratite interakcije na ploči izvedbe

Pratite nove interakcije u Izvođenje ploča za prepoznavanje potencijalnih problema s odgovorom na vašu aplikaciju. U pregledniku Chrome 106 sve se interakcije prikazuju u zapisu Interakcije nakon operacije. Staza prikazuje izvor interakcija i njihove ID-ove. Praćenje pomaže identificirati izvor i presresti ga u skladu s tim.

6. LCP Timing Insights na ploči Performance

The Najveće slikanje sadržaja (LCP) podaci o vremenu sada su dostupni na panel s uvidom u izvedbu. LCP vitalna je metrika performansi weba koja izvješćuje o vremenu renderiranja slika ili blokova teksta potrebnog za učitavanje na web stranici. 2,5 sekunde ili niže je dobar rezultat izvedbe.

Da biste vidjeli uvide, idite na ploča izvedbe>izbornik s 3 točke-više cestarina>uvidi u performanse. Kada ponovno pustite snimku, pojedinosti ploča će prikazati vremena učitavanja.

Dodatna ažuriranja u Chromeu 106

Ostala poboljšanja Chromea 106 uključuju:

  • Možete izvesti svoje snimke scenarija bez problema iz Snimač ploča. Gumb za izvoz imao je problema u prethodnim verzijama.
  • Sada imate birač boja u Stilovi okno SVG elementi.
  • Možete prepoznati skripte koje iskrivljuju vaš izgled u Uvid u izvedbu ploča.
  • Možete prikazati staze za LCP web fontove u Uvid u izvedbu ploča.

Ove značajke mogu poboljšati način na koji koristite razvojne alate preglednika.

Što dobivate od Chromea 106

Najnovija poboljšanja razvojnih alata u Chromeu 106 ubrzavaju proces uklanjanja pogrešaka. Nova ažuriranja olakšavaju vizualizaciju operacija putem pojednostavljene i dinamične konzole koja omogućuje skrivanje datoteka, onemogućavanje skripti, snimanje i detaljni pregled vaše aplikacije kada otklanjanje pogrešaka.

Dodaci Chromea 106 omogućit će vam upravljanje aplikacijom i optimiziranje njezine izvedbe. Samo naprijed i uživajte u ovim pogodnostima ažuriranjem na najnoviju verziju Chromea 106.