Introduction to Vue Devtools

If you were to ask me to list the things I cannot live without as a Vue developer, I would say the following:

• Coffee
• Vue Devtools

Vue Devtools provides developers with a user-friendly solution to debug and interact with Vue applications. It is available as a Chrome extension, Firefox addon, or standalone Electron app which works with any browser. Once installed, Vue applications can be inspected in development mode using the Vue tab in the browser’s developer tools.

What Vue Devtools can do for you

• The Components panel offers an overview of all of the components on any given page with their respective props, data, and computed properties. Values in the panel can be seen changing dynamically through typical user-interaction with the page. It is also possible to edit data values in the panel to see how these changes affect the page in real-time.
• Users of Vuex for state management can take advantage of the Vuex panel, where changes in state over time can be viewed and reverted. State can also be updated by changing the values in the panel.
• By simply clicking “Record”, custom events can be monitored in the events panel to see if they are appropriately emitted during user-interaction with the page.
  A user’s route-navigation history, as well as information about all routes in the application can be viewed in the Routing tab.
• General application performance, as well as individual component performance, can be monitored in real-time using the “Frames per second” and “Component render” tabs within the Performance panel.

For more information, visit the Vue Devtools GitHub Repository.