Hello in this post i’m going to give you a brief explanation on how is flutter app debugging with dart devtools is important in the app development process :

so when we come to

the dart plugin comes with many useful tools and one of them are this powerful tool which is very important when debugging flutter apps

First in case you don’t have DevTools installed you can run this command line on your terminal to install it

> flutter pub global activate devtools

Once installed try to open it on your browser by running Open Dart DevTools from the IDE search box

or you can run :

> flutter pub global run devtools

after that go to your browser and you will notice the tool opened for your running app using a default port number

if it asks you to enter a port number or url of your running app then just go to the logcat when app starts on your device it will shows your running app url like this : http://127.0.0.1:44543/9129RZRui24=/ then copy this link and paste it on the input text

 

sometimes you will have issues connecting due to some port restrictions on your device  but there is a work around all you need to do is : run your app using this command line :> flutter run --observatory-port=9500

this command force using port number 9500 for your device then all you need to do is

replace http://127.0.0.1:44533/9129RZRui24=/ with http://127.0.0.1:9500/9129RZRui24=/ that’s it

lets back now to DevTools window and explain how to use it :

first we have 4 important features :

Flutter inspector : it’s a visual layout inspector to manage your ui here you can

  • inspect the widget tree of your app,
  • see all widget properties : text, background ,color, padding, margin … using a key value pair,
  • you can highlight the widget on your device when selected
  • debug pain gives you more details for every single widget and fragment the widget into all sub widgets, for example it paint distance between all parts of the widget using arrows, lines and so on
  • Paint baseline draws a line below all widget texts
  • Repaint rainbow highlight all widgets that gets repainted for every build method
  • Debug banner represent the debug flag painted when running your app in debug mode

Timeline :

  • to record and analyze all the activity in your application as it runs
  • Make a Timeline recording to analyze every event that occurred after a single load or a user interaction.
  • View GPU, and UI changes in the Overview pane

Memory :

  • profile the app memory as it runs in real time
  • manage memory overhead issues

this can be helpful to improve your app memory usage

Performance :

  • The performance view allows you to record and profile a session from your Dart application
  • when you start recording the CPU data is pulled from the device VM into the profiler
  • you have other tools like Flame chart or Call tree to get more details about your CPU

we come to then the end of the dart devtools debugging mechanism, we will go through more details about this subject in the next posts

That’s it hope you enjoy the post see you again !