Google gör felsökning enklare med nya funktioner i Devtools Chrome 106

Felsökning kan vara tråkigt och ännu mer frustrerande när du inte lätt kan hitta felet. Chrome 106-utvecklarverktyg (devtools) är inställda för att förenkla felsökningsprocessen, vilket gör det enklare och snabbt.

Du kan nu enkelt sortera igenom filer, optimera din sökning, dölja tredjepartsskript, få tillgång till djupgående resultatrapporter och mycket mer som diskuteras i den här artikeln. Dessa devtools är viktiga, särskilt för utvecklare som arbetar med JavaScript-ramverk som Angular, React och Vue.js, som nu har en interaktiv och förenklad konsol för att visualisera och felsöka sin kod.

Låt oss ta en närmare titt på några av dessa nya funktioner:

För att dra full nytta av de nya uppdateringarna på Chrome 106, ladda ner Chrome Canary, Dev eller Beta- versionerna som din standardutvecklingswebbläsare. Du kommer att ha tillgång till de senaste utvecklarverktygen som möjliggör testning av webbplattformens API:er och snabbt identifiera problem eller buggar på din webbplats för att säkerställa att dina användare får den bästa kundupplevelsen.

Du kan nu navigera direkt till dina programkomponenter genom att gruppera filer på authored/deployed på källpanelen. Gå till Källa > 3-punktsmeny > Gruppera efter författare/distribuerade. Nu när du öppnar filerna kan du bara se dina distribuerade filer på panelen.

I tidigare Chrome-versioner var alla källkodsfiler synliga i navigeringspanelen, vilket gjorde det svårt att hitta en enda fil.

2 Förenklad filsökning

Du kan begränsa din sökning på källpanelen till endast relevanta filer. I tidigare versioner av Chrome visades filer som genererats av ramverket och andra tredje parter i sökresultaten, vilket gjorde det svårt att identifiera sökobjektet.

Den här uppdateringen är devtools-versionen för att optimera din sökning i webbläsare med Googles sökfuskblad. För att konfigurera den här inställningen, gå till menyn med tre punkter > Dölj källor i ignoreringslistan .

3 Dölj skript från tredje part

Tredjepartsskript fyller upp din konsol? Chrome 106 lade till ett ignoreringslistatillägg i källkartan för att du ska kunna dölja skript som genereras automatiskt av ramverk och andra tredje parter.

För att aktivera den här funktionen, gå till Inställningar > Ignorera lista > Lägg automatiskt till kända tredjepartsskript till ignoreringslistan. När du öppnar filerna igen visar konsolen endast relevanta filer som är kopplade till din applikation. Du kan nu se din kod utan distraktion.

4 Detaljerade stackspår

Du kommer att ta kortare tid att identifiera ett fel på konsolen, tack vare en ny funktion på Chrome 106. Chrome Developer-verktyg ger dig en detaljerad bild av asynkrona operationer och deras grundorsaker. I tidigare versioner var endast de händelser som ledde till operationen synliga. De senaste devTools visar hela kedjan av operationer och deras grundorsaker.

Google har konfigurerat en console.createTask()- metod i Chrome 106. Denna metod gör det möjligt för ramverk att utföra stackspårningar på konsolen. Att felsöka JavaScript med hjälp av devtools är lika enkelt som att felsöka CSS med chrome.

5 Spåra interaktioner i prestandapanelen

Spåra nya interaktioner i prestandapanelen för att identifiera potentiella svarsproblem för din applikation. I Chrome 106 visas alla interaktioner i interaktionsspåret efter en operation. Spåret visar källan till interaktionerna och deras ID. Spårning hjälper till att identifiera källan och fånga upp den därefter.

6 LCP Timing Insights i prestandapanelen

Tidsinformationen för den största innehållsfulla färgen (LCP) är nu tillgänglig på panelen för prestandainsikter. LCP är ett viktigt mätvärde för webbprestanda som rapporterar hur lång tid det tar att ladda bilder eller textblock på webbsidan. 2,5 sekunder eller lägre är ett bra resultat.

För att se insikterna, navigera till prestandapanelen>3-dot-menu-more tolls>prestandainsikter. När du spelar upp en inspelning igen visar panelen Detaljer laddningstiderna.

Ytterligare uppdateringar i Chrome 106

Andra förbättringar av Chrome 106 inkluderar:

• Du kan exportera dina skriptinspelningar utan problem från inspelningspanelen. Exportknappen hade ett problem i tidigare versioner.
• Du har nu en färgväljare i SVG-elementen i stilrutan.
• Du kan identifiera skript som förvränger din layout i panelen Performance Insights .
• Du kan visa sökvägar för LCP-webbteckensnitt i panelen Performance Insights .

Dessa funktioner kan förbättra hur du använder webbläsarens utvecklingsverktyg.

Vad du får från Chrome 106

De senaste förbättringarna av devtools i Chrome 106 gör felsökningsprocessen snabbare. De nya uppdateringarna gör det enklare att visualisera verksamheten genom en förenklad och dynamisk konsol som låter dig dölja filer, inaktivera skript, spela in och ha en fördjupad bild av din applikation vid felsökning.

Chrome 106:s tillägg gör att du kan hantera din applikation och optimera dess prestanda. Gå vidare och njut av dessa fördelar genom att uppdatera till den senaste versionen av Chrome 106.