Browser Devtools

Vue also has tooling to aid with debugging in the form of the Vue devtools. The devtools are available as a browser plugin for both Chrome and Firefox and as a cross-platform Electron app, which can also debug Vue apps running on mobile devices.

If we’ve developed applications with React before, the Vue devtools combine functionality similar to that of the React and Redux extensions.

The tools allow us to take a look into a running Vue application, providing three different tabs to help us inspect and debug our code.

We recommend installing one of the browser extensions (links can be found on GitHub) and trying the devtools with the examples from this course.

“Components” tab

The first section gives us a hierarchical view of all the components that make up our application. Selecting a component from the tree allows us to inspect its state (that is, its data object) in the right-hand pane, where the values can be dynamically edited while the app runs.