Debugging with Vue.js Devtools
Right now, there is no easy way to debug our app. All we can do is add
console.log statements to our code to look at the values. With Vue.js Devtools, we can have more visibility in our app. Vue.js Devtools is a Chrome or Firefox extension that we can use to debug our Vue.js applications. It can be used on projects that are created with Vite or created from scratch by including the
script tag for Vue 3. We can install the extension by searching for the Vue.js Devtools extension in the respective browser's app store.
The URL to install the Chrome version of Vue.js Devtools is at https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd.
The Firefox version of the add-on is at https://addons.mozilla.org/en-CA/firefox/addon/vue-js-devtools/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search.
Once we've installed it, we should see the Vue tab in the browser's development...