Google bygger om Dart DevTools från grunden i Flutter

Flutter är en plattformsoberoende programmeringsram, som syftar till att lösa problemen med att utveckla plattformsoberoende appar utan röran med icke-infödd kod. Med kunskap om programmeringsspråket Dart kan en utvecklare bygga appar för Android, iOS, webben och skrivbordet med ett enhetligt användargränssnitt för alla. Fladder 1.9 tog stöd för macOS och Catalina i ett alfaläge medan v1.12-versionen mognade deras stöd förbi pre-alfa-tillståndet och den v1.17 av Flutter och v2.8 av Dart markerade sina första stabila releaser 2020. Idag släpper Google en ny version av DevTools for Dart och Flutter-kod, som har byggts om från grunden i Flutter och kommer med flera förbättringar.

I det tidigare tillkännagivandet hade Google nämnt sin avsikt att byta ut den nuvarande versionen av Dart DevTools med en ny Flutter-version. Detta har nu hänt när de nya DevTools har byggts om från grunden i Flutter. Den här nya versionen av DevTools lägger till förbättringar som ändringar av prestanda- och minnessidorna, samt en helt ny nätverkssida.

Men varför bygga om något när det fortfarande fungerar? Teamet bakom Flutter hävdar att produktivitetsfördelarna är viktiga när man bygger högpresterande Användargränssnitt, och det bästa sättet att visa förtroende för dessa påståenden är att använda samma verktyg för sig själva. Ombyggnad i Flutter gör det också möjligt för utvecklarna att välja en distributionsmodell efter att ha skrivit koden, vilket är ett avsteg från det nuvarande flödesschemat för beslutsfattande där distributionsmodellen skulle diktera koda.

DevTools levereras som en webbapplikation som gör det lättare att integrera verktyget i den befintliga verktygsupplevelsen i alla målplattformar och IDE: er. DevTools är en fristående svit med verktyg som körs i webbläsaren och den fungerar för mobilappar, skrivbordsappar och webben appar.

DevTools innehåller följande funktioner:

• Flutterinspektör: ett verktyg för att visualisera och utforska widgetträd. Du kan välja widgets i din löpapp, sakta ner alla animationer, se textbaslinjer och mer.
  • En av de nya funktionerna är Layout Explorer som du hittar på fliken Flutter Inspector bredvid Details Tree. Layout Explorer låter dig inspektera Flutters flex layoutmodell. Teamet ger ett exempel på hur det här verktyget kan hjälpa till att felsöka varför en rad med widgets inte ser ut som utvecklaren hade förväntat sig, till exempel.

• Tidslinjevy: visar byggtider för varje ram och ett flamdiagram. Detta gör det enkelt att identifiera problematiska ramar i sitt sammanhang.
  • Den här rutan innehåller nu den nya knappen Track Widget Builds som lägger till byggtider för alla widgets i din app till tidslinjen (på bekostnad av prestandan för din profilbyggnad – så den är inte på väg standard). Det här är praktiskt när du försöker ta reda på vilka widgets som ligger bakom en långsam ram.

• Minnesvy: visar hur din app använder minnet vid ett givet ögonblick.
  • Denna vy visar nu en värmekarta över det tilldelade minnet och tillåter spårningsplattformsminne också.

• Prestandavy: Detta är en traditionell CPU-profilerare. Den låter dig spela in en session av din app och se i vilka funktioner processorn tillbringade större delen av sin tid. Du kan använda detta för att bestämma var du ska lägga din tid på att optimera.
• DevTools inkluderar till och med sina egna Debugger. Detta kan vara användbart om du inte använder en IDE men ändå vill ha möjlighet att lägga till brytpunkter, stega igenom kod, kika på variabelvärden och så vidare.

• Nätverksvy: Detta är helt nytt.
  • Som namnet antyder låter den dig inspektera nätverkstrafik. Du kan se hela historiken över förfrågningar som din app gjorde sedan den startade och få detaljerad information om var och en. Detta befriar dig från att behöva logga dessa händelser på egen hand när du försöker felsöka ett nätverksproblem.
  • Fliken Nätverk visar för närvarande HTTP-trafik; framtida förbättringar inkluderar visning allmän socket I/O-trafik.
  • Nätverksbegäranden visas också i tidslinjevyn så att du kan se dem i sitt sammanhang.
• Loggningsvy: visar händelser från din app och ramverket. Med den kan du enkelt filtrera meddelanden (du kan till exempel ange "-gc" för att filtrera bort Garbage Collector-händelser eller "flutter.frame" för att bara visa ramhändelser). Logga meddelanden i Dart kan struktureras, och Loggningsvyn använder sig av det.

För att använda DevTools fullständigt kan du läsa dokumentation. Om du hittar några buggar, eller om du vill rösta på nya funktioner, kan du göra det vidare GitHub.