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: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