#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Install the Vue.js devtools
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now you probably have noticed we're doing a lot of inspect element give me the dev tools in Firefox could also do this in Chrome
0:08
and see what's happening with our JavaScript and Vue.js. But we can take it a little farther. For over here on vuejs.org, you can click on Ecosystem
0:16
and see under the tooling, there's dev tools. So, there are these dev tools that you can get and we can install them as either Chrome or Firefox.
0:24
And you go ahead and add that. Don't really need it up here all the time I guess we can leave it here, it's fine.
0:30
So we come over here to our Movie Exploder notice that this is lighting up, right? It's detected that there was some vue.js stuff
0:36
where over here it's gray, right? Because there's no vue.js apparently on that page. So if we go and click on that, it says it's all good.
0:42
So now I got to go and open up our dev tools, and there's something hiding at the end here because my screen is kind of crunched.
0:50
If we open that, notice we have a root we can click on this, and we have an array of genres and hey, that looks familiar, right?
0:57
And we can even add a genre. Another one here if we wanted, right? We can change these values, here are our movies. Maybe we could take the search text
1:04
and change this to be fun searches. Oh, I got to put that in quotes. Here we go, look, now fun searches is up here.
1:12
So you can do all sorts of cool stuff to interact with our vue.js object. If you double click it over here
1:20
when you come down here, notice how we have a little dev tools and if we say dollarvm0 that looks like something. Let's see if it has genres. It does!
1:30
Perfect, so before we head create an in-app object so that we actually could get a hold of this via app
1:37
right, same thing, but with the vue.js tools here you don't actually need to create that variable
1:42
you can get them this way if you prefer, it's up to you. Oh, it looks like there's a small error. I also need to import some jquery
1:50
for my little drop-down actually, the drop-down seems to be working fine, so. I'll include it, but it seems like we could
1:57
probably edit out whatever that bit is because it's more or less working. So these vue.js dev tools are definitely
2:02
helpful when you're working on your app, right? Encourage you to install them as you go.