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
Vue Devtools, available in popular browsers like Chrome and Firefox, is a powerful debugging tool that can help demystify the structure of our Vue applications.
Install Vue Devtools for Chrome
- Install
- You may also need to click the 3 dots at the top right of the screen in Chrome, then More Tools > Extensions. Then click Vue.js devtools > Details > then make sure “Allow Access to file URLS” is toggled on.
- You may need to refresh and/or restart your browser
- Make sure you’re using the unminified version of Vue.js
Other Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
You may have noticed,
as we've been working with Vue,
0:04
a couple of messages here in the console.
0:07
The first one says,
download the Vue Devtools extension for
0:10
a better development experience.
0:13
We're gonna go ahead and do that.
0:15
Vue Devtools is a browser extension
that will let us take a peek
0:17
at what's going on inside
of our Vue instances.
0:20
With it, we can better see
the structure of our apps and
0:23
observe changes to our data.
0:26
Vue Devtools can be extremely helpful for
debugging, so let's take a look.
0:27
This link will take us to a GitHub repo
with a link to where we can install
0:32
Vue Devtools, but let's just
start by Googling vuejs devtools.
0:36
If you're using Firefox,
you can find the installation
0:45
link at the Vue Devtools GitHub repo,
or in the Teacher's Notes.
0:49
One of the first results should be a link
to the Vue.js Devtools extension in
0:53
the Chrome web store.
0:57
Let's click on that, and
then click Add to Chrome to install.
0:58
Add extension.
1:07
Once you've installed, the Vue logo should
appear at the top right of your browser.
1:10
To use Vue Devtools, you may have to
click the three dots at the top right
1:18
of the screen,
then More Tools and Extensions.
1:23
Then click Details under Vue.js Devtools,
and
1:27
make sure that allow access
to file URLs is toggled on.
1:31
This allows us to use Vue Devtools
with local files without a server.
1:37
You may also need to restart your browser,
and make sure you're using the unminified
1:41
of Vue.js, which you should be if
you've been following with me.
1:46
You won't be able to use Vue Devtools
if you use the minified version,
1:50
it won't work.
1:54
All right, now that we have this set up,
let's get a feel for how it works.
1:56
To follow along,
you can open up the book detail example
2:00
from the last part of
the course in Chrome.
2:04
Or you can download the project
files from the link on this page and
2:06
open up the index.html file from
the folder called book detail.
2:10
I'm going to change the orientation
of Chrome Devtools so
2:23
that it is docked along the bottom here.
2:26
So now let's inspect
the book detail template.
2:30
On the left,
we're shown a tree of our Vue components.
2:33
Right now we have only one component,
our root component,
2:36
which is the one Vue instance that
we currently have in our project.
2:41
If we had a complex application
with many nested Vue instances,
2:44
we'd be shown a helpful tree
on this side of the window.
2:48
And it would allow us to
inspect each Vue instance.
2:52
So if you click on the root instance,
you can see on the right we have a view of
2:55
all the data associated
with this Vue instance.
3:00
So we can use this to examine and
change our data on the fly.
3:04
For example, if I click on the book title,
3:07
you can actually see the show detail
property toggling from true to false.
3:10
And if I click on the showDetail property,
3:15
I can use this check box to
change the boolean manually.
3:18
I can also change any of this text.
3:24
I can even change the type of data.
3:33
For example,
I could change this to a number.
3:35
Note that none of this data persists.
3:43
Just like when we make
changes in the console or
3:45
elements tab of Chrome Devtools,
everything resets when the page reloads.
3:48
We'll use Vue Devtools to get a closer
view into our apps throughout the course.
3:53
While we're here, let's click on console.
3:58
You'll see we have a couple of
messages in the console from Vue.
4:01
There's nothing here that we need
to worry about at the moment.
4:04
But keep your eye on the console as
you're developing Vue applications.
4:07
Vue Devtools gives us access
to enhanced error warnings,
4:10
which can be quite helpful for debugging.
4:13
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up