Vue devtools: Debug your apps

The Vue devtools are fantastic tools that allow us to easily debug our applications in Vue; the reason for this is that when we create an app in Vue, based on components, everything ends up in a single file and if a part or component fails or we want to track it and we debug said application with the tools that already exist. we know:

As you can see, we don't see anything related to our app in components; to be able to debug properly and be able to see components and properties, we have to install the devtools that we have in most modern browsers like Firefox or Google Chrome; in the case of Google Chrome:

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es

I leave two links since the beta version is the only one that supports Vue 3; and with this, we have a new tab in our developer console:

In which, as you can see, we see the app as it really is.

- Andrés Cruz

En español

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.