Con el propósito de mejorar la experiencia de desarrollo, Vue nos ofrece las vue-devtools, una extensión para Google Chrome o Mozilla Firefox. Si no la tenemos instalada podemos hacerlo desde estos links:
Esta aplicación es muy útil a la hora de desarrollar ya que nos permite inspeccionar la estructura de componentes generada en nuestra aplicación. Por otro lado nos permite ver en tiempo real los valores que tienen las propiedades de los componentes.
La extensión consta de dos partes:
-
Un ícono en la parte superior del navegador que nos permite identificar cuando un sitio esta usando Vue.js y tiene habilitada la opción de debugging.
-
Una tab dentro del inspector de elementos que es la que nos permite comprobar y examinar el estado de nuestros componentes.
Una vez instalada pueden abrir la extensión e inspeccionar los componentes, cambiar los valores y observar como todo se va actualizando.
Los nombre de los componentes que ven en la vista de árbol la herramienta, son los nombres que definimos usando la propiedad
namedentro delvm. Si bien esta propiedad no es la que le da el nombre al tag HTML con el cual vamos utilizar nuestro componente nos sirve para poder mejorar la experiencia de debugging*, todos los componentes que no tengas la propiedadnamedefinida se visualizaran como<Anonymous>
ℹ️ Tambien existe una version en electron de vue-devetools que funciona en cualquier plataforma.