Vue.js 2 – Part 2: Setting Up Vue Devtools

In the previous section we have learned about how to get started with Vue.js 2 and basic data binding. In this section we will setup Vue Devtools and get a basic idea about debugging Vue using it. Let’s get started, open the file from previous section in chrome and open chrome developer tools. If you go to the tab console you will see following message:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

Download and Install

So let’s download it sooner than later. Click on the link from the console, scroll down to the installation section and click on Get it on the Chrome Web Store, and add the extension to chrome.

For you reference here the direct link – https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Now come to the page and reload and click on the Vue Devtools icon, you will see a message Vue.js not detected.

That’s just because we are using file URLs here and chrome extensions do not get permission to the file urls by default. There can be two ways to make it work, one will be to boot up a local server and run the file from you local server and other option will be letting the Vue Devtools access the file URLs.

Enable Vue Devtools

To enable file access right click on the Vue js icon from the top of google chrome and select Manage extensions and click on the check box saying “Allow access to file URLs” for Vue.js Devtools

And we are all set, now if you restart the browser you see a message saying vue devtools is ready and you will find a new tab called Vue.

Using Vue Devtools

Okay let’s take a look at the devtools, it is very cool hope you will find it interesting. If you go to the Vue tab you will see there is a <Root> element and it has one data bound which is a message property. Now this is the interesting part, if you update the data from the input field you will see the underlying data of the message property is updating on the fly. That’s the thing you should understand about reactivity and two-way data binding.

However the exact same thing will happen if you do the reverse. Let’s do it, if you check on the Vue tab, notice the <Root> element is connected with a variable which is $vm0

<Root> ==  $vm0

If you type $vm0 in the console you get the root object, however if you type app you will get the same thing, and that’s because we have referenced the Vue instance in the app variable you can check it from the code.

var app = new Vue({ … })

Now come to console, if you type the following code you will notice the value of the input text field was changed dramatically.

app.message = "Yeah value changed!"

That was pretty cool right! I enjoyed it a lot at the first time, and yes I still do.

Recall Two-Way Data Binding

I hope this will make your idea clear about two-way data binding and reactivity. So what is happening here is whenever we change the value from the data level view instantly changes and if we change the value from the view level (which is in our case the input  text field) data get’s updated in the data object.

So that’s it for this section hope you have enjoyed it. In the next part we will take a look at Arrays and Lists in Vue and how we can use and control it. See you later, happy coding 🙂