The Vue.js DevTools
If you’ve not yet installed the Vue.js DevTools, please refer back to the Vue.js DevTools section in Chapter 1, Introduction to Vue.js, to follow the instructions. We will take a close look at the DevTools using our Todo list application for reference.
If you have the browser plugin installed and you visit a website where Vue.js is detected, the icon in the toolbar will indicate that Vue.js is detected on that particular URL:
Figure 2.4 – Screenshot of Vue DevTools in the browser’s toolbar
If you click it, it will refer you to opening the browser’s DevTools, where a tab dedicated to Vue is added.
The Vue.js tab offers a lot of ways of drilling down into a certain aspect of the rendered code and some time travel inspection methods. It offers an accessible representation of the inputs and outputs of a component, which can help you visualize how a component is rendered.
So, let’s zoom in on a...
