Dart DevTools
DevTools is a tooling suite for Flutter and Dart developers consisting of layout inspection tools, performance tools, memory tools & many other debugging tools that you need to be an efficient and effective Flutter developer, all bundled into a single web suite for you!
DevTools is a standalone suite of tools that run in the browser. They provide additional telemetry and functionality that aren’t practical to show in the IDE.
It has been rebuilt from scratch in Flutter! Let’s first take a moment to discuss why the Flutter team 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 not only to rebuild DevTools but also added big new features along the way!
What can I do with DevTools?
Here are some of things you can do with DevTools —
✅ Inspect the UI layout and state of a Flutter app.
✅ Diagnose UI jank performance issues in a Flutter app.
✅ CPU profiling for a Flutter or Dart app.
✅ Network profiling for a Flutter app.
✅ Source-level debugging of a Flutter or Dart app.
✅ Debug memory issues in a Flutter or Dart command-line app.
✅ View general log and diagnostics information
Overview of features
How to launch DevTools in your favorite editor ?
How to launch DevTools?
You can launch DevTools in VS Code, Android Studio, or even from Command Prompt.
VS Code
Step 1: Activate Debug session for your App
Step 2: Once the debug session is active and the application has started, the Dart: Open DevTools command becomes available in the VS Code command palette:
Step 3: The first time you run this (and subsequently when the DevTools package is updated), you are prompted to activate or upgrade DevTools.
Step 4: Click on open & it will launch the DevTools
Android Studio
Once an app is running, you can start DevTools using one of the following in Android Studio:
✔Select the Open DevTools toolbar action in the Run view.
✔Select the Open DevTools toolbar action in the Debug view. (if debugging)
✔Select the Open DevTools action from the More Actions menu in the Flutter Inspector view.
To install from Command Line
Install and run DevTools from the command line
Install DevToolsIf you have `pub` on your path, you can run:“`pub global activate devtools“`If you have `flutter` on…flutter.dev
Let us now look at some of the features of DevTools —
Flutter Inspector
It is a tool that can be used to inspect the UI layout and state of a Flutter app. The inspector helps you visualize and explore Flutter widget trees, and can be used for the following:
✔ understanding existing layouts
✔ diagnosing layout issues
Layout Explorer
Lifesaver Feature
The next lifesaver feature is the Layout Explorer . You’ll see the Layout Explorer tab next to Details Tree. Select this tab to display the Layout Explorer feature.
The Layout Explorer visualizes how Flex widgets and their children are laid out. The explorer shows layout constraint violations and render overflow errors. These visualizations aim to improve understanding of why overflow errors occur as well as how to fix them.
Using the Flutter inspector
Select widget mode Enable this button in order to select a widget on the device to inspect it. For more information…flutter.dev
Timeline View
Consider a case when due to a particular frame your app gets slower & you don’t know where to find that in your code. Timeline View becomes a lifesaver in such cases & is handy when you’re trying to find out which widgets, exactly, are behind a slow frame.
The Timeline view 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.
You can see the problematic bar in red , selecting a bar from this chart centers the flame chart below on the timeline events corresponding to the selected Flutter frame. The events are highlighted with blue brackets.
You can now view the event in your code which is making your app slower & modify your App’s code to make it faster !😍
Memory View
Memory pane lets you peek at how an isolate is using memory at a given moment. 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.
Performance View
The performance view allows you to record and profile a session from your Dart or Flutter application. This can be used to decide where to spend optimization efforts!
Start recording a CPU profile by clicking Record. When you are done recording, click Stop. At this point, CPU profiling data is pulled from the VM and displayed in the profiler views (Call Tree, Bottom-Up, and Flame Chart).
Network View
The network view allows you to inspect HTTP network traffic from your Dart or Flutter application.
HTTP traffic should be recorded by default when you open the Network page. If it is not, click the Record HTTP traffic button in the upper left to begin polling.
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.
Debugger
DevTools includes a full source-level debugger, supporting breakpoints, stepping, and variable inspection. 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.
Summary
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.
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
Resources :
DevTools
Docs Development Tools DevTools DevTools DevTools is a suite of performance and debugging tools for Dart and Flutter…flutter.dev
flutter/devtools
This is a companion repo to the main Flutter repo. It contains the source code for a suite of performance tools for…github.com
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
