Fejlretning kan være kedeligt og endnu mere frustrerende, når du ikke nemt kan finde fejlen. Chrome 106-udviklerværktøjer (devtools) er indstillet til at forenkle fejlretningsprocessen, hvilket gør det nemmere og hurtigt.
Du kan nu nemt sortere i filer, optimere din søgning, skjule tredjepartsscripts, få adgang til dybdegående ydeevnerapporter og meget mere, der diskuteres i denne artikel. Disse devtools er essentielle, især for udviklere, der arbejder med JavaScript-rammer som f.eks Angular, React og Vue.js, som nu har en interaktiv og forenklet konsol til at visualisere og fejlfinde deres kode.
Lad os se nærmere på nogle af disse nye funktioner:
For at få fuldt udbytte af de nye opdateringer på Chrome 106 skal du downloade Chrome Kanariefugle, Dev, eller Beta versioner som din standard udviklingsbrowser. Du vil have adgang til de nyeste udviklerværktøjer, der muliggør test af webplatforms API'er og hurtigt identificere problemer eller fejl på dit websted for at sikre, at dine brugere får den bedste kundeoplevelse.
1. Filer grupperet efter Forfattet/Deployeret
Du kan nu navigere direkte til dine applikationskomponenter ved at gruppere filer på forfattet/udsendt på den kilde panel. Gå til Kilde > 3-punkts-menu > Grupper efter oprettet/implementeret. Nu, når du åbner filerne, kan du kun se dine installerede filer på panelet.
I tidligere Chrome-versioner var alle kildekodefilerne synlige i navigation panel, hvilket gør det svært at finde en enkelt fil.
2. Forenklet filsøgning
Du kan begrænse din søgning på kildepanelet til kun relevante filer. I tidligere versioner af Chrome ville filer genereret af frameworket og andre tredjeparter blive vist i søgeresultaterne, hvilket gjorde det svært at identificere søgeelementet.
Denne opdatering er devtools-versionen til at optimere din søgning på webbrowsere med Google-søgning snydeark. For at konfigurere denne indstilling skal du gå til 3-punktsmenu > Skjul ignoreringslistekilder.
Tredjeparts scripts fylder din konsol? Chrome 106 tilføjede en ignoreringslisteudvidelse i kildekortet for at give dig mulighed for at skjule scripts, der er automatisk genereret af frameworks og andre tredjeparter.
For at aktivere denne funktion, gå til Indstillinger > Ignorer liste > Tilføj automatisk kendte tredjepartsscripts til ignoreringslisten. Når du åbner filerne igen, viser konsollen kun relevante filer, der er knyttet til din applikation. Du kan nu se din kode uden distraktion.
4. Detaljerede stakspor
Du vil bruge mindre tid på at identificere en fejl på konsollen, takket være en ny funktion på Chrome 106. Chrome-udviklerværktøjer giver dig et detaljeret overblik over asynkrone operationer og deres grundlæggende årsager. I tidligere versioner var kun de begivenheder, der førte til operationen, synlige. De seneste devTools viser hele kæden af operationer og deres grundlæggende årsager.
Google har konfigureret en console.createTask() metode i Chrome 106. Denne metode gør det muligt for rammer at udføre stakspor på konsollen. Fejlretning af JavaScript ved hjælp af devtools er lige så nemt som fejlretning af CSS ved hjælp af chrome.
5. Spor interaktioner i ydeevnepanelet
Spor nye interaktioner i Ydeevne panel for at identificere potentielle reaktionsproblemer for din ansøgning. I Chrome 106 vises alle interaktioner i interaktionssporet efter en operation. Sporet viser kilden til interaktionerne og deres id'er. Sporing hjælper med at identificere kilden og opsnappe den i overensstemmelse hermed.
6. LCP Timing Insights i Performance Panel
Det Største indholdsrige maling (LCP) timing detaljer er nu tilgængelige på ydeevneindsigt panel. LCP er en vigtig web-ydeevnemåling, der rapporterer om gengivelsestiden for billeder eller tekstblokke at indlæse på websiden. 2,5 sek eller derunder er en god præstationsscore.
For at se indsigten skal du navigere til ydeevnepanel>3-dot-menu-more tolls>Ydeevneindsigt. Når du genafspiller en optagelse, detaljer panelet viser indlæsningstiderne.
Yderligere opdateringer i Chrome 106
Andre forbedringer til Chrome 106 omfatter:
- Du kan eksportere dine scriptoptagelser uden problemer fra Optager panel. Eksportknappen havde et problem i tidligere versioner.
- Du har nu en farvevælger i Stilarter rude SVG-elementer.
- Du kan identificere scripts, der forvrænger dit layout i Indsigt i ydeevne panel.
- Du kan vise stier til LCP-webskrifttyper i Indsigt i ydeevne panel.
Disse funktioner kan forbedre, hvordan du bruger browserens udviklingsværktøjer.
Hvad får du fra Chrome 106
De seneste forbedringer af devtools i Chrome 106 gør fejlfindingsprocessen hurtigere. De nye opdateringer gør det lettere at visualisere operationer gennem en forenklet og dynamisk konsol giver dig mulighed for at skjule filer, deaktivere scripts, optage og få en dybdegående visning af din applikation, når fejlretning.
Chrome 106's tilføjelser vil gøre dig i stand til at administrere din applikation og optimere dens ydeevne. Gå videre og nyd disse fordele ved at opdatere til den nyeste version af Chrome 106.
