Vue devtools is a chrome extension for debugging Vue.js applications.
Vue devtools extension is only available on Chrome. You can install it from Chrome Web Store.
You can also install it manually check out github page.
Things to remember while using vue devtools
- Dev tools inspection won’t work if page uses a production/minified build of Vue.js
- Inspection works with server hosted file, If you want to make it work via file:// protocol then you need to check “Allow access to file URLs” for this extension in Chrome’s extension management panel.
Once you install extension and inspect on page, you’ll see Vue tab alongside with other tabs like Netwok, Console etc.
When you run above code in browser, you’ll see your data properties and computed properties like below image.
So It is very easy to debug vue application using this extension.