5 Vue DevTools hacks you should be using
Tags: vue, javascript, webdev
Published: 2019-09-27 19:36:17

---
title: 5 Vue DevTools hacks you should be using
published: true
tags: vue,javascript,webdev
canonical_url: https://blog.logrocket.com/5-vue-devtools-hacks/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/22onv63wpfx1nd75ck33.png
---
**Written by [Jordan Irabor](https://blog.logrocket.com/author/jordanirabor/)**✏️

## 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](https://github.com/vuejs/vue-devtools).

JavaScript developers switching to a new framework may be tempted to use general hacks (such as [logging](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) 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.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Prerequisites

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

- [Npm (3+)](https://www.npmjs.com/get-npm)
- [Node (6+)](https://nodejs.org/en/)
- [Vue CLI](https://cli.vuejs.org/)

## Installation

There are basically three ways to install the Vue DevTools:

- As a [Chrome](https://www.google.com/chrome/) extension,
- As a [Firefox](https://www.mozilla.org/en-US/firefox/new/) extension,
- As a standalone (Electron) application

From the list above, we can see that the DevTools is [only available](https://github.com/vuejs/vue-devtools) (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](https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd) on your Chrome browser:

![vue js devtools for chrome](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/vue.jsdevtools.png?resize=1231%2C728&ssl=1)

- 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:

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/vuejsdevtoolsextenstion.png?resize=491%2C398&ssl=1)

### How to install Vue DevTools for Firefox

- Visit this [page](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) on your Firefox browser:

![](https://blog.logrocket.com/wp-content/uploads/2019/09/firefoxvue-nocdn.png)

- 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:

![](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/vuejsdevtoolsinstalled.png?resize=464%2C399&ssl=1)

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

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

```jsx
npm install -g @vue/devtools
```

Or locally as a project dependency:

```jsx
npm install --save-dev @vue/devtools
```

We can also install it globally using [Yarn](https://yarnpkg.com/en/):

```jsx
yarn global add @vue/devtools
```

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

```jsx
vue-devtools
```

![](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/vueinstallation.png?resize=969%2C636&ssl=1)

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

```jsx
<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

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-1.gif?resize=730%2C548&ssl=1)

_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](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-2.gif?resize=730%2C548&ssl=1)

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](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-3.gif?resize=730%2C326&ssl=1)

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](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-4.gif?resize=730%2C407&ssl=1)

### 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](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-5.gif?resize=730%2C345&ssl=1)

### Debug Vuex behavior and time travel across previous states

[Vuex](https://vuex.vuejs.org/) 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](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/09/GIF-6.gif?resize=730%2C525&ssl=1)

## 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.
* * * 
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/5-vue-devtools-hacks/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [5 Vue DevTools hacks you should be using](https://blog.logrocket.com/5-vue-devtools-hacks/) appeared first on [LogRocket Blog](https://blog.logrocket.com).