Mastering Dart & Flutter DevTools — Part 1: Introduction & Installation
by Ashita Prasad (LinkedIn, Twitter), fluttergems.dev
After building a full-fledged feature rich Flutter app, you might experience an urge to build a release bundle, upload it on the app store or play store and share it with the world.
But, hold on my friend! You forgot a critical step.
Did you ensure that your app:
- Provides a great user experience?
- Works seamlessly regardless of the device?
- Will not slow down or crash?
- Is high performance — optimized for speed, uses minimum resources, low network data usage, etc.?
You can get an answer to all these questions by analysing various app performance metrics that have a direct impact on the app’s user experience.
Looks like a lot of additional work, right?
Nope, it isn’t!
Dart & Flutter ship with a range of performance and debugging tools, that are collectively known as DevTools. These tools can help you collect, monitor and analyze various metrics that can help you build a high performance app.
This is the first part of the series of in-depth articles, which will help you master each and every tool in the DevTools suite using real world apps as case studies. The objective of this article is to introduce DevTools and help you activate and launch it. In case you have already setup DevTools, and you wish to directly learn a particular tool, just click on the corresponding link below:
- Part 1: Introduction & Installation [You are Here]
- Part 2: Flutter Inspector
- Part 3: App Size Tool
- Part 4: Network View
- Part 5: Logging View
- Part 6: CPU Profiler View
- Part 7: Memory View
- Part 8: Performance View
So, let us get started by learning more about DevTools and try to understand how it can help you build high-performance apps.
What is DevTools and why do we need it?
DevTools is a suite of pre-packaged Application Performance Monitoring (APM) and Debugging tools that is available in Dart & Flutter. These tools can either be accessed using a browser or can be viewed directly in the IDE.
Nowadays, as people are increasingly relying on apps to fulfil their daily needs, success of a business has become directly proportional to its app’s performance. If an app has a slow response time, crashes or isn’t optimized for hands-on interaction, it leads to a poor user experience that can result in user frustration, negative reviews, app abandonment and loss of revenue, besides the damage caused to the brand.
Thus, it is critical to identify and pinpoint application performance issues during the release cycle before any real user is impacted. This helps in ensuring the delivery of a superb user experience and can be accomplished via DevTools that provide tools to:
- Monitor technical performance metrics like memory usage, CPU usage, FPS, network usage, etc., and
- Monitor User Experience through perceived performance metrics like janking, page load speed or response times that directly impact an app user.
- Manage and Troubleshoot any aspect of the app that has a critical impact on the above mentioned metrics.
Let us go through the individual tools available in DevTools that can help you monitor and analyze some of the above mentioned metrics:
- Flutter Inspector — It is a visual tool useful for inspecting UI layout, tweaking UI elements, diagnosing layout issues and exploring the widget tree of a Flutter app. You can take a deep dive into Flutter Inspector tool in our article — here.
- App Size Tool — This tool can be used to visualize and inspect the total size of the app via hierarchical chart display. It can also be used to analyze and visualize any difference in the total size of two apps (old vs updated version). You can read more about App Size tool in our detailed article — here.
- Network View — Any HTTP, HTTPS or web socket traffic from your application like REST API calls, network image downloads, json responses, etc. can be monitored using the Network View tool. You can learn more about Network View tool in our detailed article — here.
- Logging View — This tool is useful for monitoring diagnostics information and logs generated by the framework and by the user while running an app. It is a good practice to use Logging View instead of browsing the standard output as the logs are labeled, much better organised and are not truncated allowing granular inspection. You can read more about Logging View tool in our detailed article — here.
- CPU Profiler View — This tool enables us to monitor the CPU usage of a Flutter app and investigate any performance issue that might exist due to higher execution time of any piece of code. To learn more about CPU Profiler View tool, check out our detailed article — here.
- Memory View — This tool helps in visualizing the memory usage of a Dart or Flutter app and is useful for inspecting objects and detecting any memory leaks that lead to an app crash. You can learn more about Memory View tool in our detailed article — here.
- Performance View — This tool is useful for capturing and visualizing timing and performance metrics like rendering frame per second (FPS) that can help us detect any UI jank (Slow Frame Rate) in a Flutter app. To learn more about Performance View tool, check out our detailed article — here.
- Debugger — A source level debugger is also provided in DevTools that can be used to step through the code using breakpoints and we can inspect the value of variables. As VS Code has a built-in debugger, this tool is only visible if the app is run via Android Studio or via command line.
Availability of DevTools Based on the Type of App
The availability of individual tools may vary based on the type of application we are building. Check out the table below:
As seen in the table, Flutter Inspector is available only for Flutter mobile, desktop and web apps, whereas Flutter Web apps don’t have access to Performance View, CPU Profiler, Memory View, Network View and App Size Tool via Dart DevTools.
The above table only states the availability of these tools in Dart DevTools and does not imply that you cannot optimize and analyze your Flutter Web Apps. Browser tools such as the Chrome DevTools can be used for that purpose that is currently not in scope of this article.How to run DevTools?
After gaining a basic understanding of DevTools, let us now proceed with activating and running DevTools in our favourite IDE:
- Android Studio (Installer for Windows, Mac & Linux available here)
- VS Code (Installer for Windows, Mac & Linux available here)
1. Activating and Running DevTools in Android Studio
Although Android Studio (based on IntelliJ IDEA) is the official Integrated Development Environment (IDE) for Android app development, it can be also used for Flutter App Development with access to entire suite of features and tools like DevTools.
Let us take a look on how you can install and run DevTools in Android Studio (version: Dolphin | 2021.3.1):
Step 1
Install Flutter (Instructions).
Step 2
Install the Flutter Plugin from marketplace.
Step 3
We can create a new Flutter app or open an existing Flutter app in Android Studio. Let us go ahead and create a new Flutter app as demonstrated below:
Step 4
The next step is to run the application.
The Android Studio toolbar lets you carry out a wide range of actions, like selecting target device/emulator, running your app in different modes (Run, Debug, Profile) and other tools in context to Flutter App Development.
Let us select the target device or emulator. In this case we will select “macOS (desktop)” as we want to build a Flutter Desktop app for MacOS.
Now we can compile the code and run it using either — Run, Debug or Profile buttons. (You can click and read mode about these modes)
Click “Run” to build and run the app.
Step 5
The next step is to launch DevTools.
The tool window bar (shown below) runs around the outside of the Android Studio IDE window and contains buttons that allow you to expand or collapse individual tool windows. By default, the most commonly used tool windows are pinned to the tool window bar at the edges of the application window. In the screenshot below you can check out some of the most commonly used tools like Flutter Performance and Flutter Inspector are pinned to the right.
After running the app as shown in Step 4, let us click on the “Flutter Performance” tool as shown below in the tool window.
You can see that the Performance View has been integrated in the IDE, so that you can directly investigate the app’s performance.
In case you want to launch DevTools in a stand-alone browser, just click the “Open DevTools..” at the bottom of the tool window as shown below.
You can also open DevTools in the browser via Menu bar.
Tools > Flutter > Open Flutter DevTools
Congratulations for successfully running DevTools on Android Studio. But, there is one little caveat that we need to look into. You might receive an error message on the top of the tabs that capture the app’s performance as shown below:
The error was caused due to building and running the app in “debug” mode that is generally not a good indicator of the final behaviour of release mode builds. Debug mode enables expensive checks that don’t run in profile or release builds and debug mode also executes code in JIT mode as compared to AOT mode in profile and release builds.
Thus, it is recommended that all performance tools (Performance, CPU Profiler, Memory) must be used with Flutter applications running on a physical Android or iOS or Desktop device in “profile” mode. In this mode, the application compiled and launched is almost identical to the release build with just additional functionality to allow debugging performance problems.
Since we are using a macOS desktop (physical device) for development, we can go ahead and launch this desktop application in “profile” mode and open DevTools. The error message is no longer shown.
2. Activating and Running DevTools in VS Code (Visual Studio Code)
Flutter developers who prefer VS Code over Android Studio can go through the following process to install and run DevTools in VS Code (Version: 1.71.2):
Step 1
Install Flutter (Instructions).
Step 2
Install the Flutter Extension from VS Code Extensions Marketplace.
Step 3
We can create a new Flutter app or open an existing Flutter app in VS Code. Let us go ahead and create a new Flutter app as demonstrated below:
View > Command Palette… > Search “flutter” > Flutter: New Project > Application > Choose Directory > Enter Project Name
Step 4
The next step is to run the application.
Let us select the target device or emulator by clicking on the option in the status bar. In this case we are building a Flutter Desktop app for MacOS.
Now we can compile the code and run it by clicking Run, Debug or Profile options above the main() function:
Click “Run” to build and run the app or start the build process by clicking Start Debugging in the Runmenu.
Step 5
The next step is to launch DevTools.
Once you Run the app, an popup dialog (as shown below) will suggest you to try out Dart DevTools. Just click on the Open button.
In case this dialog is not available, you can click on Dart DevTools in the VS Code status bar.
The command palette opens up. Select the page (tool) you want to open.
Let us select the Open Widget Inspector Page. It opens up the Widget Inspector tool integrated inside the VS Code IDE. Now we can inspect the widget tree in VS Code.
To launch DevTools in a standalone browser, click on the “Open DevTools in Web Browser” command.
We have successfully run DevTools on VS Code.
In this article we got a brief overview of Dart & Flutter DevTools and undertook the required steps to setup and open it from the IDE of our choice. Starting from scratch completely, now you can easily launch DevTools and take a look at all the tools provided in this suite.
Now, you are ready to undertake the journey of mastering each and every tool in the DevTools suite. In the remaining articles of this series, we will help you take a closer look into each tool and understand it better via real world use cases. Do note that VS Code will be used as the instruction IDE in the remaining articles of this series. You can navigate to the tool you want to learn next by clicking on the link below:
- Part 2: Flutter Inspector
- Part 3: App Size Tool
- Part 4: Network View
- Part 5: Logging View
- Part 6: CPU Profiler View
- Part 7: Memory View
- Part 8: Performance View
We would love to hear your experience regarding this series. In case you faced any issues while setting up DevTools or while launching it via your IDE, please feel free to mention it in the comments and we can definitely take a look into it. Also, in case you have any other suggestion, do add it in the comments.
Special thanks to Kamal Shree (GDE — Dart & Flutter) for reviewing this article.