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 diskuteres i denne artikkelen. Disse utviklingsverktøyene er essensielle, spesielt for utviklere som jobber med JavaScript-rammer som f.eks 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 Kanariøyene, Utvikler, eller Beta versjoner som din 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.
1. Filer gruppert etter forfatter/distribuert
Du kan nå navigere direkte til applikasjonskomponentene dine ved å gruppere filer på forfattet/distribuert på kilde panel. 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 navigasjon panel, noe som gjør det vanskelig å finne en 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 Google-søk jukseark. For å konfigurere denne innstillingen, gå til 3-punktsmeny > Skjul ignoreringslistekilder.
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 til kjente tredjepartsskript automatisk 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øking av CSS ved hjelp av chrome.
5. Spor interaksjoner i ytelsespanelet
Spor nye interaksjoner i Opptreden panel for å identifisere potensielle reaksjonsproblemer 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
De Største innholdsrike maling (LCP) timingdetaljer er nå tilgjengelig på panel for ytelsesinnsikt. LCP er en viktig nettytelsesmåling som rapporterer om gjengivelsestiden for bilder eller tekstblokker å laste inn på nettsiden. 2,5 sekunder eller mindre er en god ytelsesscore.
Naviger til for å se innsikten ytelsespanel>3-dot-menu-more tolls>ytelsesinnsikt. Når du spiller av et opptak, vil Detaljer panelet vil vise innlastingstidene.
Ytterligere oppdateringer i Chrome 106
Andre forbedringer til Chrome 106 inkluderer:
- Du kan eksportere skriptopptakene dine uten problemer fra Opptaker panel. Eksportknappen hadde et problem i tidligere versjoner.
- Du har nå en fargevelger i Stiler rute SVG-elementer.
- Du kan identifisere skript som forvrenger oppsettet ditt i Ytelsesinnsikt panel.
- Du kan vise stier for LCP-webfonter i Ytelsesinnsikt panel.
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 lettere å visualisere operasjoner gjennom en forenklet og dynamisk konsoll som lar deg skjule filer, deaktivere skript, ta opp og få en grundig oversikt over programmet når feilsøking.
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.
