Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In 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!
Related Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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:06
Our Android tools included debugging tool
called the Dalvik Debug Monitor Server or
0:12
DDMS for short.
0:17
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:29
we now need to run 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:42
Its a stopping point where we can
take out time to look at the current
0:47
state of our app.
0:50
Then, if we want, we can continue
processing the codes step by step or
0:52
presume running the app.
0:56
Let's start at the beginning of onCreate.
0:58
Now technically, there's some code that
runs before we get to our onCreate method,
1:01
but we're not worried about that code.
1:05
Let's set our first breakpoint
on the first line of onCreate.
1:07
We can add breakpoints
in a few different ways.
1:11
First, let's click on the line
where we want to add a breakpoint.
1:14
Then click on the Run menu, And
select Toggle Line Breakpoint.
1:18
Notice that a little red circle
representing the breakpoint appears to
1:24
the left of this line of code.
1:28
This area is known as the gutter.
1:30
To delete a breakpoint make sure
that line is still selected, and
1:33
then select Run, Toggle Line Breakpoint
to toggle it back off.
1:37
We can also click in the gutter
next to a line of code to add or
1:42
delete a breakpoint like this.
1:45
We can add breakpoints all over our
code to stop anywhere we like, but
1:48
let's start with just this one.
1:52
Now to run our app with the debugger, we
want to use the debug button at the top.
1:55
Which is just to the right
of the run button and
1:59
looks like a little bug with
a play button on it, click it.
2:02
Then choose to run the app.
2:10
And once they have starts,
it should stop at this breakpoint and
2:14
open the debug perspective.
2:18
Check it out, we now have a new debug
view at the bottom of our screen.
2:23
And the line where we inserted our
breakpoint is now highlighted with blue
2:28
to show where the apps stop.
2:32
Our app is in a pause state at this point.
2:34
If we switch to the emulator,
we'll it's just a blank screen.
2:36
That's because we still haven't run any
of the code that sets up our layout.
2:41
While it's paused, we can look at
all sorts of things about our code.
2:46
We can hover over variables
to see their values.
2:50
Let's scroll up and
see what's in our factBook.
2:53
And then from this little pop-up, we can
click the + sign to take a further look.
2:56
And look, our factBook has already been
loaded and has all of our facts in it.
3:01
Since these variables are part of
the class, they get created first,
3:07
even before the onCreate method.
3:11
But let's take a look at what happens if
we look at these variables that are after
3:14
the current line where we stopped.
3:17
Nothing happens if we hover over fact or
color.
3:20
That's because these variables
haven't been initialized yet.
3:24
They get initialized here in the
onClickListener, but we haven't gotten to
3:27
that point of the execution yet,
we're still up here at the blue line.
3:31
All right,
now let's step through this line by line.
3:35
There's a toolbar down here
in the lower left, and
3:39
it contains controls on how to debug.
3:42
Let's quickly go over each one.
3:46
The first one is the resume button, which
resumes normal execution of the code.
3:48
If there are any further
breakpoints in the code,
3:53
then it will run until it
gets to the next breakpoint.
3:55
Then there are pause and stop buttons,
which are pretty self-explanatory.
3:58
Notice that pause is currently grayed
out because we're already paused.
4:02
The next one down here
with the multiple circles
4:07
shows all the breakpoints we
currently have in the app.
4:09
This can be especially useful when
we're debugging more complex tasks.
4:12
Now let's jump over here to
these buttons at the top.
4:17
These control how we walkthrough the code.
4:19
The first one takes us to
the current line of execution.
4:22
So if we had opened up a different
class like color wheel,
4:25
we could use this button to get
back to where we were paused.
4:29
These next ones are used to step
through the code in different ways.
4:32
The first one is called step over.
4:36
Followed by two different step into
buttons, and then a step out button.
4:38
Step over, the first one,
will step to the next line to be
4:44
executed after this current line is
all done, which for me is line 24.
4:48
Clicking on this step over button
would process everything in
4:52
the super.onCreate method, and
then it would pause again right here.
4:56
Step into means that we will step
into the current method call,
5:02
provided there is one on the current line.
5:06
In this case, clicking step into means
that we would take the debugger into
5:09
the onCreate method of the superclass, and
we would continue debugging from there.
5:13
Eventually, we'd end up back here,
just like if we clicked step over, but
5:18
that could be 1 or 1,000 lines later.
5:23
The last button, step out,
means that we'll automatically process all
5:26
the code until the end of the current
method, which in this case is OnCreate.
5:31
All right, let's step through our
OnCreate code using the step over button.
5:36
Click it twice to get down here to
where we initialize factTextView.
5:42
Now this line hasn't been executed yet,
so we still can't look at factTextView.
5:46
Let's hit step over again, and
now that that line is done,
5:51
we can hover over factTextView and see
a little pop up like we've seen before.
5:56
Hitting the + sign, let us see
a lot more information about it.
6:01
And if we scroll down to mText,
there's our fun fact.
6:04
Also, in the debug pane, if we expand
this which is our fun facts activity,
6:10
we can see that factTextView
now has a value.
6:16
Whereas, showFactButton and
relativeLayout are still null.
6:20
But if we step over two more times,
Now all three views have been initialized.
6:25
Finally, if we hit the resume button,
we can skip the rest of the code, and
6:33
if we switch to our emulator,
our app is up and running.
6:38
And if we click the button,
it just continues as normal.
6:42
Now if we add a new breakpoint here,
In the onClickListener,
6:47
then go back to the app and
6:53
click the button, We're brought right
back into the debugger, awesome.
6:54
This should be enough to get you started.
7:00
You can use the debugger
to troubleshoot or
7:02
also just understand how
your program is running.
7:04
It's a super useful tool.
7:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up