"Build a Simple Android App" was retired on September 15, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
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