{"id":277743,"date":"2023-08-28T18:28:00","date_gmt":"2023-08-28T15:28:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=277743"},"modified":"2025-03-15T03:00:51","modified_gmt":"2025-03-15T00:00:51","slug":"google-gjor-feilsoking-enklere-med-nye-funksjoner-i-devtools-chrome-106","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/no\/google-gjor-feilsoking-enklere-med-nye-funksjoner-i-devtools-chrome-106\/","title":{"rendered":"Google gj\u00f8r feils\u00f8king enklere med nye funksjoner i Devtools Chrome 106"},"content":{"rendered":"\n

Feils\u00f8king kan v\u00e6re kjedelig og enda mer frustrerende n\u00e5r du ikke lett kan finne feilen. Chrome 106-utviklerverkt\u00f8y (devtools) er satt til \u00e5 forenkle feils\u00f8kingsprosessen, noe som gj\u00f8r det enklere og raskt.<\/p>\n

Du kan n\u00e5 enkelt sortere gjennom filer, optimere s\u00f8ket ditt, skjule tredjepartsskript, f\u00e5 tilgang til dyptg\u00e5ende ytelsesrapporter og mye mer som er omtalt i denne artikkelen. Disse utviklingsverkt\u00f8yene er essensielle, spesielt for utviklere som jobber med JavaScript-rammeverk som Angular, React og Vue.js, som n\u00e5 har en interaktiv og forenklet konsoll for \u00e5 visualisere og feils\u00f8ke koden deres.<\/p>\n

La oss se n\u00e6rmere p\u00e5 noen av disse nye funksjonene:<\/p>\n

For \u00e5 dra full nytte av de nye oppdateringene p\u00e5 Chrome 106, last ned Chrome Canary<\/strong>, Dev<\/strong> eller Beta-<\/strong> versjonene som standard utviklingsnettleser. Du vil ha tilgang til de nyeste utviklerverkt\u00f8yene som muliggj\u00f8r testing av nettplattform-API-er, og raskt identifisere problemer eller feil p\u00e5 nettstedet ditt for \u00e5 sikre at brukerne dine f\u00e5r den beste kundeopplevelsen.<\/p>\n

Du kan n\u00e5 navigere direkte til applikasjonskomponentene dine ved \u00e5 gruppere filer p\u00e5 forfatter\/distribuert<\/strong> p\u00e5 kildepanelet<\/strong>. G\u00e5 til Kilde > 3-punktsmeny > Grupper etter forfatter\/distribuert<\/strong>. N\u00e5, n\u00e5r du \u00e5pner filene, kan du bare se de distribuerte filene dine p\u00e5 panelet.<\/p>\n

I tidligere Chrome-versjoner var alle kildekodefilene synlige i navigasjonspanelet<\/strong>, noe som gjorde det vanskelig \u00e5 finne \u00e9n enkelt fil.<\/p>\n

\"Google<\/a><\/p>\n

2 Forenklet fils\u00f8k<\/h2>\n

Du kan begrense s\u00f8ket p\u00e5 kildepanelet til bare relevante filer. I tidligere versjoner av Chrome ble filer generert av rammeverket og andre tredjeparter vist i s\u00f8keresultatene, noe som gjorde det vanskelig \u00e5 identifisere s\u00f8keelementet.<\/p>\n

Denne oppdateringen er devtools-versjonen for \u00e5 optimalisere s\u00f8ket ditt p\u00e5 nettlesere med Googles jukseark.<\/a> For \u00e5 konfigurere denne innstillingen, g\u00e5 til 3-punktsmenyen > Skjul ignoreringslistekilder<\/strong>.<\/p>\n

\"Google<\/a><\/p>\n

3 Skjul tredjepartsskript<\/h2>\n

Tredjepartsskript fyller opp konsollen din? Chrome 106 la til en ignoreringslisteutvidelse i kildekartet for \u00e5 gj\u00f8re det mulig for deg \u00e5 skjule skript som er automatisk generert av rammeverk og andre tredjeparter.<\/p>\n

For \u00e5 aktivere denne funksjonen, g\u00e5 til Innstillinger > Ignorer liste > Legg automatisk til kjente tredjepartsskript<\/strong> til ignoreringslisten. N\u00e5r du \u00e5pner filene igjen, vil konsollen bare vise relevante filer knyttet til applikasjonen din. Du kan n\u00e5 se koden din uten distraksjon.<\/p>\n

\"Google<\/a><\/p>\n

4 Detaljerte stabelspor<\/h2>\n

Du vil bruke mindre tid p\u00e5 \u00e5 identifisere en feil p\u00e5 konsollen, takket v\u00e6re en ny funksjon p\u00e5 Chrome 106. Chrome-utviklerverkt\u00f8y gir deg en detaljert oversikt over asynkrone operasjoner og deres rot\u00e5rsaker. I tidligere versjoner var bare hendelsene som f\u00f8rte til operasjonen synlige. De nyeste devTools viser hele kjeden av operasjoner og deres rot\u00e5rsaker.<\/p>\n

Google har konfigurert en console.createTask()-<\/strong> metode i Chrome 106. Denne metoden gj\u00f8r det mulig for rammeverk \u00e5 utf\u00f8re stabelsporinger p\u00e5 konsollen. \u00c5 feils\u00f8ke JavaScript ved hjelp av devtools er like enkelt som \u00e5 feils\u00f8ke CSS ved hjelp av chrome.<\/a><\/p>\n

\"Google<\/a><\/p>\n

5 Spor interaksjoner i ytelsespanelet<\/h2>\n

Spor nye interaksjoner i ytelsespanelet<\/strong> for \u00e5 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 \u00e5 identifisere kilden og avskj\u00e6re den deretter.<\/p>\n

\"Google<\/a><\/p>\n

6 LCP Timing Insights i ytelsespanelet<\/h2>\n

Tidsinformasjonen for den st\u00f8rste innholdsfulle malingen<\/strong> (LCP) er n\u00e5 tilgjengelig p\u00e5 panelet for ytelsesinnsikt<\/strong>. LCP<\/strong> er en viktig nettytelsesm\u00e5ling som rapporterer om gjengivelsestiden for bilder eller tekstblokker \u00e5 laste p\u00e5 nettsiden. 2,5 sekunder eller mindre er en god ytelsesscore.<\/p>\n

For \u00e5 se innsikten, naviger til ytelsespanel>3-dot-menu-more tolls> Ytelsesinnsikt<\/strong>. N\u00e5r du spiller av et opptak p\u00e5 nytt, vil detaljpanelet<\/strong> vise innlastingstidene.<\/p>\n

\"Google<\/a><\/p>\n

Ytterligere oppdateringer i Chrome 106<\/h2>\n

Andre forbedringer til Chrome 106 inkluderer:<\/p>\n