Google gjør feilsøking enklere med nye funksjoner i Devtools Chrome 106

Feilsøking kan være kjedelig og enda mer frustrerende når du ikke lett kan finne feilen. Chrome 106-utviklerverktøy (devtools) er satt til å forenkle feilsøkingsprosessen, noe som gjør det enklere og raskt.

Du kan nå enkelt sortere gjennom filer, optimere søket ditt, skjule tredjepartsskript, få tilgang til dyptgående ytelsesrapporter og mye mer som er omtalt i denne artikkelen. Disse utviklingsverktøyene er essensielle, spesielt for utviklere som jobber med JavaScript-rammeverk som Angular, React og Vue.js, som nå har en interaktiv og forenklet konsoll for å visualisere og feilsøke koden deres.

La oss se nærmere på noen av disse nye funksjonene:

For å dra full nytte av de nye oppdateringene på Chrome 106, last ned Chrome Canary, Dev eller Beta- versjonene som standard utviklingsnettleser. Du vil ha tilgang til de nyeste utviklerverktøyene som muliggjør testing av nettplattform-API-er, og raskt identifisere problemer eller feil på nettstedet ditt for å sikre at brukerne dine får den beste kundeopplevelsen.

Du kan nå navigere direkte til applikasjonskomponentene dine ved å gruppere filer på forfatter/distribuert på kildepanelet. Gå til Kilde > 3-punktsmeny > Grupper etter forfatter/distribuert. Nå, når du åpner filene, kan du bare se de distribuerte filene dine på panelet.

I tidligere Chrome-versjoner var alle kildekodefilene synlige i navigasjonspanelet, noe som gjorde det vanskelig å finne én enkelt fil.

2 Forenklet filsøk

Du kan begrense søket på kildepanelet til bare relevante filer. I tidligere versjoner av Chrome ble filer generert av rammeverket og andre tredjeparter vist i søkeresultatene, noe som gjorde det vanskelig å identifisere søkeelementet.

Denne oppdateringen er devtools-versjonen for å optimalisere søket ditt på nettlesere med Googles jukseark. For å konfigurere denne innstillingen, gå til 3-punktsmenyen > Skjul ignoreringslistekilder.

3 Skjul tredjepartsskript

Tredjepartsskript fyller opp konsollen din? Chrome 106 la til en ignoreringslisteutvidelse i kildekartet for å gjøre det mulig for deg å skjule skript som er automatisk generert av rammeverk og andre tredjeparter.

For å aktivere denne funksjonen, gå til Innstillinger > Ignorer liste > Legg automatisk til kjente tredjepartsskript til ignoreringslisten. Når du åpner filene igjen, vil konsollen bare vise relevante filer knyttet til applikasjonen din. Du kan nå se koden din uten distraksjon.

4 Detaljerte stabelspor

Du vil bruke mindre tid på å identifisere en feil på konsollen, takket være en ny funksjon på Chrome 106. Chrome-utviklerverktøy gir deg en detaljert oversikt over asynkrone operasjoner og deres rotårsaker. I tidligere versjoner var bare hendelsene som førte til operasjonen synlige. De nyeste devTools viser hele kjeden av operasjoner og deres rotårsaker.

Google har konfigurert en console.createTask()- metode i Chrome 106. Denne metoden gjør det mulig for rammeverk å utføre stabelsporinger på konsollen. Å feilsøke JavaScript ved hjelp av devtools er like enkelt som å feilsøke CSS ved hjelp av chrome.

5 Spor interaksjoner i ytelsespanelet

Spor nye interaksjoner i ytelsespanelet for å identifisere potensielle responsproblemer for applikasjonen din. I Chrome 106 vises alle interaksjoner i interaksjonssporet etter en operasjon. Sporet viser kilden til interaksjonene og deres IDer. Sporing hjelper til med å identifisere kilden og avskjære den deretter.

6 LCP Timing Insights i ytelsespanelet

Tidsinformasjonen for den største innholdsfulle malingen (LCP) er nå tilgjengelig på panelet for ytelsesinnsikt. LCP er en viktig nettytelsesmåling som rapporterer om gjengivelsestiden for bilder eller tekstblokker å laste på nettsiden. 2,5 sekunder eller mindre er en god ytelsesscore.

For å se innsikten, naviger til ytelsespanel>3-dot-menu-more tolls> Ytelsesinnsikt. Når du spiller av et opptak på nytt, vil detaljpanelet vise innlastingstidene.

Ytterligere oppdateringer i Chrome 106

Andre forbedringer til Chrome 106 inkluderer:

• Du kan eksportere skriptopptakene dine uten problemer fra Opptaker – panelet. Eksportknappen hadde et problem i tidligere versjoner.
• Du har nå en fargevelger i stiler – ruten SVG-elementer.
• Du kan identifisere skript som forvrenger oppsettet ditt i Performance Insights – panelet.
• Du kan vise stier for LCP-nettfonter i Performance Insights – panelet.

Disse funksjonene kan forbedre måten du bruker nettleserens utviklingsverktøy.

Hva du får fra Chrome 106

De siste forbedringene av devtools i Chrome 106 gjør feilsøkingsprosessen raskere. De nye oppdateringene gjør det enklere å visualisere operasjoner gjennom en forenklet og dynamisk konsoll som lar deg skjule filer, deaktivere skript, ta opp og ha en grundig oversikt over applikasjonen din når du feilsøker.

Chrome 106s tillegg vil gjøre det mulig for deg å administrere applikasjonen din og optimalisere ytelsen. Gå videre og nyt disse fordelene ved å oppdatere til den nyeste versjonen av Chrome 106.