- [Narrator] Vue works in pretty much any browser.
And of course, when we're building our web apps,
we want to test them in lots and lots of browsers.
But when we're in development,
it's great to use Chrome or Firefox
because Vue has a browser extension
for those browsers that makes debugging and learning
about Vue a little bit easier.
In this video, we're going to install those extensions
and see how they work.
We'll start with Chrome.
I have here, one of the projects
that we're going to be working on,
which has some Vue stuff already going.
But we don't have the extension installed yet.
So if I open the devtools with command option I
or control option I on Windows, I can see some messages
here on the console about Vue,
but it's just all the usual inspectors.
So, let's go here, to more tools and extensions.
Here are my existing extensions.
And I'm going to go to the Chrome web store,
and I'm here in the extensions category,
and I'll search the store for Vue devtools.
I'll get this first one that has lots and lots of stars,
and is not the dev release.
Just add that to Chrome.
Here we go.
Get a message that it was installed successfully,
and I get this little V up here in my toolbar.
Now over here in my extensions, before I go any further,
I'm going to click the details button,
and I'll scroll down here to allow access,
to file URLs.
I have this project loaded without a web server right now.
So the browser security settings will prevent the extension
from working here, unless I turn this on.
So I'll turn that on.
Now I can close this.
If I reload the page, I can see this V lights up,
because Vue has been detected, and the connection
between the extension and my little page, has taken place.
So now I'll hit command option I again
to open up the devtools, and here is my Vue tab.
I can see components, Vuex, events and refresh.
I can also see the version of Vue that's currently detected.
And as I hover over these components,
I can see them highlighting on the page.
If I click them, I can see the data,
and any props that are available on each one.
We're not going to be looking at Vuex.
That's the state manager that Vue offers if you need it.
But we will occasionally be looking at events.
And this can show you when events
are firing in your components.
Okay, so that's what it looks like in Chrome.
Let's go install it in Firefox.
Here in Firefox, I'm going to go up to tools, add-ons,
and here are the extensions.
I'm going to search for Vue devtools.
There we go.
We're going to add this to Firefox.
Checks that I really want to do this.
And indeed I do.
I'll reload this page.
And I didn't need to do anything special
as far as security settings go.
I get my V and it lights right up.
The key combination is the same to open the devtools,
command option I.
And here is the Vue tab and the tools look exactly the same.
This is pretty great.
So I can work in either Firefox or Chrome
and have access to these tools.
That's as far as we're going to go with them right now.
But I would encourage you to install the extension
in one of these browsers, which ever one you prefer,
or in both.
And we'll be looking at them occasionally
as we go through our projects.