Using the Visual Studio Debugger7:07 with James Churchill
Let’s see how to use the Visual Studio debugger to diagnose an error we encountered when viewing our Comic Book Detail view.
To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this:
git clone <your-fork> cd aspnet-comic-book-gallery git checkout tags/v4.7 -b updating-the-controller
See these MSDN pages for more information on how to use the Visual Studio debugger.
F11- Step Into
F10- Step Over
SHIFT+F11- Step Out
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
You need to sign up for Treehouse in order to download course files.Sign up