Introduction

Developers have an impressive list to choose from when it comes to selecting a JavaScript framework for developing web applications. Each of these frameworks has unique strengths and weaknesses. For Vue, one of its strengths lies in the robustness of its DevTools.

👁 Image

JavaScript developers switching to a new framework may be tempted to use general hacks (such as logging around) while debugging their applications at runtime — while this isn’t bad, it’s more efficient to use tools specific to that framework as they offer more specialized functions.

In this article, we will take a look at the Vue DevTools and see how it can be used to manipulate Vue applications at runtime for a better debugging experience.

Prerequisites

You need to have the following tools installed on your machine to follow this tutorial:

• Npm (3+)
• Node (6+)
• Vue CLI

Installation

There are basically three ways to install the Vue DevTools:

• As a Chrome extension,
• As a Firefox extension,
• As a standalone (Electron) application

From the list above, we can see that the DevTools is only available (as stated on the official repository) as a custom extension for Chrome and Firefox browsers. Other browsers’ users would have to install the standalone application locally on their machines.

How to install Vue DevTools for Chrome

• Visit this page on your Chrome browser:

👁 vue js devtools for chrome

• Click on the Add to Chrome button.
• Click on Add Extension when the pop-up shows

This will add the Vue DevTools as a Chrome extension and show a confirmation notification:

👁 Image

How to install Vue DevTools for Firefox

• Visit this page on your Firefox browser:

👁 Image

• Click on the Add to Firefox button
• Click on Add when the pop-up shows

This will add the Vue DevTools as a Firefox extension and show a confirmation notification:

👁 Image

How to install Vue DevTools as a standalone (Electron) application

Run this command to globally (using Npm) install Vue Devtools as a standalone application:

npm install -g @vue/devtools

Or locally as a project dependency:

npm install --save-dev @vue/devtools

We can also install it globally using Yarn:

yarn global add @vue/devtools

Once the installation is complete, we can start the application with this command:

vue-devtools

👁 Image

This would open the standalone application and you would need to add this link to your application’s index.html file:

<script src="http://localhost:8098"></script>

And wait for the standalone application to be reloaded — it will automatically connect to your Vue application.

5 ways to use Vue DevTools

Vue DevTools makes it easy to debug Vue applications at runtime, we are going to look at five ways we can use the DevTools plugin for debugging.

Edit component data

When building your components with Vue, you might want to try out a variety of component values or manipulate component data in realtime. Updating the data items in your IDE then going to the browser to see the results just doesn’t cut it anymore.

Vue DevTools allows you to edit component data in realtime:

• Open your browser’s DevTools and navigate to the Vue tab
• Select your component on the left column of the tab
• Edit the component’s data on the right column of the tab

👁 Image

Tip: You can launch Chrome DevTools by hitting – CTRL + SHIFT + I (CMD for Mac)

By default, prop data is not editable but we can make it editable by enabling it in the settings tab.

👁 vue devtools

With this feature, you can edit all data types, toggle Boolean values, and manipulate array values. You can also manipulate data from a remote API. As long as the data has been loaded into the Vue application, it is completely accessible for realtime editing.

Load component in the DOM

Vue DevTools allow you to load the HTML of custom components in the DOM. This is very useful for debugging the UI of your application. To load component data in the DOM, navigate to the click the Inspect DOM option under the components tab:

👁 inspect dom

Just beside the Inspect DOM option is the Open in editor option and it opens the selected component in your default editor. Nice!

Track custom events

You can track custom events (events that you emit using this.$emit('customEvent')) using the DevTools. This allows you to see if your events are triggered correctly and inspect the payload they carry.

To track custom events, do the following:

• Navigate to the Events tab
• Turn on Recording (if it isn’t already turned on)
• Trigger events and watch as they get logged:

👁 track custom events in vue

Monitor routes history and data

When building a SPA application with Vue, you might want to debug your routes or keep track of the overall navigation flow in realtime. Vue DevTools has a Routing tab that logs your route data and history as your application transitions from route to route.

The routing tab has two options:

• History displays the navigation history of the routes along with their data
• Routes displays all routes in the application and their options

To use the Routing tab, do the following:

• Navigate to the Routing tab
• Select History (selected by default) or Routes
• Navigate across routes and watch as it gets logged:

👁 monitor routes and history data

Debug Vuex behavior and time travel across previous states

Vuex is a state management library for Vue that allows you to manage and mutate your application’s state in a predictable way. The Vue DevTools lets you inspect state in realtime for debugging purposes.

Vue Devtools has a Vuex tab that logs your state whenever Vuex dispatches a mutation. This simplifies the process of debugging your state if it ever starts acting in an unpredictable manner. There is also a feature that lets you time travel through previous versions of your Vuex state in realtime.

Here’s the time travel debugging feature in action:

👁 debug vuex behavior

Conclusion

Being a web developer keeps getting better by the day. With the availability of modern tools that simplify the development process, it is beneficial for developers to harness these tools for a faster and more efficient workflow.

In this article, we’ve explored five ways to use the Vue DevTools for quicker and more efficient debugging. I hope that you take advantage of these features and have a better debugging experience with your Vue applications.

👁 Image