Debugger Review10:27 with Craig Dennis
Let's review how to start the debugger, step into, step over and out of programs.
So we've got a pretty good looking project, but 0:00 it has a slight problem from maintenance point of view. 0:02 There aren't any tests and I was looking through the code a bit and 0:04 there doesn't seem to be too many comments about the trickier bit of the code. 0:08 Really not even very sure what it's doing, 0:12 let alone if it's doing what it was originally intended to do. 0:15 So here's what I think we should do. 0:18 Let's take a look at one of those issues that our client filed for us to fix and 0:20 see if we can't try to walk through that code to track down and remove the bug. 0:23 We'll do this by using the debugger. 0:27 Remember, this tool's name is derived from the active debugging. 0:30 Removing bugs, which remember, this is based on that Grace Hopper story of 0:33 fixing a problem by removing an actual bug from the machine. 0:38 Sometimes in order to get the work done, you just got to dive in. 0:42 Are you ready to take the plunge? 0:45 Okay, so let's look at the project on GitHub. 0:48 Over here let's look at the Issues tab. 0:51 Our clients added a few issues here and I wanna take a look at this first one here, 0:55 change the number of examples on the home page. 0:59 Okay. So 1:01 currently we're showing five example terms on the home page, but 1:02 three would probably be better. 1:05 Also while you're in there can you verify the count, the numbers seem off. 1:06 Sure. Let's do that. 1:09 So let's take a look at the home page first, right? 1:10 So let's go. 1:13 I've got, let's make sure that our server is running here. 1:14 So yeah. One of the things to do here is 1:22 to make sure that you kind of know what's happening first. 1:23 Before you get in there, so let's take a look. 1:28 Okay, so the home page, these must be the terms here right, so 1:30 there's five JDK, YAGNI, SDK, JRE, Java EE and eight more. 1:35 So this number must be what they're talking about being off. 1:41 And this is five right? 1:43 One, two, three, four, five, okay. 1:44 Also check this out, I don't think those are the same. 1:46 Cool, each time you come in they're kind of random, right? 1:49 Every time I refresh we're getting different versions of them there. 1:52 Okay, that seems doable. 1:55 Let's see if we can find that code. 1:58 So if we come here, that's the home page and that's typically called index, right? 2:00 So we'll do shift, shift and we'll just start typing index. 2:04 IndexController, beautiful. 2:07 Okay and, look right here, in the request mapping for 2:09 forward slash, that sounds good. 2:13 So we wanna look at this code, we can walk this code, try to figure out what is going 2:15 on with the issues and we can do it by ourselves and 2:19 keep all the state in our brains, but we don't need to, right? 2:22 The debugger can actually run this line by line and we can pause it. 2:25 Now to pause it, what you do is you place what's known as a break point and 2:28 you do that by clicking over here in the gutter area. 2:31 So see I put a little stop sign there. 2:34 So what this means is if the server is kicked off in debug mode, 2:37 when this line is run, things will pause and wait for us to move until it's ready. 2:40 Want to do it? 2:44 Cool. So 2:44 I'm gonna stop the existing running server. 2:45 I'm gonna come up here under Run and I'm gonna choose Debug. 2:47 Okay so now things are up and running and now this is not yet paused, but 2:54 if we come over here and I refresh the home page, right, some I'm gonna make it 2:58 go through that request mapping, boom it paused right away. 3:02 You'll see here that the line is highlighted and 3:06 this is what's ready to be run. 3:09 It's known as the execution point. 3:10 It hasn't yet been executed and 3:12 you can see everything here, down here is in scope. 3:14 These are the variables that are in scope currently, right? 3:17 So there's model came in. 3:19 These update as we move line to line. 3:22 So let's watch what happens. 3:24 So this line that we're on currently is going to create a new string builder. 3:25 So let's allow that to happen. 3:30 Now, I'm going to do this. 3:32 I'm gonna, down here in this debugger line here. 3:32 I'm gonna click this step over button here. 3:34 And this instructs the debugger, to execute the line and 3:36 move on to the next one. 3:40 So I press it and you'll see that the line moves down to this FlashCard line here. 3:41 And if you look down in the variables here, 3:46 you'll see that there's the ctaBuilder. 3:47 Which is the new string builder. 3:49 And of course if you're unfamiliar with StringBuilder you can always use help, 3:51 just like you always could in the editor. 3:54 So if I come to StringBuilder here and I press F1, 3:56 we'll see the help pop-up, a little hard to grab. 3:58 But you can kinda read through here. 4:02 So, basically, 4:05 what these notes are getting at here is that you'll find a string builder approach 4:05 found in loops where you're trying to put strings together. 4:09 Now the reason that you'd want to use this over a regular string concatenation, 4:11 you know where using the pluses, this for memory purposes and 4:14 usually it's used to help increase overall code readability. 4:17 Remember each time that you concatenate a string using the plus sign, 4:21 in memory you were creating a brand new string, which in a tight loop can get 4:24 pretty expensive as the old strings need to get destroyed and things like that. 4:28 So I'm assuming that this string builder 4:32 is being used to build up the text that was supposed to change on the home page. 4:36 I'm not quite sure what this cta is just yet. 4:39 I know that cta stands for Chicago Transit Authority, but that doesn't make any sense 4:43 in this area, so, but I'm sure we'll find out what it is shortly. 4:47 I'm not gonna worry about it. 4:50 So looking at our current execution point here, 4:52 it looks like it's just gathering random cards and 4:54 I'm assuming, again I'm assuming, that this five here is the number, right? 4:58 Cuz there's five cards that are out there. 5:02 But why don't we validate that? 5:04 Cuz we can, all right? 5:05 We're here. We can do that. 5:06 So, I'd like to see the way that this code uses this argument. 5:07 So, what I can do is instead of, before I was doing step over, 5:10 which stepped over the line. 5:14 But you can actually step into this method call. 5:15 So, I'm gonna do that. 5:17 I'm gonna click Step Into. 5:18 And you'll see here that I've opened up a new file for us. 5:21 It's FlashCardServiceImpl. 5:24 I did this automatically. 5:26 We're in this getRandomFlashCards here. 5:27 And if you look down here in the variables, you'll see this P. 5:30 That's for parameter, right? 5:33 So it was passed in. 5:34 And you'll also notice that the editor is starting to be decorated. 5:36 This isn't in the file itself. 5:38 This is just written here on the screen for us. 5:40 So it says amount is five. 5:41 Okay, so this first line here looks like it goes and it finds all of the cards, 5:45 which is good. 5:48 So let's go ahead and we'll step that. 5:49 Okay, so it looks like there's eight cards. 5:52 Okay, see it says cards size = 8 and then we look down here and there's size = 8. 5:54 Then at quick glance, it shuffles them. 5:59 Right, it just does a shuffling. 6:02 It gets the first whatever amount was passed in, it gets the first five. 6:04 Cool, that makes sense. 6:08 Yeah. 6:09 And then it creates a new list. 6:10 So, that's cool. 6:12 We should be good if we change that to three. 6:13 That should work, right? 6:14 Now, since we don't need to walk through this code, 6:15 cuz we just did kind of in our heads. 6:18 We kinda know what it's doing, we are not really interested in it. 6:19 We can actually step out. 6:22 This kinda makes sense if there's a lot of code there, 6:23 that you're like I understand now what it's doing. 6:25 So, you can step out. 6:28 That's what this little arrow here with pointing up at the angle there. 6:28 And that step out, moves us back to where we were before we stepped in. 6:34 So, nice. 6:38 Now we're back where we were and we can do a step over. 6:39 Cool. And now we can see that there 6:43 are five cards. 6:44 And this is pretty cool. 6:46 Since there are cards I can now highlight this and it will show, 6:47 just like down below in this little plus thing, and I can open them up and 6:50 I can take a look at each one of them. 6:54 It's pretty handy it's nice to have that in line. 6:56 So I could actually go and change this five to three right now, but 7:00 I need to restart the server to make things take effect. 7:03 But, for now, let's keep walking through this code cuz I am dying to know what this 7:06 ctaBuilder is doing. 7:10 Now, you might have seen the hotkeys we moused over these. 7:11 Step over is a great one to know, it's F8. 7:15 So if you press F8 on your keyboard, you can just kind of move and 7:18 keep your vision on the screen, right. 7:21 So this next line here, we're going to loop through each one of the cards. 7:23 This one is going to use the append method to append and 7:27 you can see that it's going to refresh your memory about 7:30 is the term here that it's gonna do and it's going to append to that. 7:33 That's nice. 7:36 And then, wow, what is this doing? 7:36 So check this out. 7:40 When you don't know what's happening, if you highlight, let's go ahead and 7:42 I'm gonna highlight this card.size here. 7:45 And you can press Cmd+Shift+F8, and it will show you what's going on. 7:47 There's a setting that I have turned on here that you might not have turned on and 7:54 I wanna show you cuz it's one of my favorites and I always turn it on. 7:58 So if you come into a IntelliJay Preferences and 8:01 you come down to Build, Execution, Deployment and then Debugger and 8:04 then Data Views, there's this option here for Show value tool tip on code selection. 8:08 So If you don't want that on, you can do it with that command. 8:13 See, I always forget which is why I have that turned on. 8:18 Cmd+Shift+F8. 8:20 So that will kick that off. 8:23 It's called a quick evaluate, but it's super nice because I want to know, 8:24 it's calling a cards.get on cards.size minus 1 which is 4. 8:29 What does that mean? 8:33 So what is cards.get? 8:34 You can highlight it all and see that it does a quick evaluate across it and 8:37 I know, it's the last card. 8:41 So this is for to avoid the Oxford comma. 8:44 [LAUGH] Wow that could be documented a little bit better? 8:46 Or maybe even use the new string joiner class, see the teachers note. 8:50 Oaky, so we get it. 8:55 It goes through in and it appends each one of these terms and 8:55 we don't really want to walk through it. 8:58 So we could add a new breakpoint after this loop right? 8:59 So we could go down here and put a new breakpoint in here, but 9:02 we might not want that breakpoint later so why kind of litter up our breakpoints. 9:05 So there's another thing that you can do, just click here and 9:10 you click Run to Cursor which is this one here. 9:12 Boom, so all those lines ran, and it came here and stopped. 9:16 Okay so it says refresh your memory about, ba, ba, ba, ba, ba. 9:19 It's gonna append, and it's gonna get the current count, and 9:22 it's gonna put in the total count there. 9:27 Refresh your memory about and eight. 9:32 And it's gonna append more. 9:35 Weird. 9:36 They're right. 9:37 It is off right, it's not eight more, cuz theres eight total cards and 9:38 then it's gonna add cta. 9:42 By calling ctaBuilder.toString, 9:44 this is how you can do the build pattern on the on the builder there. 9:45 Now we finally are creating the string. 9:49 [LAUGH] What is this cta? 9:50 Inquiring minds want to know. 9:52 Maybe something's in the template. 9:54 Let's take a look at the template, right, so it's gonna turn this index template. 9:56 So if I do Shift+Shift, index.html. 9:59 Where is cta, call-to-action. 10:04 [LAUGH] I get it, we're building the call to action on the page, cool. 10:06 So I think we got the fixes that are disposal. 10:11 We're gonna change that thing to three, 10:15 and we're gonna make that thing count properly. 10:16 Let's just stop the server like usual. 10:19 And I'm gonna take a quick break, and I'm swing back and 10:22 fix this method with what we've uncovered through our debugging. 10:24
You need to sign up for Treehouse in order to download course files.Sign up