Beginning Flutter Debugging

A common problem that could occur while building apps could be when you expect a variable to be updated to some value but you get something else. Some times, you could get an unexpected value and other times, the variable doesnt update as expected.

Currently, we used a print statement to track the counter variable in the build method. This is not the best way to inspect variables during development, so i’ll remove that now.

The debugger provides us with different ways we could inpect our variables for changes. This could be helpful when we expect a variable to be updated at a certain point but fails to update. With this, we could step into that code and try to find what we did wrong.

Let’s explore the first way. With our breakpoint still set at the start on the incrementCounter method, click the increment button. The breakpoint did not trigger. Why is that so? Well, remember, in the last episode, we set the breakpoint to be a conditional breakpoint. Let’s clear that now. And i’ll do a hot restart just to reset the counter.

Click on the button once again. Now, hover on the _counter variable. You can see its current value is still zero and this is expected because the call to setState has not completed its execution. This is one way to inspect the value of a variable. Now, step over this code. Hover on the _counter variable.

And you can see its value is now set to one which shows that setState has successfully updated the state object. But the counter on the app screen still displays zero. Can you guess why?

Well, thats simply because the widget has not been rebuilt with the updated counter state. Click the continue button to resume the app which in turn rebuilds the widget with the new counter value on the screen. Note: Hovering on a variable to see its value is only available when you hit a breakpoint.

Now, hovering over variables might not be the coolest way to track their values. You could be having shaky fingers from a bad day at work and this might not be the best experience at that moment.

Let’s checkout the second approach. Here, we would view the variable in the “Variables” section of the debug sidebar. The variables section is currently empty because we havent hit any breakpoint. Go ahead and hit the increment button. Now, you can see it updated with the Locals group. The locals are simply the local variables stored by our application.

Curently, it is populated with an instance of the State object which is denoted by the this variable. Open it up. You can see different members of this class but we’re interested in the _counter variable which we declared. It is currently set to 1 which is the current value.

Now, go ahead and step over the code. And you can see the counter value updates to 2. Continue your app and the UI updates accordingly.

This approach works pretty well but sometimes, you might just want to track some specific variables and watch for changes. And this lead us to final approach in this episode: Using the “Watch” section of the debug side bar.

To watch for changes on a variable, hover or click on the watch section. Then click on the add icon to add an expression. Next, enter the variable name, in this case: _counter then hit Enter or the return key. And that’s it. We’ve set up a watcher for the counter variable. So this is going to be used to track the value of the counter variable.

Let’s click on the increment button once more. And now we have the current counter value which is 2. Once you step over the setState it then updates to 3. You see the watch panel gives us easy access to watch variables update in real time. We dont have to hover or go into objects to get to the variable we want.

We just add it to the watch list and see it update. I’ll go ahead and click on the continue button to resume our app. Do note that the an error would occur if you try adding a variable that does not exists in the current execution envionment. Now, you might be wondering what the “Call Stack” section in the sidebar is all about… Let’s talk about that in the next episode.