Preview
Video Player
00:00
00:00
Using the Debugger
7:19In this video we'll see how to use the debugger to monitor our app in real-time. We'll see how we can execute one line of code at a time, and how the debugger helps us investigate our variables as the app is running!
So far, we've looked at two ways
to post information from our app,
0:00
either to the screen or to the log.
0:04
Now we're going to go even further and
learn how to monitor our app in real time.
0:07
Our Android tools include a debugging tool
called the Dalvik Debug Monitor Server,
0:12
or DDMS for short.
0:18
DDMS provides a ton of insight into how
a connected device or emulator is running.
0:19
And we're going to see how to use
it to debug our code line by line.
0:24
Instead of just running
our app like we have been,
0:28
we now need to run our our app
with the debugger attached.
0:31
But the first thing we need to do
is set a breakpoint in our code.
0:34
A breakpoint is a point in our code where
the debugger will break out of the normal
0:38
computation, and then wait for
instructions from us on how to proceed.
0:41
It's a stopping point where we can
take our time to look at the current
0:46
state of our app.
0:49
Then, if we want,
0:50
we can continue processing the code
step by step, or resume running the app.
0:52
Let's close the log and
then start at the beginning of onCreate.
0:58
Now, technically, there's some code that
runs before we get to our onCreate method.
1:03
But we're not worried about that code.
1:08
Let's set our first breakpoint on
the first line in the onCreate method.
1:10
We can add breakpoints
in a few different ways.
1:14
First, let's click on the line
where we want to add a breakpoint.
1:17
Then click on the Run menu and
select Toggle Line Breakpoint.
1:21
Notice that a little red circle
representing the breakpoint
1:29
appears to the left of this line of code.
1:32
This area is known as the gutter.
1:34
To delete the breakpoint, make sure
that that line is still selected.
1:37
And then select Run > Toggle Line
Breakpoint to toggle it back off.
1:41
We can also just click in the gutter
next to a line of code to add or
1:48
delete a breakpoint, like this.
1:52
We can have breakpoints all over
our code to stop anywhere we like.
1:56
But let's start with just this one.
2:00
Now, to run our app with the debugger, we
want to use the Debug button at the top.
2:03
Which is just to the right of
the Run button we've been using.
2:08
It's the one with the little bug icon.
2:11
Click it, and then pick your deployment
target, And once the app starts,
2:13
it should stop at this breakpoint and
open the debug perspective.
2:21
Check it out, we now have a new Debug
view at the bottom of our screen.
2:27
And the line where we inserted out
breakpoint is now highlighted in blue
2:32
to show that this is
where the app is stopped.
2:36
Our app is in a paused
state at this point.
2:38
If we switch back to the emulator,
we'll see that it's just a blank screen.
2:41
That's because we still haven't run any
of the code that sets up our layout.
2:45
While it's paused, we can look at
all sorts of things about our code.
2:50
We can hover over variables
to see their values.
2:54
Let's scroll up and
see what's in our factBook.
2:57
And then from this little popup,
3:01
we can click on the + sign
to take a further look.
3:03
And look, our factBook has already been
loaded and has all of our facts in it.
3:07
Since these variables
are part of the class,
3:11
they get created first,
even before the onCreate method.
3:14
But take a look at what happens if we
look at these variables that are after
3:17
the current line where we're stopped.
3:20
Nothing happens if we place
our cursor over fact or color.
3:23
That's because these variables
haven't been initialized yet.
3:28
They get initialized here
in the onClick method.
3:32
But we haven't gotten to that
point of the execution quite yet.
3:35
We're still up here at the blue line.
3:38
All right, now let's step
through this code line by line.
3:42
There's a toolbar down here
on the lower left, and
3:45
it contains controls on how to debug.
3:48
Let's quickly go over each one.
3:52
The first one is the Resume button, which
resumes normal execution of the code.
3:54
If there are any further
breakpoints in the code,
4:00
then it'll run until it gets
to the next breakpoint.
4:02
Then there are Pause and Stop buttons,
which are pretty self-explanatory.
4:05
Notice that Pause is currently grayed
out because we're already paused.
4:10
This next one,
4:14
with multiple circles, shows all the
breakpoints we currently have in the app.
4:15
This can be especially useful when
we're debugging more complex tasks.
4:19
Now let's jump over to
these buttons at the top.
4:23
These control how we
walk through the code.
4:26
The first one takes us to
the current line of execution.
4:28
So if we had opened a different class,
4:32
we could use this button to get back
to the current line where we're paused.
4:35
These next ones are used to step
through the code in different ways.
4:39
The first one is called Step Over,
4:42
followed by two different Step Into
buttons, and then the Step Out button.
4:45
Step Over, the first one,
will step to the next line to be executed
4:51
after this current line is all done,
which for me is line 27.
4:56
Clicking on this Step Over button would
process everything in the super.onCreate
5:00
method.
5:05
And then it would pause again, right here.
5:06
Step Into means that we will step
into the current method call,
5:08
provided there is one on the current line.
5:12
In this case, clicking Step Into
5:15
means we would take the debugger into
the onCreate method of the superclass.
5:18
And we would continue
debugging from there.
5:22
Eventually, we'd end up back here,
just like if we clicked Step Over.
5:25
But that could one or
a thousand lines later.
5:29
This last button, Step Out,
means that we'll automatically process
5:32
all the code until the end
of the current method.
5:36
Which in this case is the onCreate method.
5:39
All right, let's step through our
onCreate code using the Step Over button.
5:41
Click it twice to get down to
where we initialize factTextView.
5:47
Now, this line hasn't been executed yet.
5:52
So we still can't look at factTextView.
5:54
Let's hit Step Over again, and
now that that line is done,
5:57
we can hover over factTextView and
see the little popup like before.
6:01
Hitting the + sign lets us see
a lot more information about it.
6:06
And if we scroll down to mText,
There's our fact.
6:11
Also, in the Debug view,
if we expand this,
6:19
which is our FunFactsActivity, we can
see that factTextView now has a value.
6:23
Whereas showFactButton and
relativeLayout are still null.
6:29
But if we step over two more times,
now all three views have been initialized.
6:33
Finally, if we hit the Resume button,
we can skip the rest of the code.
6:41
And if we switch to our emulator,
our app is up and running.
6:45
And if we click the button,
it just continues as normal.
6:50
Now if we add a new breakpoint here in
the onClick method, Then go back and
6:55
click the button, We're brought right
back into the debugger, awesome.
7:02
That should be enough to get you started.
7:10
You can use the debugger
to troubleshoot or
7:12
also just to understand how
your program is running.
7:14
It's a super useful tool.
7:17