Using the Debugger

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