1
00:00:00,470 --> 00:00:04,360
So far, we've looked at two ways
to post information from our app,

2
00:00:04,360 --> 00:00:07,040
either to the screen or to the log.

3
00:00:07,040 --> 00:00:11,230
Now we're going to go even further and
learn how to monitor our app in real time.

4
00:00:12,560 --> 00:00:18,047
Our Android tools include a debugging tool
called the Dalvik Debug Monitor Server,

5
00:00:18,047 --> 00:00:19,290
or DDMS for short.

6
00:00:19,290 --> 00:00:24,252
DDMS provides a ton of insight into how
a connected device or emulator is running.

7
00:00:24,252 --> 00:00:28,810
And we're going to see how to use
it to debug our code line by line.

8
00:00:28,810 --> 00:00:31,320
Instead of just running
our app like we have been,

9
00:00:31,320 --> 00:00:34,250
we now need to run our our app
with the debugger attached.

10
00:00:34,250 --> 00:00:37,161
But the first thing we need to do
is set a breakpoint in our code.

11
00:00:38,200 --> 00:00:41,970
A breakpoint is a point in our code where
the debugger will break out of the normal

12
00:00:41,970 --> 00:00:46,730
computation, and then wait for
instructions from us on how to proceed.

13
00:00:46,730 --> 00:00:49,470
It's a stopping point where we can
take our time to look at the current

14
00:00:49,470 --> 00:00:50,740
state of our app.

15
00:00:50,740 --> 00:00:52,520
Then, if we want,

16
00:00:52,520 --> 00:00:57,140
we can continue processing the code
step by step, or resume running the app.

17
00:00:58,300 --> 00:01:03,600
Let's close the log and
then start at the beginning of onCreate.

18
00:01:03,600 --> 00:01:08,160
Now, technically, there's some code that
runs before we get to our onCreate method.

19
00:01:08,160 --> 00:01:10,270
But we're not worried about that code.

20
00:01:10,270 --> 00:01:14,590
Let's set our first breakpoint on
the first line in the onCreate method.

21
00:01:14,590 --> 00:01:17,270
We can add breakpoints
in a few different ways.

22
00:01:17,270 --> 00:01:21,570
First, let's click on the line
where we want to add a breakpoint.

23
00:01:21,570 --> 00:01:29,053
Then click on the Run menu and
select Toggle Line Breakpoint.

24
00:01:29,053 --> 00:01:32,120
Notice that a little red circle
representing the breakpoint

25
00:01:32,120 --> 00:01:34,900
appears to the left of this line of code.

26
00:01:34,900 --> 00:01:37,380
This area is known as the gutter.

27
00:01:37,380 --> 00:01:41,150
To delete the breakpoint, make sure
that that line is still selected.

28
00:01:41,150 --> 00:01:48,450
And then select Run > Toggle Line
Breakpoint to toggle it back off.

29
00:01:48,450 --> 00:01:52,020
We can also just click in the gutter
next to a line of code to add or

30
00:01:52,020 --> 00:01:53,631
delete a breakpoint, like this.

31
00:01:56,130 --> 00:02:00,980
We can have breakpoints all over
our code to stop anywhere we like.

32
00:02:00,980 --> 00:02:03,520
But let's start with just this one.

33
00:02:03,520 --> 00:02:08,300
Now, to run our app with the debugger, we
want to use the Debug button at the top.

34
00:02:08,300 --> 00:02:11,430
Which is just to the right of
the Run button we've been using.

35
00:02:11,430 --> 00:02:13,500
It's the one with the little bug icon.

36
00:02:13,500 --> 00:02:21,680
Click it, and then pick your deployment
target, And once the app starts,

37
00:02:21,680 --> 00:02:25,210
it should stop at this breakpoint and
open the debug perspective.

38
00:02:27,460 --> 00:02:32,060
Check it out, we now have a new Debug
view at the bottom of our screen.

39
00:02:32,060 --> 00:02:36,010
And the line where we inserted out
breakpoint is now highlighted in blue

40
00:02:36,010 --> 00:02:38,830
to show that this is
where the app is stopped.

41
00:02:38,830 --> 00:02:41,230
Our app is in a paused
state at this point.

42
00:02:41,230 --> 00:02:45,910
If we switch back to the emulator,
we'll see that it's just a blank screen.

43
00:02:45,910 --> 00:02:50,332
That's because we still haven't run any
of the code that sets up our layout.

44
00:02:50,332 --> 00:02:54,050
While it's paused, we can look at
all sorts of things about our code.

45
00:02:54,050 --> 00:02:57,150
We can hover over variables
to see their values.

46
00:02:57,150 --> 00:02:59,193
Let's scroll up and
see what's in our factBook.

47
00:03:01,904 --> 00:03:03,569
And then from this little popup,

48
00:03:03,569 --> 00:03:06,010
we can click on the + sign
to take a further look.

49
00:03:07,050 --> 00:03:11,840
And look, our factBook has already been
loaded and has all of our facts in it.

50
00:03:11,840 --> 00:03:14,280
Since these variables
are part of the class,

51
00:03:14,280 --> 00:03:17,840
they get created first,
even before the onCreate method.

52
00:03:17,840 --> 00:03:20,980
But take a look at what happens if we
look at these variables that are after

53
00:03:20,980 --> 00:03:22,740
the current line where we're stopped.

54
00:03:23,740 --> 00:03:28,610
Nothing happens if we place
our cursor over fact or color.

55
00:03:28,610 --> 00:03:32,030
That's because these variables
haven't been initialized yet.

56
00:03:32,030 --> 00:03:35,030
They get initialized here
in the onClick method.

