Add Vue Devtools and Use Them to Help in Development

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.