When developing with Vue.js, also use vue-devtools.

This is Kusakabe from the development team.
We would like to introduce vue-devtools, which is very useful when developing with Vue.

Roughly speaking, you can see the contents of the data without having to output it to the console every time!
vue-devtools is provided as a Google Chrome extension and can be easily installed.

Once installed, all you have to do is open the page where the Vue application is installed and vue-devtools will detect the Vue application.

When detected, the Vue icon in the top right corner of your Chrome window will light up.

If you open Chrome's Developer Tools (F12) in this state, a Vue tab will be added to the right edge.

In this article, we will give a general overview of what you can do with vue-devtools.

---

Please note

If you want to try it with a local html file , you need to check "Allow access to file URLs" for vue-devtools in Chrome Settings -> Extensions.

 

Also, devtools does not seem to respond to Vue applications inside iframes .
(Actually, I wanted to provide something that I could touch and check using JSFiddle, etc., but I gave up on this.)

---

Main topic

vue-devtools has three main display categories.

Let's look at them in turn.

 

Components

On this tab, you can check the parent-child relationship of each component and the data held by each component.
The upper camel case of the child component name set in the components property of the parent component is used for the display name of the component.

If you are using a single file component, this will be the upper camel case of the file name.
You can change the display on devtools by changing the component's name property.

 

Vuex

When using Vuex, you can check the status of the store by selecting the [Vuex] tab.

Specifically, the state of each state in the store and the value obtained by the getter are displayed.
Also, the history of committing mutations is displayed in chronological order.

By clicking on each commit history, you can check the value passed to the mutation at that time (payload), state after commit, and getter values.
By pressing the [Time Travel] (clock icon) that appears when you select a commit, you can write the state back to the state immediately after the selected commit. (The value on the screen will actually change)

Commits with the
inspected The active label represents where you are in the timeline. (In other words, when you move time using [Time Travel], the destination becomes active)

 

Events

This tab allows you to see the history of events that have been triggered.

This is what we mean by event.

The history of $emits is displayed regardless of whether the event was listened to with $on or not.

From the history, you can check the value (payload) passed to the event.

In the example in the image above, we are passing the string "counter is now: 3" to an event that simply displays the passed string.