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.
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.
You will see a pop-up asking for some permissions. Click on the ‘Add extension’ button to confirm.
Step 3:
Once the extension is added, you will notice a confirmation message along with a small shortcut as shown below.
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’.
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.
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.
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!