- [Instructor] Debugging Vue.js apps
with browser Developer tools is great.
But if you are looking for a solution
custom-made for troubleshooting Vue.js applications,
the Vue Developer tools is the way to go.
The Vue Developer tools was created by the Vue.js team
to improve the developer experience
building Vue.js applications.
This tool exists as a browser plugin.
And as at the time of this recording,
only supports the Google Chrome and Firefox browsers.
To get the tool installed on your Chrome or Firefox,
simply google Vue Developer tools.
You can append the name of your browser
for a more specific search.
The first link is what we're looking for.
This is a link to the Chrome store,
where we can view details about the plugin and install it.
Here on the Vue Developer tools, Chrome web store page,
we can see details about the plugin
including the current number of downloads,
which is currently at a whopping 1 million plus.
There are also link to check reviews and seek support.
To add the extension to Chrome,
click on the Add to Chrome button.
This will check for compatibility with your browser version.
We then get a prompt to confirm the installation
by clicking Add extension.
Once the extension is installed, you get a success message
from a pop-up notification box.
To see the Vue Developer tools pop-up in Chrome's Dev tools,
You will need to go to a page
where you have a Vue site open.
Now go ahead and open the Chrome Developer tools
to see if you have a Vue tab.
As you can see, we now have a tab for Vue.
This might not be visible immediately,
so refresh the page to bring it up.
We now have the Vue.js Developer tools installed,
and we can start using it in the next video.