Sin duda, VueJS es un framework que está teniendo una aceptación tremenda en el desarrollo web, y yo soy uno de ellos. Normalmente, el que tenga éxito un framework suele venir acompañado de herramientas de desarrollo vinculadas al mismo, y al igual que Facebook está al frente de React y se han desarrollado herramientas, algo similar sucede con las herramientas para desarrollar con VueJS.
Vuejs DevTools
En Firefox hay una extensión llamada Vue.js devtools que puedes incorporar:
vueJS DevTools Firefox
Al incorporar VueJS a las herramientas de desarrollador, encontrarás un icono arriba que te indica si la página en cuestión incluye Vue o no.
 vueJS en Firefox |
 vueJS en Firefox 2 |
Hay que tener en cuenta que las herramientas detectan si estás trabajando con la versión de desarrollo, o con la de producción. Probamos a cargar el código de ejemplo visto en la anterior entrada sobre eventos en Vue:
vueJS devTools en Firefox
En la imagen anterior, casi que no disponemos de información sobre el objeto VueJS, y es debido a que estamos trabajando con la versión de producción, esto es, la minimizada.
Si cambiamos la versión de VueJs por la de desarrollo, podemos comprobar cómo las herramientas de desarrollo están plenamente operativas y ya podemos ver todo lo que está sucediendo en el objeto Vue:
vueJS devTools en Firefox
Sin duda, una gran ayuda para los desarrolladores.
VueJS en Chrome
Para Chorme, también existe una extensión similar a la de Firefox, que puedes descargar aquí:
vueJS en Chrome
Probamos a cargar nuestro ejemplo:
vueJS en Chrome
y nos encontramos de que no detecta VueJs, al pulsar en el icono de VueJS:
vueJS en Chrome
Para activar la extensión y que funcione con file:/// es necesario notificarselo a la extensión en las opciones de extensiones de Chrome (chrome://extensions/):
vueJS en Chrome
Volvemos a cargar el navegador, refrescar la página y ahora sí que disponemos de las herramientas:
vueJS en Chrome
Espero que os haya resultado de interés, y apoyad a este blog con alguna donación! Happy coding!