Google erstellt Dart DevTools in Flutter von Grund auf neu

Flattern ist ein Plattformübergreifendes ProgrammierframeworkZiel ist es, die Probleme bei der Entwicklung plattformübergreifender Apps ohne den Aufwand von nicht-nativem Code zu lösen. Mit Kenntnissen der Programmiersprache Dart kann ein Entwickler Apps für Android, iOS, Web und Desktop mit einer einheitlichen Benutzeroberfläche erstellen. Flattern 1.9 brachte die macOS- und Catalina-Unterstützung in einen Alpha-Status, während die Version 1.12 hat ihre Unterstützung über den Pre-Alpha-Status hinaus ausgereift und das v1.17 von Flutter und v2.8 von Dart markierten ihre ersten stabilen Veröffentlichungen im Jahr 2020. Heute veröffentlicht Google eine neue Version des DevTools-Codes für Dart und Flutter, der in Flutter von Grund auf neu erstellt wurde und mehrere Verbesserungen enthält.

In der vorherigen Ankündigung hatte Google seine Absicht erwähnt, die aktuelle Version von Dart DevTools durch eine neue Flutter-Version auszutauschen. Dies ist nun geschehen, da die neuen DevTools in Flutter von Grund auf neu erstellt wurden. Diese neue Version von DevTools fügt Verbesserungen wie Änderungen an den Leistungs- und Speicherseiten sowie eine völlig neue Netzwerkseite hinzu.

Aber warum etwas umbauen, wenn es noch funktioniert? Das Team hinter Flutter behauptet, dass die Produktivitätsvorteile beim Aufbau hoher Leistung wichtig sind UIs, und der beste Weg, Vertrauen in diese Behauptungen zu demonstrieren, besteht darin, genau die gleichen Tools dafür zu verwenden sich. Die Neukonstruktion in Flutter ermöglicht es den Entwicklern auch, nach dem Schreiben des Codes ein Verteilungsmodell auszuwählen ist eine Abkehr vom aktuellen Entscheidungsflussdiagramm, bei dem das Verteilungsmodell dies vorschreiben würde Code.

DevTools wird als Webanwendung ausgeliefert, die die Integration des Tools in die vorhandene Tool-Erfahrung auf allen Geräten erleichtert Zielplattformen und IDEs. DevTools ist eine eigenständige Suite von Tools, die im Browser ausgeführt wird und für mobile Apps, Desktop-Apps und das Web funktioniert Apps.

DevTools umfasst die folgenden Funktionen:

• Flutter-Inspektor: ein Tool zum Visualisieren und Erkunden von Widget-Bäumen. Sie können Widgets in Ihrer laufenden App auswählen, alle Animationen verlangsamen, Textgrundlinien anzeigen und vieles mehr.
  • Eine der neuen Funktionen ist der Layout Explorer, den Sie auf der Registerkarte Flutter Inspector neben dem Detailbaum finden. Mit dem Layout Explorer können Sie das Flex-Layoutmodell von Flutter überprüfen. Das Team gibt ein Beispiel dafür, wie dieses Tool dabei helfen kann, Fehler zu beheben, warum beispielsweise eine Reihe von Widgets nicht so aussieht, wie es der Entwickler erwartet hatte.

• Zeitleistenansicht: Zeigt die Bauzeiten für jeden Frame und ein Flammendiagramm an. Dies erleichtert die Identifizierung problematischer Frames im Kontext.
  • Dieser Bereich enthält jetzt die neue Schaltfläche „Widget-Builds verfolgen“, die die Build-Zeiten aller Widgets hinzufügt Ihre App an die Zeitleiste (auf Kosten der Leistung Ihres Profilaufbaus – es ist also nicht vorbei). Standard). Dies ist praktisch, wenn Sie herausfinden möchten, welche Widgets sich genau hinter einem langsamen Frame befinden.

• Speicheransicht: zeigt Ihnen, wie Ihre App zu einem bestimmten Zeitpunkt Speicher nutzt.
  • Diese Ansicht zeigt jetzt eine Heatmap des zugewiesenen Speichers und ermöglicht auch die Verfolgung des Plattformspeichers.

• Leistungsansicht: Dies ist ein herkömmlicher CPU-Profiler. Damit können Sie eine Sitzung Ihrer App aufzeichnen und sehen, mit welchen Funktionen die CPU die meiste Zeit verbracht hat. Auf dieser Grundlage können Sie entscheiden, wo Sie Ihre Zeit mit der Optimierung verbringen möchten.
• DevTools enthält sogar ein eigenes Debugger. Dies kann nützlich sein, wenn Sie keine IDE verwenden, aber dennoch die Möglichkeit haben möchten, Haltepunkte hinzuzufügen, den Code schrittweise zu durchlaufen, einen Blick auf Variablenwerte zu werfen usw.

• Netzwerkansicht: Das ist völlig neu.
  • Wie der Name schon sagt, können Sie damit den Netzwerkverkehr überprüfen. Sie können den gesamten Verlauf der Anfragen sehen, die Ihre App seit dem Start gestellt hat, und detaillierte Informationen zu jeder einzelnen Anfrage erhalten. Dadurch müssen Sie diese Ereignisse nicht selbst protokollieren, wenn Sie versuchen, ein Netzwerkproblem zu beheben.
  • Auf der Registerkarte „Netzwerk“ wird derzeit HTTP-Verkehr angezeigt. Zu den zukünftigen Verbesserungen gehört die Anzeige allgemeiner Socket-I/O-Verkehr.
  • Netzwerkanfragen werden auch in der Zeitleistenansicht angezeigt, sodass Sie sie im Kontext sehen können.
• Protokollansicht: Zeigt Ereignisse aus Ihrer App und dem Framework an. Damit können Sie Nachrichten einfach filtern (Sie können beispielsweise „-gc“ angeben, um Garbage Collector-Ereignisse herauszufiltern, oder „flutter.frame“, um nur Frame-Ereignisse anzuzeigen). Protokollieren von Nachrichten in Dart kann strukturiert werden, und die Protokollierungsansicht macht davon Gebrauch.

Um DevTools vollständig zu nutzen, können Sie die lesen Dokumentation. Wenn Sie Fehler finden oder über neue Funktionen abstimmen möchten, können Sie dies tun GitHub.