Introduction
The Dart dev-tool is an option for debugging and analysis. The Flutter app runs in Dart Language. Now it runs only in the browser (like Chrome, Safari, or any other browser which you set as default), in the future, you can see the tool on the apps or separate screen on the editors (like Android studio, Vs-code, etc). By default, it runs in http://127.0.0.1 URL with a random port on the browser.
How to get Dart DevTools
There are multiple steps to get the Dart dev-tools into your system. First, check whether your system is compatible. You need a minimum of 8 GB RAM and a Minimum i3 processor.
1. Download the SDK of flutter from https://flutter.dev/docs/get-started/install. If you have flutter SDK already, then update the latest SDK by downloading with the same link or from Tools -> Flutter -> Flutter upgrades on the Android studio. You can install the flutter plugin, or else you can run the command flutter upgrade on terminal or CMD.
2. Install the flutter plugin on the android studio from https://plugins.jetbrains.com/plugin/9212-flutter by downloading it from a browser or you can directly install the plugin by the Android studio -> Preference -> Plugins -> Market place (Tab) search Flutter.
3. Check if there is a browser on the machine, else, you will need a browser on your machine.
How to Run Dart DevTools
1. In Android Studio you need to go to Tools -> Flutter -> Open Dart DevTools, as mentioned in the image. In case this option is not available, just upgrade your plugin and SDK to find the options.
2. Dart DevTools will be opened in the browser which will look just like the above image.
(Disclaimer : The above image of Dart DevTools is taken on the Flutter version which is shown in the below image).
3. Run the flutter project on your device and you can find the URL of the Dart DevTools listener path in the First run, which you can find on the below image.
4. Paste the URL in Dart DevTools and Connect to a Running App with just the help of connect button.
5. Finally, you will enter into the Dart DevTools Dashboard Which has the option to debug the currently running app.
Debug on Dart DevTools
There are a list of options available for debugging the currently running app in this tool, where more options are available like tree structure of the widget, slow animation, etc.
List of tab to debug on Flutter App
1. Flutter inspector
2. Timeline
3. Memory
4. Performance
5. Debugger
6. Network
7. Logging
8. App Size
List of setting to Debug
1. Hot Reload
2. Hot Restart
3. Slow Animations
4. Debug Paint
5. Paint Baselines
6. Repaint Rainbow
7. Debug Banner
Conclusion
Dart DevTools is very useful for debugging the flutter app in many ways where no other tool is available to debug the flutter app as of now.
Will meet you in the next interesting blog!
Vignesh S,
Android Team,
Mallow Technologies.