4. Vue Devtools Setup

Warning: Once you have discovered how to use Vue Devtools extension, you will never want to come back to the normal world. It makes debugging so much easier by providing a user-friendly representation. Not just that, installing it in the earlier stages will help you understand how Vue works under the hood by inspecting each instance and speeds up your entire learning and development process. It is available as a browser extension for both Chrome and Firefox.

Without further ado, let us take a stab at it by installing Vue devtools in chrome browser. Let’s get started!

Step 1:

Visit chrome web store and type ‘vue devtools’ in the search bar.

Chrome web store

Click on the first suggestion shown, ‘vue devtools’ or just press ‘Enter’.

Step 2:

Click on ‘Add to Chrome’ button for the extension shown in the below image.

Vue Devtools extension

You will see a pop-up asking for some permissions. Click on the ‘Add extension’ button to confirm.

Devtools add confirmation

Step 3:

Once the extension is added, you will notice a confirmation message along with a small shortcut as shown below.

Devtools add confirmation

And voila! You have Vue Devtools installed in your Chrome browser!!

Let us try launching a page and see if this shortcut gets enabled. In other words, it turns colorful 😊 This indicates that Vue.js is being detected and we can start working with it. I am opening the index.html file that we were discussing in our previous article in chrome browser where we just installed our devtools extension.

Don’t panic if the shortcut is still disabled and clicking on it shows, ‘Vue.js not detected’.

Vue not detected

This is because we are opening the HTML file from our system and it is not deployed on any server, i.e. we are using a file URL. Just take a look at the address bar and you will notice that the address starts with file:///.

A simple solution to this problem is to right click on the shortcut -> select ‘manage extensions’ and turn on the ‘Allow access to file URLs’ toggle button.

Devtools allow access

Now refresh the page with the file URL and Vue.js will be detected as expected. To view the Root instance and the data object, open chrome developer tools (press F12 on your keyboard) and click on the Vue panel.

Vue panel

It is absolutely fine to not understand everything that is shown in the Vue panel currently. We will be discussing each aspect and working with them going forward.

Bye for now and have a nice day ahead!

<< 3. Introduction to Vue directives 5. Data binding Part 1 (Text, raw HTML, JavaScript expressions) >>

Leave A Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.