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 application. The selected div is the element containing the second note.
By mapping the DOM structure back to the Vue components we've just coded, you can understand that the selected element is the root element of the component Note. Wouldn't it be better to see something...
