Google rebuilds DevTools from scratch in Flutter for better performance and greater versatility

Flutter is a cross-platform programming framework, aiming to solve the woes of developing cross-platform apps without the mess of non-native code. With knowledge of the Dart programming language, a developer can build apps for Android, iOS, web, and desktop with a unified UI across all. Flutter 1.9 brought macOS and Catalina support in an alpha state while the v1.12 release matured their support past the pre-alpha state and the v1.17 of Flutter and v2.8 of Dart marked their first stable releases in 2020. Today, Google is releasing a new version of DevTools for Dart and Flutter code, that has been rebuilt from scratch in Flutter and comes with several improvements.

In the previous announcement, Google had mentioned its intent of swapping out the current version of Dart DevTools with a new Flutter version. This has now happened as the new DevTools has been rebuilt from scratch in Flutter. This new version of DevTools adds improvements such as changes to the performance and memory pages, as well as a completely new network page.

But why rebuild something when it still works? The team behind Flutter claims that the productivity benefits are important when building high-performance UIs, and the best way to demonstrate confidence in these claims is to adopt the very same tools for themselves. Rebuilding in Flutter also enables the developers to select a distribution model after writing the code, which is a departure from the current decision-making flowchart wherein the distribution model would dictate the code.

DevTools is shipping as a web application that makes it easier to integrate the tool into the existing tooling experience across all of the target platforms and IDEs. DevTools is a standalone suite of tools that runs in the browser, and it works for mobile apps, desktop apps, and web apps.

DevTools incorporates the following features:

• Flutter Inspector: a tool to visualize and explore widget trees. You can select widgets in your running app, slow down all animations, see text baselines, and more.
  • One of the new features is Layout Explorer which you can find in the Flutter Inspector tab next to Details Tree. Layout Explorer lets you inspect Flutter’s flex layout model. The team gives an example of how this tool can help debug why a row of widgets doesn’t look the way the developer had expected, for instance.

Flutter Inspector

• Timeline view: shows build times for each frame and a flame chart. This makes it easy to identify problematic frames in context.
  • This pane now incorporates the new Track Widget Builds button which adds build times of all widgets in your app to the timeline (at the expense of the performance of your profile build—so it’s not on by default). This is handy when you’re trying to find out which widgets, exactly, are behind a slow frame.

Frame Rendering Chart

• Memory view: shows you how your app is using memory at a given moment.
  • This view now shows a heatmap of the allocated memory and allows tracking platform memory too.

Memory Anatomy

• Performance view: This is a traditional CPU profiler. It lets you record a session of your app and see in which functions the CPU spent most of its time. You can use this to decide where to spend your time optimizing.
• DevTools even includes its own Debugger. This can be useful if you are not using an IDE but still want the option to add breakpoints, step through code, peek at variable values, and so on.

Debugger

• Network view: This is completely new.
  • As its name would imply, it lets you inspect network traffic. You can see the whole history of requests that your app made since it started and get detailed information about each one. This frees you from having to log these events on your own when trying to debug a network issue.
  • The Network tab currently shows HTTP traffic; future improvements include showing general socket I/O traffic.
  • Network requests are also shown in the Timeline view so you can see them in context.
• Logging view: shows events from your app and the framework. With it, you can easily filter messages (for example, you can specify “-gc” to filter out Garbage Collector events or “flutter.frame” to only show frame events). In Dart, logging messages can be structured, and the Logging view makes use of that.

To make complete use of DevTools, you can read the documentation. If you find any bugs, or if you want to vote on new features, you can do so on GitHub.

The post Google rebuilds DevTools from scratch in Flutter for better performance and greater versatility appeared first on xda-developers.

from xda-developers https://ift.tt/2Ve7D9k
via IFTTT