- [Instructor] To follow along with this video,
make sure you're on the 04_03b branch of the project.
Now that we have the Vue developer tools installed,
let's walk through the tool, to understand
how we can use it for debugging our Vue.js applications.
In the Chrome developer tools, click on the Vue tools tab.
By default, the components section of the tool is selected.
This is the section where a tree view of the components
currently on the loaded page is shown.
The root component is default for all pages.
And the app component is where our router is located.
You can click to expand these components
to see the hierarchy of child components within them.
For now, we only have a Home.vue component
within the app component.
This component represents the page currently in view
and contains no child components.
Clicking on this component will reveal
its instance variable on the right-hand side.
This variable can be accessed on the disk key vault
within the component.
The $route variable contains properties
relating to the current route.
These include the route path, route name,
query parameters and many other useful properties.
You also have information about
the component's data properties,
and you can inspect them as they change in real-time.
For example, observe what happens
to the show arrow variable.
When we click on the login button without entering
any credentials.
As you have observed,
the show arrow variable changes from false to true.
This is the value that causes the error message
to be displayed.
The Vue developer tool shows us how this piece of data
updates in real-time.
This is very useful in debugging
the current state of the component.
You can also inspect the actual Dom elements contained
in the components currently selected
and show that the Home.vue component is selected.
Then click on the inspect DOM icon on the right.
This opens the elements tab in Chrome developer tools,
and immediately selects the container element
for the component.
You can expand this to view and walk through the inner HTML.
This allows you to use the built-in browser DevTools
to inspect the actual markup.
Back into DevTools.
Notice the highlighted components contains a statement.
Home component equals $vm0.
The $vm variable is a reference to the Home.vue component.
Also one useful thing about this reference
is that you can simply type it in your console
and interact with the component.
Let's type $vm0,
then follow it with a dot.
This immediately gives us a list of all the properties
available on the component instance.
We see properties such as el,
which is a reference to the HTML container element
for the component.
From the preview shown below the statement.
You can see a div with a class name container.
The $route property we saw earlier in the Vue DevTools
is also available on the instance here in the console.
When you hit enter,
you get the same route properties seen earlier,
you can also reference data properties directly
on the $vm0 object.
For example, the show arrow variable.
This can help you access the current values of data
properties on the component directly in the home console.
The Vue.js developer tools also has other sections
for inspecting your Vue.js application.
The Vuex section is used to view,
inspect and run true state mutations,
taking place in the Vuex door.
This tool helps you time travel
two-state changes by rolling back mutations
and replaying them.
There are also sections for monitoring events
in the application.
Route changes and route history.
You also have a settings section where you can configure
the theme of the DevTools.
Here, you can do things like enable props editing,
enable auto loading of Vuex states,
and many more.
Do note that some of these settings when enabled
may impact performance or cause crashes.
So be careful when using them.