Herramientas para desarrollar con VueJS

Posted by in Javascript y TypeScript

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

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

vueJS en Firefox 2

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

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

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

vueJS en Chrome

Probamos a cargar nuestro ejemplo:

vueJS en Chrome

vueJS en Chrome

y nos encontramos de que no detecta VueJs, al pulsar en el icono de VueJS:

vueJS en Chrome

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

vueJS en Chrome

Volvemos a cargar el navegador, refrescar la página y ahora sí que disponemos de las herramientas:

vueJS en Chrome

vueJS en Chrome

Espero que os haya resultado de interés, y apoyad a este blog con alguna donación! Happy coding!

Google+ Comments - Comentarios Google+