Google bouwt Dart DevTools helemaal opnieuw op in Flutter

Flutter is een platformonafhankelijk programmeerframework, met als doel de problemen van het ontwikkelen van platformonafhankelijke apps op te lossen zonder de rommel van niet-native code. Met kennis van de Dart-programmeertaal kan een ontwikkelaar apps bouwen voor Android, iOS, internet en desktop met een uniforme gebruikersinterface. Fladderen 1.9 bracht macOS- en Catalina-ondersteuning in een alfastatus terwijl de v1.12-release bracht hun ondersteuning voorbij de pre-alpha-status en de v1.17 van Flutter en v2.8 van Dart markeerden hun eerste stabiele releases in 2020. Vandaag brengt Google een nieuwe versie uit van DevTools voor Dart- en Flutter-code, die helemaal opnieuw is opgebouwd in Flutter en verschillende verbeteringen bevat.

In de vorige aankondiging had Google aangegeven dat het van plan was de huidige versie van Dart DevTools te vervangen door een nieuwe Flutter-versie. Dit is nu gebeurd omdat de nieuwe DevTools helemaal opnieuw is opgebouwd in Flutter. Deze nieuwe versie van DevTools voegt verbeteringen toe, zoals wijzigingen in de prestatie- en geheugenpagina's, evenals een geheel nieuwe netwerkpagina.

Maar waarom iets opnieuw opbouwen als het nog werkt? Het team achter Flutter beweert dat de productiviteitsvoordelen belangrijk zijn bij het bouwen van hoge prestaties UI’s, en de beste manier om vertrouwen in deze claims te tonen is door precies dezelfde tools te gebruiken zich. Door opnieuw te bouwen in Flutter kunnen de ontwikkelaars na het schrijven van de code een distributiemodel selecteren is een afwijking van het huidige besluitvormingsstroomschema waarin het distributiemodel de verdeling zou dicteren code.

DevTools wordt geleverd als een webapplicatie die het eenvoudiger maakt om de tool te integreren in de bestaande toolingervaring op alle doelplatforms en IDE's. DevTools is een zelfstandig pakket met tools dat in de browser draait en werkt voor mobiele apps, desktop-apps en internet apps.

DevTools bevat de volgende functies:

• Flutter-inspecteur: een hulpmiddel om widgetbomen te visualiseren en te verkennen. U kunt widgets selecteren in uw actieve app, alle animaties vertragen, tekstbasislijnen bekijken en meer.
  • Een van de nieuwe functies is Layout Explorer, die u kunt vinden op het tabblad Flutter Inspector naast Details Tree. Met Layout Explorer kunt u het flexibele lay-outmodel van Flutter inspecteren. Het team geeft een voorbeeld van hoe deze tool kan helpen bij het debuggen waarom een ​​rij widgets er bijvoorbeeld niet uitziet zoals de ontwikkelaar had verwacht.

• Tijdlijnweergave: toont bouwtijden voor elk frame en een vlammengrafiek. Dit maakt het gemakkelijk om problematische frames in hun context te identificeren.
  • Dit paneel bevat nu de nieuwe knop Track Widget Builds, die de bouwtijden van alle widgets toevoegt uw app naar de tijdlijn (ten koste van de prestaties van uw profielopbouw, zodat deze niet doorgaat). standaard). Dit is handig als u probeert uit te vinden welke widgets zich precies achter een langzaam frame bevinden.

• Geheugenweergave: laat zien hoe uw app op een bepaald moment geheugen gebruikt.
  • Deze weergave toont nu een heatmap van het toegewezen geheugen en maakt het ook mogelijk om platformgeheugen te volgen.

• Prestatieweergave: Dit is een traditionele CPU-profiler. Hiermee kunt u een sessie van uw app opnemen en zien in welke functies de CPU de meeste tijd heeft doorgebracht. U kunt dit gebruiken om te beslissen waar u uw tijd aan het optimaliseren wilt besteden.
• DevTools bevat zelfs zijn eigen Debugger. Dit kan handig zijn als u geen IDE gebruikt, maar toch de mogelijkheid wilt hebben om breekpunten toe te voegen, door de code te stappen, naar variabelewaarden te kijken, enzovoort.

• Netwerkweergave: dit is volledig nieuw.
  • Zoals de naam al aangeeft, kunt u hiermee het netwerkverkeer inspecteren. U kunt de hele geschiedenis bekijken van verzoeken die uw app heeft gedaan sinds de start ervan, en gedetailleerde informatie over elk verzoek krijgen. Hierdoor hoeft u deze gebeurtenissen niet zelf te registreren wanneer u probeert een netwerkprobleem op te lossen.
  • Het tabblad Netwerk toont momenteel HTTP-verkeer; toekomstige verbeteringen omvatten tonen algemeen socket I/O-verkeer.
  • Netwerkverzoeken worden ook weergegeven in de tijdlijnweergave, zodat u ze in hun context kunt zien.
• Logboekweergave: toont gebeurtenissen uit uw app en het raamwerk. Hiermee kun je eenvoudig berichten filteren (je kunt bijvoorbeeld "-gc" opgeven om Garbage Collector-gebeurtenissen uit te filteren of "flutter.frame" om alleen frame-gebeurtenissen weer te geven). In Dart, berichten loggen gestructureerd kan worden, en de weergave Logging maakt daar gebruik van.

Om volledig gebruik te maken van DevTools, kunt u de documentatie. Als u bugs tegenkomt of als u op nieuwe functies wilt stemmen, kunt u dat doen GitHub.