Similar to the Augury (https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) utility that we presented in the previous chapter, Vue also has its own developer tools (https://github.com/vuejs/vue-devtools).

To install them, you can go to the official website or directly download any of the following:

• The Google Chrome extension: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
• The Firefox extension: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

• The portable and browser-independent version: https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

We'll use the Google Chrome extension as an example here.

Once installed, if you open up a page running a Vue application and then press F12 to show the Developer Tools, you should see a Vue tab:

If you click on the Vue tab, you will be presented with the component tree of your application in the Components view:

The Components view allows you to inspect and manipulate the state of the components in your application, including their internal data.

The Vuex tab is dedicated to Vuex, the official state management solution for Vue. We will cover Vuex later in this chapter.

Finally, in the Events tab, you can gain some insight into the various events that are triggered by your application:

The Vue dev tools are very useful during development. They're also great (just like the Angular CLI) at helping juniors do more on their own.

Now, let's take a look at the official Vue CLI.