57
00:03:35,030 --> 00:03:38,270
But we haven't gotten to that
point of the execution quite yet.

58
00:03:38,270 --> 00:03:40,040
We're still up here at the blue line.

59
00:03:42,230 --> 00:03:45,284
All right, now let's step
through this code line by line.

60
00:03:45,284 --> 00:03:48,779
There's a toolbar down here
on the lower left, and

61
00:03:48,779 --> 00:03:51,390
it contains controls on how to debug.

62
00:03:52,530 --> 00:03:54,880
Let's quickly go over each one.

63
00:03:54,880 --> 00:04:00,160
The first one is the Resume button, which
resumes normal execution of the code.

64
00:04:00,160 --> 00:04:02,660
If there are any further
breakpoints in the code,

65
00:04:02,660 --> 00:04:05,490
then it'll run until it gets
to the next breakpoint.

66
00:04:05,490 --> 00:04:10,070
Then there are Pause and Stop buttons,
which are pretty self-explanatory.

67
00:04:10,070 --> 00:04:13,630
Notice that Pause is currently grayed
out because we're already paused.

68
00:04:14,690 --> 00:04:15,330
This next one,

69
00:04:15,330 --> 00:04:19,790
with multiple circles, shows all the
breakpoints we currently have in the app.

70
00:04:19,790 --> 00:04:23,860
This can be especially useful when
we're debugging more complex tasks.

71
00:04:23,860 --> 00:04:26,300
Now let's jump over to
these buttons at the top.

72
00:04:26,300 --> 00:04:28,950
These control how we
walk through the code.

73
00:04:28,950 --> 00:04:32,480
The first one takes us to
the current line of execution.

74
00:04:32,480 --> 00:04:35,010
So if we had opened a different class,

75
00:04:35,010 --> 00:04:39,550
we could use this button to get back
to the current line where we're paused.

76
00:04:39,550 --> 00:04:42,831
These next ones are used to step
through the code in different ways.

77
00:04:42,831 --> 00:04:45,426
The first one is called Step Over,

78
00:04:45,426 --> 00:04:51,178
followed by two different Step Into
buttons, and then the Step Out button.

79
00:04:51,178 --> 00:04:56,081
Step Over, the first one,
will step to the next line to be executed

80
00:04:56,081 --> 00:05:00,735
after this current line is all done,
which for me is line 27.

81
00:05:00,735 --> 00:05:05,257
Clicking on this Step Over button would
process everything in the super.onCreate

82
00:05:05,257 --> 00:05:06,150
method.

83
00:05:06,150 --> 00:05:07,920
And then it would pause again, right here.

84
00:05:08,970 --> 00:05:12,990
Step Into means that we will step
into the current method call,

85
00:05:12,990 --> 00:05:15,620
provided there is one on the current line.

86
00:05:15,620 --> 00:05:18,070
In this case, clicking Step Into

87
00:05:18,070 --> 00:05:22,980
means we would take the debugger into
the onCreate method of the superclass.

88
00:05:22,980 --> 00:05:25,130
And we would continue
debugging from there.

89
00:05:25,130 --> 00:05:29,160
Eventually, we'd end up back here,
just like if we clicked Step Over.

90
00:05:29,160 --> 00:05:32,080
But that could one or
a thousand lines later.

91
00:05:32,080 --> 00:05:36,200
This last button, Step Out,
means that we'll automatically process

92
00:05:36,200 --> 00:05:39,110
all the code until the end
of the current method.

93
00:05:39,110 --> 00:05:41,780
Which in this case is the onCreate method.

94
00:05:41,780 --> 00:05:45,720
All right, let's step through our
onCreate code using the Step Over button.

95
00:05:47,370 --> 00:05:50,750
Click it twice to get down to
where we initialize factTextView.

96
00:05:52,330 --> 00:05:54,530
Now, this line hasn't been executed yet.

97
00:05:54,530 --> 00:05:57,130
So we still can't look at factTextView.

98
00:05:57,130 --> 00:06:01,710
Let's hit Step Over again, and
now that that line is done,

99
00:06:01,710 --> 00:06:06,940
we can hover over factTextView and
see the little popup like before.

100
00:06:06,940 --> 00:06:11,719
Hitting the + sign lets us see
a lot more information about it.

101
00:06:11,719 --> 00:06:18,320
And if we scroll down to mText,
There's our fact.

102
00:06:19,450 --> 00:06:23,060
Also, in the Debug view,
if we expand this,

103
00:06:23,060 --> 00:06:29,220
which is our FunFactsActivity, we can
see that factTextView now has a value.

104
00:06:29,220 --> 00:06:33,720
Whereas showFactButton and
relativeLayout are still null.

105
00:06:33,720 --> 00:06:41,090
But if we step over two more times,
now all three views have been initialized.

106
00:06:41,090 --> 00:06:45,870
Finally, if we hit the Resume button,
we can skip the rest of the code.

107
00:06:45,870 --> 00:06:50,200
And if we switch to our emulator,
our app is up and running.

108
00:06:50,200 --> 00:06:55,480
And if we click the button,
it just continues as normal.

109
00:06:55,480 --> 00:07:02,769
Now if we add a new breakpoint here in
the onClick method, Then go back and

110
00:07:02,769 --> 00:07:10,860
click the button, We're brought right
back into the debugger, awesome.

111
00:07:10,860 --> 00:07:12,850
That should be enough to get you started.

112
00:07:12,850 --> 00:07:14,870
You can use the debugger
to troubleshoot or

113
00:07:14,870 --> 00:07:17,720
also just to understand how
your program is running.

114
00:07:17,720 --> 00:07:19,100
It's a super useful tool.