You can debug your Vue application the same way you debug any other web application. Use your developer tools (firebug), breakpoints, debugger statements, and so on. If you want to dive deep inside the Chrome debugging tools, check Chrome's documentation at https://developer.chrome.com/devtools .
Vue also provides Vue.js devtools, so it gets easier to debug Vue applications. You can download and install it from the Chrome web store at https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd .
Unfortunately, it doesn't work with locally opened files, so use some simple HTTP server in order to serve our examples as a web page (for example, https://www.npmjs.com/package/http-server ).
After installing it, open, for example, our shopping list application. Open developer tools. You will see the Vue tab has automatically appeared:
Vue devtools
In our case, we only have one component—<Root>. As you can imagine, once we start...