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:

I never find vue tools useful, what is the use of it? I still use console.log to debug js errors

— Muhammed Rashid N.K (@rashidnk) January 17, 2018

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.

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.

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:

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.

A little bit later...

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.

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.

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.

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:

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:

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

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.

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.

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

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!