Vue devtools: Debug your apps

- Andrés Cruz

En español
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

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.