Vue devtools: Debug a tus apps

- Andrés Cruz

In english
Vue devtools: Debug a tus apps

Las Vue devtoools son unas herramientas fantásticas que nos permiten hacer debugs fácilmente a nuestras aplicaciones en Vue; la razón de esto, es que cuando creamos una app en Vue, en base componentes, todo a la final termina en un solo archivo y si una pieza o componente falla o queremos hacerle un seguimiento y hacemos debug a dicha aplicación con las herramientas que ya conocemos:

Como puedes ver, no vemos nada relacionado a nuestra app en componentes; para poder hacer un debug como dios manda y poder ver componentes y propiedades, tenemos que instalar las devtools que lo tenemos en la mayoría de los navegadores modernos como Firefox o Google Chrome; en el caso de Google Chrome:

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

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

Dejo dos enlaces ya que la versión beta es la única que tiene soporte a Vue 3; y con esto, tenemos un nueva nueva pestaña en nuestra consola de desarrolladores:

En la cual como puedes ver, vemos la app como realmente es.

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.