La Depuración de Código en VUE JS es muy importante puesto que permite encontrar errores de forma rápida y incluso obtener una mejor compresión del funcionamiento de tu página web. Algo paradojico es que la mayoría de personas que programan en el front end no saben realizar depuración (debug) ya que resulta más común realizar depuración a nivel de backend, sin embargo las herramientas disponibles para depurar en back son practicamente las mismas que en el front.
Si quieres aprender a programar en Java sigue este enlace.
1. Qué es depurar?
La Depuración es la técnica con la cual los programadores encuentran errores en su código, estas herramienta permite que el programador detenga la ejecución en un punto del código y revise valores de variables e incluso ejecute el programa paso a paso a fin de observar que esta haciendo el código, que bifurcaciones esta tomando o cuantas veces se esta repitiendo un ciclo.
2. Instalación de VUE Devtools
Lo primero que debemos hacer para depurar en VUE es descargar una extensión, en estas páginas se manejará el navegador Gooogle Chrome, sin embargo cualquier otro navegador como Firefrox o Edge podrá servir para depurar.
En este link puedes encontrar el enlace directo para descargar la extensión vue.js devtools
Una vez instalado podrás encontrar todas las opciones de depuración cuando trabajes con tus páginas en VUE.
3. Usar vuejs devtools
Una vez instalado vue js devtools, y estando en una página vue podemos abrir las herramientas de desarrollador de Chrome, aunque hay muchas formas una sencilla y rápida es simplemente dar click derecho y elegir la opción Inspeccionar, lo cual abre las herramientas de depuración y podemos ubicarnos en la pestaña VUE para las diferentes opciones de VUE.
En esta pestaña se puede tener acceso a las siguientes herramientas:
- Inspector: permite ver las opciones de componentes, vuex y routes de la aplicación vue.
- Timeline: muestra la ejecución de métodos y de eventos que se han generado en la aplicación.
- Components: muestra la jerarquía de componentes de la página y permite entender su distribución a fin de determinar si la página esta correctamente creada.
- Vuex: este es el almacén de datos de nuestra aplicación VUE que nos permite también interactuar con algunos métodos y lógica necesaria en nuestra aplicación.
- Routes: permite ver las rutas de la aplicación a fin d determinar que la navegación esta bien diseñada y funciona correctamente.
4. Otras opciones de depuración
Las opciones anteriores de VUE se pueden mezclar con las opciones tradicionales de depuración y herramientas de desarrollo de Chrome, algunas de las más importantes y su funcionalidad son las siguientes.
4.1. Elements
Esta pestaña permite visualizar el contenido HTML que se esta mostrando en la página web, lo más interesante aquí es que nos podemos ubicar en una parte de la página para navegar directamente al HTML o al revés pararnos en una parte del HTML y visualizar el componente en la página el cual se iluminará. También podemos cambiar el contenido del HTML o de los CSS y ver como se comportan en la página, esto último es muy útil puesto que luego podemos volver sobre nuestro código e incorporar los ajustes que hayamos hecho en esta pestaña del devtools.
4.2. Console
La consola nos permite ejecutar código javascript, inspeccionar variables y sobre todo observar mensajes que este dejando la aplicción, por esto los programadores habitualmente dejan mensajes en la consola y pueden verificar si la aplicación esta realizando lo que se espera.
4.3. Network
La sección de red es muy importante puesto que muestra todas las peticiones que la página intercambia, aquí podemos visualizar la forma en que se realizan las peticiones incluyendo los encabezados y las respeustas que da el servidor para cada petición, también es muy útil para saber si la página esta pidiendo la información correcta y si el servidor esta entregando lo esperado. Otro uso útil de esta pestaña es verificar los tiempos y tamaños de las peticiones así sabremos si una petición esta poniendo lenta la página. Finalmente, la información que arroja esta pestaña sirve para determinar aspectos de seguridad como que la información obtenida no tenga datos sensibles o información adicional que no se este requiriendo.
En la red, también existe una posibilidad muy útil y es trabajar sin cache, lo anterior implica que todas las peticiones van a ir directamente al servidor en lugar de buscar las respuestas de estas peticiones en la memoria cache del navegador, para dar un poco más de detalle de esto, sucede que cuando se realiza una petición el navegador guarda la petición y su respuesta en una memoria llamada cache, de esta forma la próxima petición la podrá resolver directamente de esta memoria sin necesidad de ir al servidor, lo anterior ayuda muchísimo con los tiempos de respuesta de las páginas web, pero puede ser un poco molesto si en realidad se necesita que los datos vengan del servidor, habitualmente las páginas web cambian un poco las peticiones o agregan parámetros para obligar al navegador a realizar la petición contra el servidor y no contra la caché.
4.4. Sources
La pestaña de sources nos va a servir para visualizar nuestros archivos js, y poner puntos de interrupción, visualizar valores de variables o ejecutar pasos a paso los scripts, por lo tanto estas opciones también son muy útiles para los programadores cuando depuran en código.
4.5. Otras pestañas y generalidades de devtools
En devtools existen más pestañas por ejemplo para revisar detalles de rendimiento de nuestra página, de la memoria, de seguridad, de la informaición que nuestra página almacena en bases de datos locales o localstorage y muchas otras funcionalidades que resultan útiles para el programador.
Una observación final es que Chrome ya viene por defecto con estas herramientas la única que debemos instalar es la que se anoto al principio del artículo que es un complemento de devtools para VUE.
Deja un comentario
Lo siento, debes estar conectado para publicar un comentario.