Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue Dev Tools and Testing Your SPA Chapter 12

Using the Vue.js developer tools

The Vue developer tools are available for Chrome and Firefox and can be downloaded from

GitHub (https:/​/​github.​com/​vuejs/​vue-​devtools). Once installed, they become an

extension of the browser developer tools. For example, in Chrome, they appear after the
Audits tab.

The Vue developer tools will only work when you are using Vue in development mode. By
default, the unminified version of Vue has the development mode enabled. However, if

you are using the production version of the code, the development tools can be enabled by

setting the devtools variable to true in your code:

Vue.config.devtools = true

Throughout the book, we've been using the development version of Vue, so the dev tools
should work with all three of the SPAs we have developed. Open the Dropbox example

and open the Vue developer tools.

Inspecting Vue components data and computed values

The Vue developer tools give a great overview of the components in use on the page. You

can also drill down into the components and preview the data in use on that particular

instance. This is perfect for inspecting the properties of each component on the page at any
given time.

For example, if we inspect the Dropbox app and navigate to the Components tab, we can
see the Vue instance and we can see the component. Clicking

this will reveal all of the data properties of the component – along with any computed

properties. This lets us validate whether the structure is constructed correctly, along with

the computed path property: