Efficient Flutter debugging with Dart DevTools

hello my name is majid hajian and i'm a google developer expert for flutter and art in an ideal world imagine you would write your code and everything should work and you move on but in reality we developers spend a significant portion of our time debugging code adjusting layouts improving performance and etc many developers including myself use different approaches for debugging perhaps using print function is one of the easiest way to output what you want to see in the console and this is one of the way that many of us use when it comes to debugging an application i remember back in the days when i was lost in the stream of vlogs in the console especially when you are working like in an application that you need to print out quite often and especially when it's a real-time application luckily by using dart devtools which is a web switch consists of debugging tools for flutter and dart applications we will become more effective and efficient when it comes to debugging a fun fact is dart devtools has been rewritten in flutter itself and the flutter and dart team is actively working on these tools to make them even better when i was writing my mj coffee app i faced several problems in which i used dart devtools repeatedly to resolve these issues now i would like to share how i could debug my application way efficient with dart devtools and also perhaps showing you some features in dart devtools which you may not have heard what are we waiting for let's get started and see how i could debug my application mj coffee app first let's explore how we can open dart dev tools if you have not done that yet if you are a vs code user simply open command line command line palette and search for dart dev tools and then you can open dark devtools and if you are an android or intellij user so when you run your application in debug or profile mode so you can click on the open dart dev tools icon and simply open that in your browser and of course if you're running your application via command line so you are still able to open dartdev tools and you can simply click the link that it will be provided to you after running your app in debug or profile mode one of the common issue that i faced in mj coffee app was debugging and adjusting layout issues there are several problems with the details page in my app the fluttering inspector will help me diagnose these layout issues and gives me a good overall understanding of my layout since i'm running this app in debug mode i can see an overflow error and also i i want to adjust the design a bit better to feel the white space gap in the bottom of the page and looks generally better i can select my widgets from the widget tree or by enabling select widget mode i will be able to select the widgets that have an error details tree tab gives me a lot of good information such as what is constrained or unconstrained however it might be a little bit complex layout explorer is a tool that helps me to tweak my layout and all of the changes that i make will be hot reloaded to my app this is like a plug and play so i can play with these properties and see which one is fixing my issues so as an example i will change one of these icons flex to 1 and see if that helps and it seems by changing that to flex 1 the problem is getting resolved another thing that i want to tweak is to feel this white space gap at the bottom of these page so i can select this column and that contains all of these rows and play with the main axes so when i change to any of these values i get the result immediately on the screens and seems space between is the one that i'm looking for i want to also make this add to cart button hundred percent of the widths of this column what i can do i can play with cross axes on this column and see which value helps me to achieve this so if i change that to stretch it seems now i get all of these widgets to be stretched out to the hundred percent of the page now that i know how to fix these problems i can go back to my code add a flexible widget to one of these icons and add the proper values to the column that i selected in the flutter inspector when i was testing my application in profile mode before deploying to app store i realized there are some performance issue on listing page to get an accurate analysis i was running my app on a real android phone and in profile mode when i enable performance overlay i notice that there is an spike when i scroll in the menu i wanted to know why that is happening to do that first i enabled track widget builds which indicates which specific widgets take longer to be built i loaded all the data into the timeline and by checking all frames i notice there is one janky frame by selecting this frame i can see the correspondent chart in the timeline events section this chart shows different events for example asynchronous events from http or flutter frameworks or synchronous events from dart threads the ui thread or even that pertain to the raster portion of the drawing a flutter frame so from the fluttering gene and similar like that i noticed that the ui thread is hugging cpu and taking too much time it seems the build on this frame takes so much time and by zooming in i realized building one of the least highs takes longer then i guess probably there is something wrong or some type of method that causing this problem to understand that i used cpu profile section the flame chart on this section is a kinda like top-down visual representation of cpu profile and call tree is basically similar to flame chart showing text tree instead of graph which identified the expensive path but not expensive methods so what i was looking for is bottom up where it shows which method takes the most time hugging cpu apparently in my code there is a function called blocking ui where i could locate it under the main list dart file that is causing this problem one of the common issue when it comes to debugging an application is dealing with http or some kind of network request network tab in dar dev tools captures all the http requests for example in my application when i log into the app i make several requests network tab captures all of these calls and when i select each of them i can see an overview of the call i may go to the headers tab and check the general headers or perhaps respond headers which can be quite useful for debugging as well as request headers imagine that you want to check these headers with print function it will be so time consuming you can also get an overview of the response that you are receiving from each of these calls when i was looking for a specific endpoints i could simply search in network tab and immediately find out which of those calls are the one that i'm looking for even better i could filter out some of these calls for example if i want to just see all the 200 status calls or vice versa if i want to ignore some of those calls you also have several other options for filtering you can filter by method by type or you may create your own query using breakpoints and stepping in and over and out is a great way of debugging an application you can use your ide or your editor to use breakpoints for debugging your application but if you don't have that it's not a problem dart devtools debugger can help you to debug your application and gives you almost the same feeling that you get from breakpoints in your editor when i wanted to debug my login page in my application i loaded the library in debugger in devtools select my login page or login.dart file and i simply add one breakpoint by hitting the margin of this page where i want to add the breakpoint and then i went to my application and go to the login page hit the button and i saw that the application stopped stopped at the time that i added the breakpoint this is fantastic now i could simply see the caller stack i could see all the variables which were evaluated by this time of the execution i could see all the breakpoints and of course one of the most important thing for me was to stepping in and checking the next what is going on under the hood of this function or stepping out or stepping over to the next line of the execution each of these steps also gives me all the color stacks as well as all the variables which are evaluated at that time of execution having debugger in dar devtools is quite powerful even if you don't have a proper editor no problem whatsoever as soon as we start our development we're dealing with logs logs are everywhere i used to print everything to the console and i was constantly looking for some kind of text or you know i even added some kind of you know special character to realize what is going on in my console but having logging tab in dark devtools it just helps me to go there search for all of the different logs from flutter frame flutter navigation standard out standard error and all the other logs search and filter option in logging tab in dartdev tools is quite powerful imagine that now we are capturing all the logs and we are looking for some certain messages among all of those logs when you search for something in login.devtools it will automatically highlight all of those messages and you can simply looking for the rest of those if there are more than one from time to time when i was debugging my application mj coffee app i needed to filter out some certain type or kind of these logs for example many times i just needed a standard out so i simply could filter standard out kind of logs or i could do even vice versa i could just ignore all of them by passing a minus before kind in filter and i could just get everything else except standard out you may even use several kinds to filter or ignore or maybe create your own custom query to filter what you are looking for exactly let me also tell you that copy and pasting the result of these logs was also pretty simple it was quite handy for me to select all of them see the details immediately or maybe copy them to the clipboard and paste them somewhere else sometimes because i just wanted to compare you know two different logs or something else before i send my application to production i decided to analyze the final bundle size you can use app size tab in dartdev tools to evaluate or analyze your final bundle before sending them even to production to do that i build my app i build an apk for android arm 64 target platform and i pass dash analyze dash size parameter once build was done it shows me that where i could find the apk analysis that was a json file under build folder i use this json file to see the size information you may ask what was the size information the size information contains size data for dart code native code and non-code elements of my application for instance packages or assets or funds a size information file contains data for the total picture of my application size using tree map word and table shows the hierarchical data of my application size and using dominator tree and call graph simply shows the code size attribution data for example why a piece of code is included in my compiled application you can also compare two different app sizes imagine that you have two different build versions of your application and you want to analyze and see what are the differences this is what i did i compared the previous version of my app with the recent version that i'm making that ready for production and i come i see that there are some increases and some decreases and combined i realize that my application now has even less size i use dartdev tools to inspect all the layout issues in my application i find out what are the ui janky frames are and i did some cpu profiling to recognize the method that is causing too much time to be executed i use network profiling to see all the http headers and respond i did debugging and adding breakpoints in debugging tab in dartdev tools logs steps just help me to see all the logs filter them out search for them and see the details and copy them and finally i could check my app size information and analyze my code and even compare them between two different version mastering all of these in dart dev tools helps you to become more productive efficient and effective thank you very much for watching this video and please let me know in the comment below what you think about dart f2s and what you are planning to do with it you

Channel: Majid Hajian

Views: 4,204

Keywords: flutter debugging, dart devtools, flutter performance, flutter developer, flutter inspector, debugging in flutter, flutter devtools, flutter performance issues, flutter performance monitoring, dart devtools memory, dart devtools flutter, dart devtools vscode, dart devtools android studio, flutter debugging tools, flutter debugging vscode, flutter debugging android studio, flutter performance check, flutter developers, flutter devtools vscode, flutter devtools tutorial

Id: xgsjXIk3zbY

Length: 17min 35sec (1055 seconds)

Published: Wed Mar 03 2021