Using vue-devtools

Vue.js provides the vue-devtools utility to help programmers debug Vue applications. Vuex enhances this tool to keep track of every mutation committed.

You can install this utility as an extension for Chrome or FireFox, or you can navigate to https://github.com/vuejs/vue-devtools for instructions on how to install it.

Start the EveryNote application by typing npm start, open Google Chrome with vue-devtools installed at http://localhost:8080/, then press F12.

Component inspector

If you select the Elements tab in Chrome Developer Tools, you will see something like the following screenshot:

Figure 4.1: Chrome Developer Tools, Elements tab

Below the Elements tab, you can see the current DOM tree of the EveryNote...