Vue devtools: Debug a tus apps

Las DevTool nos permiten hacer el Debug de la App, si quieres desarrollar tus apps como un profesional, CONOCELAS.

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.

27-09-2021 - Andrés Cruz