Using the Visual Studio Debugger

In the last video we updated the comic book's controller to use our repository. 0:00 Unfortunately, we encountered an error when viewing our comic book detail view. 0:05 Let's reproduce the error. 0:11 Start the website and once the /ComicBooks/detail route 0:12 has finished loading, update the URL to /ComicBooks/Detail/1. 0:18 Okay, here's our exception. 0:24 An exception of type system.NullReferenceException occurred and 0:29 under the additional information section, 0:35 object reference not set to an instance of an object. 0:38 Click OK to dismiss the exception dialog. 0:42 Visual Studio is highlighting in yellow the line of 0:45 code that the error occurred on. 0:48 We can use the Autos window to start debugging this error. 0:50 The Autos window displays variables used in the current statement and 0:54 the previous statement. 0:58 We can see here on this line that the view's model property is null. 0:59 In the offending line of code, we're trying to access the display text property 1:04 on a null object reference which is why we're getting this error. 1:08 So why is the model property null? 1:12 Let's keep the website running. 1:15 Press F5 to let execution continue, 1:17 then switched to the current books controller class. 1:20 We're going to use Visual Studio's Debugger, to further analyze this error. 1:23 The Debugger is a powerful tool that allows us to observe the runtime behavior 1:27 of our website and determine the location of errors. 1:32 Breakpoints are used to suspend the execution of our code. 1:36 We can set a breakpoint by clicking here in the lefthand margin. 1:39 Breakpoints appear as red circles. 1:44 Also, notice that the associated line of code is highlighted in red. 1:47 By setting a breakpoint on the first line of code in our detail action method, 1:52 Visual Studio will suspend execution of our website 1:56 when our action method is called. 2:00 We can then step through our code. 2:02 Now that we have our breakpoint set, refresh the page in the browser. 2:04 Switching back to Visual Studio, 2:09 we can see that execution has been suspended at our breakpoint. 2:11 The yellow arrow indicates which statement is about to be executed. 2:15 Just like with our breakpoint, 2:20 Visual Studio highlights the associated statement in yellow. 2:21 In the Autos window we can see that the ID argument is 1, 2:26 which matches the value that we passed via the URL path. 2:30 We could also hover the mouse pointer over a parameter or 2:34 any variable to see its value. 2:37 With execution of our website suspended, 2:40 we can now execute one line of code at a time by stepping through our code. 2:42 These three toolbar buttons can be used to step through our code, 2:47 step into, step over, and step out. 2:50 Step into and step over both tell the Debugger to execute the next line of code, 2:56 but they handle method calls differently. 3:02 Step into will execute the method call and 3:05 suspend execution on the first line of code in the method. 3:08 Step over will execute the entire method and 3:12 suspend execution on the next line of code after the method call. 3:16 When you step into a method call, 3:21 step out will finish executing that method and return you to the calling method. 3:23 If you're like me and want to keep your hands on the keyboard, 3:29 you can use the F11 key for the step into command, F10 for 3:34 step over, and shift + F11 for step out. 3:38 Don't worry if the differences between the step into, step over, and 3:42 step out commands don't immediately make sense. 3:47 As we step through our code, I'll make it clear which command I'm using and why. 3:51 You'll get the hang of it in no time. 3:55 I'm going to start by pressing F10 to move execution to the next statement. 3:58 Since we have an ID value, 4:03 we'd expect this if statement to evaluate to false and not execute. 4:05 It's worth noting that since the if statement expression doesn't include any 4:10 method calls, the step into and step out commands will both do the same thing. 4:13 Now we're ready to call the repository's GetComicBook method. 4:19 I'm going to press F10 to step over the call to the GetComicBook method. 4:23 Notice here in the Autos window at the comicBook variable is null. 4:29 If we were to continue execution we'd end up passing null to our view, 4:33 which is causing our error. 4:38 Looks like the GetComicBook method is not behaving as we expected it to. 4:40 We need to rewind execution in order to step into that method call. 4:44 Luckily, the Debugger allows us to do just that. 4:49 We can drag the yellow arrow back up to that line of code. 4:53 Now we can press F11 to step into the GetComicBook method call. 4:58 Now we're debugging the GetComicBook method. 5:03 I'm going to press F10 twice to step down to the for each loop. 5:06 Okay, so here's where we loop through our available comic books 5:11 in order to find the one whose ID matches our ID argument value. 5:14 I'll press F10 five times to step down to the if statement inside of our loop. 5:19 One, two, three, four, five. 5:25 In the Autos window, we can see that our ID argument value is 1, which is correct. 5:28 But our comicBook.Id value is currently 0. 5:34 That seems odd. 5:38 We can expand the comicBook variable to see all of the comicBook model properties. 5:40 That's certainly the first comic book in our list, 5:46 The Amazing Spider-Man #700, but the ID property is definitely 0. 5:50 Let's continue to step through our loop by pressing F10 five more times. 5:55 Now we can see in the Autos window that the comicBook variable has been updated 6:01 with the second comic book in our list, The Amazing Spider-Man #657. 6:05 Its ID property value is also 0. 6:11 Again, let's continue to the next iteration of our loop by pressing F10. 6:14 Our third comic book, Bone number #50 has the same problem. 6:18 Its ID property value is also 0. 6:24 If we press F10 until we exit our loop, 6:28 we can see that our comic book to return variable is null. 6:31 Press F10 three more times and we'll be our controller's 6:35 detail methods return statement, which is about to pass null to our view. 6:39 All three of our comic books had ID values of 0. 6:44 That's definitely a problem. 6:48 Go ahead and stop the website. 6:50 Let's look at our comic book data in the ComicBookRepository class. 6:53 Do you see the problem? 6:57 See if you can resolve the issue on your own. 6:59 When you're ready, proceed to the next video and 7:02 we'll walk through the solution together. 7:05