An Example of Vue.js DevTools

Yesterday I tweeted about the release of the latest version of the devtools extension for Vue.js and one of my followers had this to say:

First off - I’m definitely in the “console.log for debugging” club myself. Yes, I know I can do step by step debugging with dev tools, but honestly, I’m typically quicker with just some logging. That being said, his tweet encouraged me to dig around a bit in the extension myself. I’m going to share what I’ve found below, but if you don’t want to read, just scroll down to the end and I’ve got a video demonstration of everything covered here. Ok, ready?

Where to Get it:

The official home page for the Vue DevTools project is up on GitHub: https://github.com/vuejs/vue-devtools. You can find installation instructions, help for some problems, and more. Currently the extension is supported in Chrome and Firefox but apparently there is also a work around for Safari. Obviously you want to begin with installing the extension and don’t forget to reload your page if you’ve got a Vue app already opened. Yes, I’ve made this mistake more than once.

Getting Started

Let’s begin with a super simple Vue app. Here is the entire thing:

<div id="app">
	<input type="text" v-model="name">
	<ul>
		<li v-for="cat in cats">{{cat.name}}</li>
	</ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
	el:'#app',
	data() {
		return {
			name:'Luna the Destroyer of Dogs',
			cats:[
				{name:'Simba',age:11},
				{name:'Robin',age:5},
				{name:'Luna',age:9},
				{name:'Cracker',age:6},
				{name:'Pig',age:3}
				]
		}
	}

});
</script>

As you can see, I’ve got one input field bound to a model called name and then an unordered list that iterates over an array of cats. First thing you may notice in your devtools is the extension kind of “announcing” itself - you know - just in case you forget to notice the tab on the right.

The vue extension saying hi

Clicking on the Vue tab will expose the Vue-specific options. First up is components. In my app I just have one, a root app, and when you click it, it highlights the data available to it. Which could be cool if your view is only showing some of the data. Here I can see it all.

Component data inspection

This is “live” so if I type in the input field it will be reflected immediately in the dev tools view. Even better, you can directly edit within devtools. Mousing over the items will give you controls for editing:

Editing data

This also extends to the array - with options to completely remove or add items. To add an item, you need to enter valid JSON, but the extension will provide live feedback as you type.

Nope, not JSON

A little bit later…

Now that's JSON!

The extension will also handle computed properties. Consider this version:

<div id="app">
	<input type="text" v-model="name">
	<ul>
		<li v-for="cat in oldcats">{{cat.name}}</li>
	</ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
	el:'#app',
	data() {
		return {
			name:'Luna the Destroyer of Dogs',
			cats:[
				{name:'Simba',age:11},
				{name:'Robin',age:5},
				{name:'Luna',age:9},
				{name:'Cracker',age:6},
				{name:'Pig',age:3}
				]
		}
	},
	computed:{
		oldcats() {
			return this.cats.filter(c => {
				return c.age > 10;
			});
		}
	}

});
</script>

All I’ve done here is switch to a computed property called oldcats. The extension will now display this along with my data.

Computed properties

You can’t edit those values (of course, it’s computed!) but if you edit a cat in the data array such that one is older than ten, it will immediately show up below in the computed list.

Computed properties updated in real time

Neat!

Ok, so seeing data that I’ve got in my own file may not be terribly exciting. But what if we try a remote data source?

<div id="app">
	<ul>
		<li v-for="film in films">{{film.title}}</li>
	</ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
	el:'#app',
	data() {
		return {
			films:[]
		}
	},
	created() {
		fetch('https://swapi.co/api/films/')
		.then(res => res.json())
		.then(res => {
			this.films = res.results;
		});
	}

});
</script>

In this version I’ve just switched to use the Star Wars API for my data source. Once run, I can see the remote data in my devtools extension and I can even edit it.

Data from the Star Wars API

Custom Components

So what about custom components? Here is a script where I’ve defined a cat component. Frankly the fact that Vue doesn’t ship with one by default is a terrible mistake.

<div id="app">
	<cat v-for="cat in cats" :cat="cat"></cat>
</div>

<script src="https://unpkg.com/vue"></script>
<script>

Vue.component('cat', {
	template:'<p @click="alertCat(cat)"><strong>{{ cat.name }} is {{ cat.age }} years old.</strong></p>',
	props:['cat'],
	methods:{
		alertCat:function(c) {
			alert(c.age);
		}
	}
});

const app = new Vue({
	el:'#app',
	data() {
		return {
			cats:[
				{name:'Simba',age:11},
				{name:'Robin',age:5},
				{name:'Luna',age:9},
				{name:'Cracker',age:6},
				{name:'Pig',age:3}
				]
		}
	}
});
</script>

Look now how the devtools recognizes the new component:

Custom component support

Notice how it also picked up on the properties sent to it. Now I’m going to skip over the Vuex tab and go right into Events. This was the only part of the extension that caused me trouble. The readme at the GitHub repo doesn’t tell you this, but the Events tab is only for custom events emited by components. So when I had used a simple @click="doSomethingYo" test and it failed to render, I thought it was broken at first. In the code sample above, you can see I’ve got a click event, but hitting that did nothing. I had to modify the code to emit a new event.

Vue.component('cat', {
	template:'<p @click="alertCat(cat)"><strong>{{ cat.name }} is {{ cat.age }} years old.</strong></p>',
	props:['cat'],
	methods:{
		alertCat:function(c) {
			alert(c.age);
			// this is what triggers it
			this.$emit('catevent', c);
		}
	}
});

With this in play, you can now see events recorded. What’s cool is that the extension will let you know an event was fired:

Highlighting an event

Clicking the tab and then the event lets you inspect what fired it and any additional information.

Event details

Working with Vuex

Getting better and better, right? Now let’s look at Vuex. Back in December I blogged an example application that made use of Vuex to build a simple stock game. This is where the Vue DevTools realy kick butt. You get insight into the data within your store as well as a running list of mutations.

Vuex

The stuff on the left is “live” which is pretty cool in my stock app as it has a “heartbeat” that does mutations every few seconds. Clicking on them provide detail about the particular mutation - here is one for buying stock.

Vuex

Even cooler - you can actually reject or roll back your store state by just mousing over a particular mutation.

Vuex

You can also use an export/import command to save/restore your Vuex state. This is incredibly useful for debugging issues.

The TV Version

Ok, if none of the above made any sense to you, hopefully the video version will make it more clear. As always, I’d love to hear from my readers about what they thing, if they’ve made use of the extension, and more. Leave me a comment below!

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments