Vue DevTools is a browser extension for Chrome and Firefox that helps us debug and interact with Vue in the browser. It's an integral part of any Vue developer's workflow, so we'll install it now and see how it works. To install the DevTools, visit the Chrome Web Store and search for Vue DevTools. This will give you three related results.
x. but is no longer active. x, which was the previous major version of the DevTools. If for any reason you're having an issue with the latest version of the VDevTools with V2, then you can go back to the legacy version.
js DevTools, right here in the center. This is what we'll want to install, as it now has full support for both Vue 2 and View 3. Thus, I'll click on it here and click Add to Chrome. I've also left a link in the description for this exact page, if you'd rather just click straight there.
Or, if you prefer Firefox, there's a link available for that as well. Now, let's just click Add Extension. Now, let's head back over to our shopping list app. If you don't see the icon over here with the other extensions, click this little puzzle piece here.
and make sure you pin the extension to the browser. js is not detected. Well, in order to make the DevTools work for pages opened via the file protocol, we'll need to modify the DevTools settings. I'll right-click on the extension and click Manage Extensions.
Here. we'll make sure that allow access to file URLs is checked. And back in our app, I'll give the page a refresh. And yeah, you saw the icon light up.
That means that the DevTools now recognizes view on our page. Just to note, if you don't get the DevTools to work right away, for instance, if the icon doesn't appear or the DevTools won't load, then you can try restarting your browser or restarting your Chrome DevTools. Now with view dev tools installed, we can inspect the page and click on the view tab. In the first panel, we can see our view application instance.
And if we had any components for our application, we'd see those here as well. On the right hand side, we can see the data that we've defined for our shopping list app. That's pretty sweet. Not only can we view it though, we can actually modify it here as well.
Hey, that's awesome. Using Vue DevTools, we can also rapidly test out different ways to implement the code for our Vue applications. Vue DevTools actually injects our Vue instances into the console for us. That way, we can test and manipulate them without relying on setting them to a variable.
data. and that would allow us to access the value of that header. Or we could update it here as well. Nice.
All right. As your app grows in size and dependencies, you'll also find that DevTools helps with things like keeping up with your routes, inspecting global Vuex or Pinyas stores, and even traveling through time. Vue DevTools is truly indispensable for Vue development. Vue DevTools is a browser extension for Chrome and Firefox that helps us debug and interact with Vue in the browser.
It's an integral part of any Vue developer's workflow, so we'll install it now and see how it works. To install the DevTools, visit the Chrome Web Store and search for Vue DevTools. This will give you three related results. x.
but is no longer active. x, which was the previous major version of the DevTools. If for any reason you're having an issue with the latest version of the VDevTools with V2, then you can go back to the legacy version. js DevTools, right here in the center.
This is what we'll want to install, as it now has full support for both Vue 2 and View 3. Thus, I'll click on it here and click Add to Chrome. I've also left a link in the description for this exact page, if you'd rather just click straight there. Or, if you prefer Firefox, there's a link available for that as well.
Now, let's just click Add Extension. Now, let's head back over to our shopping list app. If you don't see the icon over here with the other extensions, click this little puzzle piece here. and make sure you pin the extension to the browser.
js is not detected. Well, in order to make the DevTools work for pages opened via the file protocol, we'll need to modify the DevTools settings. I'll right-click on the extension and click Manage Extensions. Here.
we'll make sure that allow access to file URLs is checked. And back in our app, I'll give the page a refresh. And yeah, you saw the icon light up. That means that the DevTools now recognizes view on our page.
Just to note, if you don't get the DevTools to work right away, for instance, if the icon doesn't appear or the DevTools won't load, then you can try restarting your browser or restarting your Chrome DevTools. Now with view dev tools installed, we can inspect the page and click on the view tab. In the first panel, we can see our view application instance. And if we had any components for our application, we'd see those here as well.
On the right hand side, we can see the data that we've defined for our shopping list app. That's pretty sweet. Not only can we view it though, we can actually modify it here as well. Hey, that's awesome.
Using Vue DevTools, we can also rapidly test out different ways to implement the code for our Vue applications. Vue DevTools actually injects our Vue instances into the console for us. That way, we can test and manipulate them without relying on setting them to a variable. data.
and that would allow us to access the value of that header. Or we could update it here as well. Nice. All right.
As your app grows in size and dependencies, you'll also find that DevTools helps with things like keeping up with your routes, inspecting global Vuex or Pinyas stores, and even traveling through time. Vue DevTools is truly indispensable for Vue development.