- [Speaker] To follow along with this video,
make sure you're on the 04_01b branch of the project.
Before diving into any fancy set up for debugging
an application, it is a good practice to first see
what you can get out of the tools you currently have.
Most modern browsers come bundled with developer tools
that can be very useful in tracking down common errors
in an application.
Unlike the old days of fireball on Firefox browsers,
modern browser tools are now enhanced
with debugging capabilities almost equal
and sometimes more elaborate than what you get for most IDs.
So far in this course, we have been making use
of the Chrome browser.
The Chrome browser currently accounts for over 60%
of global browser usage according
to current usage statistics.
Over time, Chrome has also received significant updates
to its developer tool.
And in my opinion, it has the best browser developer tools
in today's market.
We currently have a bug
in our Explore California application,
but I won't tell you what it is.
Let's try to login to the application to find out.
Let's enter our email and password.
Let's now click the login button to enter
into the application.
Notice anything?
Yeah, the absence of action here indicates
that there is an error.
It is expected that we should be logged in
and be directed to the dashboard, but nothing happened.
Why is that?
When you trigger an action and you don't get
the expected response and not even an error message
to give you a hint as to what is happening,
it's time to pop open the developer tools
to check what might have gone wrong under the hood.
Open the developer tools and first check the console
to find out if there are any errors present.
And as suspected, we have an error,
if we zoom closely into the error message,
we see a statement that says "Cannot read property push
of undefined."
The statement error in V-on handler indicates
that this error is taking place on an event handler.
Scroll down a little and we see
the error statement once again.
Just below it is more information about
where the error took place.
Just below it, is more information about
where the error took place.
VueComponent is a generic reference to the component
in which this error is taking place.
And we can see that it's on the login property.
This login property is contained in the Home.VueComponent
as shown in the Chrome developer tools console.
One of the amazing features of the error reporting
in Chrome's console is that you can simply click on the file
and be taken directly to where in the code
the error is coming from.
Let's click Home.vue in the console to look
at the error location.
If you notice there is a yellow flash on the error line,
it disappeared quickly, so you may not have noticed.
Let's go back to the console and click the file once again
to observe the flash.
The flash highlights line 74,
this is the line where the router was called
to trigger the navigation to the profile page.
Going back to the console,
again, now that we know that it takes place on line 74,
the error reads "Cannot read property push of undefined."
This means we are calling the push method on a variable
that is undefined.
Let's return to the error line to check that.
The undefined variable is definitely
the dollar router object as this is the variable
on which we're calling the push method.
Looking closely on the object, can you notice the error?
You can pause the video to check, do you see it now?
Yeah, the router object was misspelled.
We have a missing O in there.
Let's fix this error by correcting the spelling
and saving the file.
Back in the browser, let's refresh the page to ensure
that our changes have kicked in.
Now login once again to see if the error is gone.
Awesome, now we are navigated to the profile page
after providing the credentials
and clicking the login button.
Looking at the console, there are no more errors printed,
indicating that our bug is now fixed.