Google gjenoppbygger Dart DevTools fra bunnen av i Flutter

Flutter er en programmeringsramme på tvers av plattformer, med sikte på å løse problemene med å utvikle apper på tvers av plattformer uten rotet med ikke-innfødt kode. Med kunnskap om programmeringsspråket Dart kan en utvikler bygge apper for Android, iOS, web og skrivebord med et enhetlig brukergrensesnitt på tvers av alle. Flutter 1.9 brakte støtte for macOS og Catalina i en alfatilstand mens v1.12-utgivelsen modnet deres støtte forbi pre-alfa-tilstanden og v1.17 av Flutter og v2.8 av Dart markerte deres første stabile utgivelser i 2020. I dag slipper Google en ny versjon av DevTools for Dart og Flutter-kode, som er gjenoppbygd fra bunnen av i Flutter og kommer med flere forbedringer.

I forrige kunngjøring hadde Google nevnt sin intensjon om å bytte ut den nåværende versjonen av Dart DevTools med en ny Flutter-versjon. Dette har nå skjedd ettersom de nye DevTools har blitt gjenoppbygd fra bunnen av i Flutter. Denne nye versjonen av DevTools legger til forbedringer som endringer i ytelses- og minnesidene, samt en helt ny nettverksside.

Men hvorfor bygge om noe når det fortsatt fungerer? Teamet bak Flutter hevder at produktivitetsfordelene er viktige når man bygger høy ytelse brukergrensesnitt, og den beste måten å vise tillit til disse påstandene på er å ta i bruk de samme verktøyene for dem selv. Gjenoppbygging i Flutter gjør det også mulig for utviklerne å velge en distribusjonsmodell etter å ha skrevet koden, som er et avvik fra gjeldende beslutningsflytskjema der distribusjonsmodellen vil diktere kode.

DevTools leveres som en nettapplikasjon som gjør det enklere å integrere verktøyet i den eksisterende verktøyopplevelsen på tvers av alle målplattformer og IDE-er. DevTools er en frittstående pakke med verktøy som kjører i nettleseren, og den fungerer for mobilapper, skrivebordsapper og web apper.

DevTools inneholder følgende funksjoner:

• Flutterinspektør: et verktøy for å visualisere og utforske widgettrær. Du kan velge widgets i løpeappen din, bremse ned alle animasjoner, se tekstgrunnlinjer og mer.
  • En av de nye funksjonene er Layout Explorer som du finner i Flutter Inspector-fanen ved siden av Detailstree. Layout Explorer lar deg inspisere Flutters flex layout-modell. Teamet gir et eksempel på hvordan dette verktøyet kan hjelpe med å feilsøke hvorfor en rad med widgets ikke ser ut slik utvikleren hadde forventet, for eksempel.

• Tidslinjevisning: viser byggetider for hver ramme og et flammediagram. Dette gjør det enkelt å identifisere problematiske rammer i kontekst.
  • Denne ruten inneholder nå den nye Track Widget Builds-knappen som legger til byggetider for alle widgets i appen din til tidslinjen (på bekostning av ytelsen til profilbyggingen din – så den er ikke klar misligholde). Dette er nyttig når du prøver å finne ut hvilke widgets som er bak en treg ramme.

• Minnevisning: viser deg hvordan appen din bruker minne på et gitt øyeblikk.
  • Denne visningen viser nå et varmekart over det tildelte minnet og tillater også sporingsplattformminne.

• Ytelsesvisning: Dette er en tradisjonell CPU-profiler. Den lar deg ta opp en økt med appen din og se i hvilke funksjoner CPU brukte mesteparten av tiden sin. Du kan bruke dette til å bestemme hvor du skal bruke tiden din på å optimalisere.
• DevTools inkluderer til og med sine egne Debugger. Dette kan være nyttig hvis du ikke bruker en IDE, men fortsatt vil ha muligheten til å legge til bruddpunkter, gå gjennom kode, kikke på variable verdier og så videre.

• Nettverksvisning: Dette er helt nytt.
  • Som navnet tilsier, lar den deg inspisere nettverkstrafikk. Du kan se hele loggen over forespørsler som appen din har gjort siden den startet og få detaljert informasjon om hver enkelt. Dette frigjør deg fra å måtte logge disse hendelsene på egen hånd når du prøver å feilsøke et nettverksproblem.
  • Nettverk-fanen viser for øyeblikket HTTP-trafikk; fremtidige forbedringer inkluderer visning generell socket I/O-trafikk.
  • Nettverksforespørsler vises også i tidslinjevisningen slik at du kan se dem i kontekst.
• Loggvisning: viser hendelser fra appen din og rammeverket. Med den kan du enkelt filtrere meldinger (du kan for eksempel spesifisere "-gc" for å filtrere bort Garbage Collector-hendelser eller "flutter.frame" for kun å vise frame-hendelser). Logge meldinger i Dart kan struktureres, og Logging-visningen bruker det.

For å gjøre fullstendig bruk av DevTools, kan du lese dokumentasjon. Hvis du finner noen feil, eller hvis du vil stemme på nye funksjoner, kan du gjøre det videre GitHub.