New tools for Flutter developers, built in Flutter
Why we rebuilt Dart DevTools from scratch in Flutter
By: Filip Hracek & Chris Sells
Today, we’re releasing a new version of Dart DevTools, our suite of tools for debugging and performance analysis for Dart and Flutter code. It has been rebuilt from scratch in Flutter. This version adds several improvements, such as updates to the performance and memory pages, and a completely new network page.
Many people know Flutter for its hot reload feature that lets you make changes to your mobile app while it’s running. But hot reload is but one of a suite of tools that we provide to help you write, test, debug, and analyze your app.
Let’s first take a moment to discuss why we rebuilt DevTools in the first place. The short answer is productivity and quality. The Flutter team understands the productivity benefits of Flutter when building beautiful, high performance UIs — and we want those benefits for ourselves. This productivity has enabled us to not only rebuild DevTools but also to add big new features along the way.
We chose to ship DevTools as a web application, since it is easy for us to integrate into the existing tooling experience across all of our target platforms and IDEs. Building with the web in mind has also enabled us to walk in the shoes of our customers; in doing so, we’ve learned about (and fixed) some performance issues, such as scrolling performance.
We have also been evaluating the benefits of shipping DevTools as compiled desktop apps and so far the results are promising. One major benefit of choosing Flutter is that selecting a distribution model is something we can do after we’ve written the code, rather than the first decision we have to make. Many customers also tell us that this is an attractive capability of Flutter.
Now that we’ve discussed a little bit about the near past and new future of DevTools, let’s dive into a quick overview of all of the major tools available to every Flutter developer. Because DevTools is not the only tool worthy of your attention.
The basics
Of course, there’s the flutter tool, which runs your app in debug mode, performs hot reload, builds APKs and IPAs, and more. The flutter tool is written in Dart, and runs on the command line, so that you can use Flutter no matter which operating system or editor you prefer.
The Dart analysis server provides static analysis and intelligence in a variety of IDEs. This means that you get code completion …
… error highlights that link to documentation on how to fix them …
… and smart lints.
The analysis server can also use the Language Server Protocol, which means all the developer tools that use it (and there are many) can easily support it.
UI code helpers
With Flutter, you build UI in code by creating widget trees. This means that a lot of Dart code is in the form of nested constructors like the following:
return MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
),
body: Column(
...
),
),
);Flutter tooling makes it easier to work with code like this. UI guides highlight the widget tree that you are building.
Trailing comments can show which closing bracket belongs to which widget.
Smart refactoring helps you modify the tree in a few strokes, such as wrapping a part of it with a new parent …
… and moving widgets around.
DevTools
And then there are DevTools, a standalone suite of tools that run in the browser. They provide additional telemetry and functionality that isn’t practical to show in the IDE.
The DevTools we’re launching this week are written in Flutter. (They were previously written in Dart, but not using the Flutter framework.) This was a complete rewrite from scratch, which brought opportunities to improve the UI and add completely new features.
The first tab is the Flutter Inspector, which is a tool for visualizing and exploring Flutter widget trees. From here, you can select widgets in your running app, slow down all animations, see text baselines, and more.
One of the new features is the Layout Explorer, which you can find in the Flutter Inspector tab next to the Details Tree. The Layout Explorer lets you inspect Flutter’s flex layout model. This can be a lifesaver when you’re unsure why a row of widgets doesn’t look the way you expected, for example, or why you’re getting the “RenderFlex overflowed by 42 pixels” error.
Next to the Flutter Inspector tab, you’ll find three tabs dedicated to performance profiling: the Timeline view, the Memory view, and the Performance view.
The Timeline view now shows build times for each frame as well as a flame chart. This makes it easy to identify problematic frames while seeing them in context.
The Timeline pane also has the new Track Widget Builds button, which adds build times of all widgets in your app to the timeline (at the expense of performance of your profile build — which is why it’s not on by default). This is handy when you’re trying to find out which widgets, exactly, are behind a slow frame.
The Memory view lets you peek at 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 as well.
The Performance view 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, overall. This is generally used to decide where to spend optimization efforts.
DevTools even includes its own Debugger. This can be useful if you are not using an IDE for development, but still want the option to add breakpoints, step through the code, peek at variable values, and so on.
The next tab is completely new. The Network view lets you inspect, you guessed it, network traffic. You can see the whole history of requests that your app made since it started, and 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.
You’ll now also find network requests in the Timeline view, so that you can see them in context.
The 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.
DevTools work for mobile apps, desktop apps, and web apps.
The rewrite of DevTools to Flutter has many benefits: increased productivity, walking in the shoes of our customers, and freedom of choice of target platforms. One benefit we haven’t mentioned: rebuilding DevTools in Flutter invites the community to contribute more easily. DevTools was always developed in the open, but today, most users will be familiar with its structure (starting with runApp(DevToolsApp(…)) in lib/main.dart).
Summary
Tooling is vitally important for the Flutter developer experience. We invest heavily in making it better every day. But we can only do this with your feedback.
So upgrade to the newest DevTools today, and test it out on your app. Read the documentation to learn about all the hidden gems. File bugs if you find them, or vote for new features on GitHub.
We hope the new DevTools make your Flutter development experience more enjoyable.
