Add Vue Devtools and Use Them to Help in Development
We'll add the Vue Devtools to our browser to help us keep track of changes. At the time of recording, we need to install the beta version of the devtools to be compatible with Vue 3.
There are lots of ways data might get updated in an application as you continue development. The Vue Devtools will make it easier to track those changes as you build new functionality
Instructor: [0:00] To be able to help with debugging, I'm going to install the Vue DevTools. I'm going to go to Chrome extensions, to Chrome Web Store, and I'm going to search for Vue.
[0:08] There are two versions available. Vue beta and Vue. We need to use the Vue beta version when we're working with Vue 3. We go to the page and we add it to Chrome or Brave as mine is.
[0:20] If we go to manage the extensions, I've right clicked on Manage that extension and scrolled down, I need to be able to access file URLs. They're my local system. I need to be accessed those, and now let's see what happens when I visit this page. It says Vue has been detected.
[0:39] I have this extra panel in my DevTools that's called Vue, and it's listing some of my components, my root component, here. So is my data prop, my title data prop. I can edit it in here. I can say event, and it'll update it immediately here.
[0:56] The reason we might do this is we can follow the reactive key, and there are lots of ways that this data might get updated.
[1:01] As we go through this course, we'll refer back to the DevTools to check the changes we're making and to make sure everything's working as we expect.