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.