Google genopbygger Dart DevTools fra bunden i Flutter

Flutter er en programmeringsramme på tværs af platforme, der sigter mod at løse problemerne ved at udvikle apps på tværs af platforme uden rodet med ikke-native kode. Med kendskab til Dart-programmeringssproget kan en udvikler bygge apps til Android, iOS, web og desktop med en samlet brugergrænseflade på tværs af alle. Flutter 1.9 bragte macOS og Catalina-understøttelse i en alfatilstand, mens den v1.12-udgivelsen modnede deres støtte forbi præ-alfa-tilstanden og v1.17 af Flutter og v2.8 af Dart markerede deres første stabile udgivelser i 2020. I dag udgiver Google en ny version af DevTools til Dart og Flutter-kode, der er blevet genopbygget fra bunden i Flutter og kommer med adskillige forbedringer.

I den tidligere meddelelse havde Google nævnt sin hensigt om at udskifte den nuværende version af Dart DevTools med en ny Flutter-version. Dette er nu sket, da de nye DevTools er blevet genopbygget fra bunden i Flutter. Denne nye version af DevTools tilføjer forbedringer såsom ændringer til ydeevne- og hukommelsessiderne samt en helt ny netværksside.

Men hvorfor bygge noget om, når det stadig virker? Holdet bag Flutter hævder, at produktivitetsfordelene er vigtige, når man bygger højtydende UI'er, og den bedste måde at vise tillid til disse påstande er at anvende de samme værktøjer til dem selv. Genopbygning i Flutter gør det også muligt for udviklerne at vælge en distributionsmodel efter at have skrevet koden, hvilket er en afvigelse fra det nuværende flowchart for beslutningstagning, hvor distributionsmodellen ville diktere kode.

DevTools leveres som en webapplikation, der gør det nemmere at integrere værktøjet i den eksisterende værktøjsoplevelse på tværs af alle målplatforme og IDE'er. DevTools er en selvstændig suite af værktøjer, der kører i browseren, og den fungerer til mobilapps, desktop-apps og web apps.

DevTools inkorporerer følgende funktioner:

• Flutter Inspektør: et værktøj til at visualisere og udforske widgettræer. Du kan vælge widgets i din løbeapp, sænke alle animationer, se tekstgrundlinjer og mere.
  • En af de nye funktioner er Layout Explorer, som du kan finde på fanen Flutter Inspector ved siden af ​​Details Tree. Layout Explorer lader dig inspicere Flutters flex layoutmodel. Holdet giver et eksempel på, hvordan dette værktøj kan hjælpe med at fejlfinde, hvorfor en række widgets ikke ser ud, som udvikleren havde forventet, for eksempel.

• Tidslinjevisning: viser byggetider for hver ramme og et flammediagram. Dette gør det nemt at identificere problematiske rammer i kontekst.
  • Denne rude inkorporerer nu den nye Track Widget Builds-knap, som tilføjer byggetider for alle widgets i din app til tidslinjen (på bekostning af ydeevnen af ​​din profilopbygning – så den er ikke klar Standard). Dette er praktisk, når du forsøger at finde ud af, hvilke widgets, der præcist er bag en langsom ramme.

• Hukommelsesvisning: viser dig, hvordan din app bruger hukommelse på et givet tidspunkt.
  • Denne visning viser nu et varmekort over den tildelte hukommelse og tillader også sporing af platformshukommelse.

• Ydeevnevisning: Dette er en traditionel CPU-profiler. Det lader dig optage en session af din app og se, i hvilke funktioner CPU'en brugte det meste af sin tid. Du kan bruge dette til at bestemme, hvor du skal bruge din tid på at optimere.
• DevTools inkluderer endda sine egne Debugger. Dette kan være nyttigt, hvis du ikke bruger en IDE, men stadig vil have muligheden for at tilføje brudpunkter, gå gennem kode, kigge på variable værdier og så videre.

• Netværksvisning: Dette er helt nyt.
  • Som navnet antyder, giver det dig mulighed for at inspicere netværkstrafik. Du kan se hele historikken for anmodninger, som din app har lavet, siden den startede, og få detaljerede oplysninger om hver enkelt. Dette frigør dig fra at skulle logge disse hændelser på egen hånd, når du forsøger at fejlfinde et netværksproblem.
  • Fanen Netværk viser i øjeblikket HTTP-trafik; fremtidige forbedringer inkluderer visning generel socket I/O trafik.
  • Netværksanmodninger vises også i tidslinjevisningen, så du kan se dem i kontekst.
• Logningsvisning: viser begivenheder fra din app og rammen. Med den kan du nemt filtrere beskeder (du kan f.eks. angive "-gc" for at bortfiltrere Garbage Collector-begivenheder eller "flutter.frame" for kun at vise frame-begivenheder). I Dart, logger beskeder kan struktureres, og logningsvisningen gør brug af det.

For at gøre fuld brug af DevTools kan du læse dokumentation. Hvis du finder nogle fejl, eller hvis du vil stemme på nye funktioner, kan du gøre det videre GitHub.