Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let’s see how to use the Visual Studio debugger to diagnose an error we encountered when viewing our Comic Book Detail view.
Follow Along
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
Additional Learning
See these MSDN pages for more information on how to use the Visual Studio debugger.
Keyboard Shortcuts
-
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