| Tabla de contenidos |
|---|
...
Explicación en vídeo
| Videolink | ||||
|---|---|---|---|---|
|
Consola del navegador
Cuando en nuestras aplicaciones Vue haya un error que no impida que la aplicación se inicie, es decir, un error en tiempo de ejecución (intentar acceder a una posición de un array que no existe, por ejemplo), los errores no aparecerán en la consola de Visual Studio Code, aparecerán en la consola del navegador. Esto es muy importante recordarlo. Para acceder a la consola del navegador, podemos pulsar F12, o hacer Click derecho → Inspeccionar, e ir a la pestaña Console.
Además, si queremos escribir a esta consola, lo podemos hacer en JavaScript con la instrucción:
| Bloque de código | ||
|---|---|---|
| ||
console.log( msg ) |
Extensión Vue Devtools en el navegador
Una última cosa que nos puede ser muy útil es la extensión Vue.js devtools que está disponible tanto para Chrome como para Firefox. Con esta extensión, en el mismo menú en el que estamos trabajando veremos una pestaña llamada Vue (aparecerá cuando estemos en una página Vue en modo desarrollo, que es lo que tendremos nosotros cuando lo estemos ejecutando en local). Desde ahí podemos inspeccionar todos los componentes con sus variables y valores. Podemos explorar el store de Vuex, los eventos que se han emitido y su contenido, ver métricas de rendimiento, etc.
Depuración con Visual Studio Code
VS Code dispone de un depurador, pero da problemas con el proyecto portal-ui (los breakpoints no se quedan marcados, se ponen como "unbounded" una vez lazamos el proyecto). Una posible solución puede ser siguiendo estos pasos:
- Añadimos devtool: 'source-map' al bloque configureWebpack del archivo vue.config.js (este cambio no lo subiremos a gitlab, solo estará en local):
- Añadimos las configuraciones de depuración. Podemos crear el archivo json correspondiente desde la pestaña de debug de VS Code, o podemos crear nosotros los archivos, así que lo más rápido será esto último. Creamos una carpeta llamada .vscode en la raíz del proyecto, y creamos un archivo launch.json dentro, en el que pegaremos lo siguiente:
Bloque de código language json
Depuración con VS Code
En primer lugar, debemos tener instalada la extensión Debugger for Chrome. En este caso voy a utilizar Chrome, pero si queremos hacerlo con Firefox, necesitaremos la extensión Debugger for Firefox:
Después, debemos tener un archivo vue.config.js en la raíz del proyecto que contenga lo siguiente:
module.exports = { configureWebpack: { devtool: 'source-map' } }
...
{ "version": "0.2.0", "configurations": [ { "
...
name": "
...
Launch Chrome", "
...
type": "
...
chrome", "
...
request": "
...
launch", "
...
sourceMaps":
...
true, "
...
url": "
...
https://miurl.atica.um.es:8000", "
...
webRoot":
...
"${workspaceFolder}", },
...
...
{
...
"name": "
...
Attach Chrome",
...
...
"type": "
...
chrome", "request": "
...
attach", "
...
port":
...
9222, "
...
sourceMaps":
...
true, "
...
url": "
...
https://miurl.atica.um.es:8000",
...
...
"
...
webRoot": "
...
${
...
workspaceFolder}
...
"
...
, } ] }
De este modo, podremos lanzar la aplicación en nuestro navegador, utilizando el debugger de VS Code. Primero debemos arrancar nuestro servidor de desarrollo local, es decir, ejecutar serve. Una vez arrancado, accedemos al debugger pulsando el botón Run en la barra lateral izquierda (si no está, podemos seleccionarlo haciendo click derecho en la barra), que tiene este aspecto:
En el menú abierto en dicho botón, veremos arriba un desplegable donde podremos seleccionar vuejs:chrome (o vuejs:firefox). Pulsamos el símbolo de Play verde para arrancar la aplicación en modo depuración.
Podemos establecer puntos de parada, breakpoints, en el código, clickando en la parte izquierda del número de línea en el código, y quedará marcado con un círculo rojo.
Teniendo un breakpoint, si ejecutamos el debugger, se parará la ejecución en esa línea, justo antes de ejecutar la instrucción. Tendremos una barra en la parte superior de VS Code, con las acciones disponibles en el debugger:
Las opciones que hacen cada botón, en orden, son Continuar (F8), Step Over (F6) para pasar a la siguiente instrucción sin pararse en el interior de una función si es a lo que se llama, Step Into (F5) para hacer lo mismo, pero metiéndonos, Step Out (F7) para salir de una función en la que nos hayamos metido, es decir, terminar su ejecución y detenerse de nuevo, Reiniciar (Ctrl+Shift+F5) para reiniciar la aplicación, Parar (Ctrl+F2) para detener la ejecución forzosamente.
En el menú lateral tendremos varias pestañas, en las que podremos ver las variables y sus valores, los watchers que tengamos definidos y la pila de llamadas que se han hecho, por ejemplo.
De este modo tenemos la posibilidad de depurar nuestras aplicaciones del mismo modo que en Eclipse, con la diferencia de acostumbrarse al nuevo IDE.
Depuración en el navegador
Los errores que típicamente veremos en nuestro IDE tendremos que verlos en el navegador. En JavaScript, una vez hayamos arrancado nuestra aplicación, los errores que puedan suceder no aparecerán en nuestro IDE. Ahí sólo nos vendran los errores que impidan que se arranque la aplicación. Para errores en tiempo de ejecución tendremos que ir a la consola del navegador. Para abrir la consola podemos hacer click derecho y pulsar en Inspeccionar, o hacer Ctrl+Shift+I, e irnos a la pestaña Console.
Ahí podremos ver los mensajes de error. También podemos hacer que la aplicación escriba en la consola utilizando: <code javascript> console.log('Valor de x ' + this.x); </console>
Desde la pestaña Sources, con la configuración anterior podremos ver el código fuente, y podemos hacer las mismas opciones de depuración, poniendo breakpoints de la misma manera.
Una última cosa que nos puede ser muy útil es la extensión Vue.js devtools que está disponible tanto para Chrome como para Firefox. Con esta extensión, en el mismo menú en el que estamos trabajando veremos una pestaña llamada Vue (aparecerá cuando estemos en una página Vue en modo desarrollo, que es lo que tendremos nosotros cuando lo estemos ejecutando en local). Desde ahí podemos inspeccionar todos los componentes con sus variables y valores. Podemos explorar el store de Vuex, los eventos que se han emitido y su contenido, ver métricas de rendimiento, etc.
- Cambiaremos el campo "url" en ambos bloques para poner nuestra url local donde se despliega el proyecto.
- Una vez hecho esto, ya está listo para funcionar. Para ello, primero lanzaremos el proyecto de forma normal, dándole a serve en npm scripts. Una vez iniciado, en la pestaña de debug de vs code (1), seleccionamos la configuración, que en este caso será Launch Chrome (2), y le damos al play (3):
- Con esto, se nos abrirá una nueva ventana de Chrome en la que funcionarán los breakpoints. El inconveniente de esto es que será una ventana en la que no estarán los datos de nuestro navegador, nuestra sesión y demás, y tendremos que hacer login cada vez, incluyendo el doble factor de autenticación. Esto puede ser tedioso para hacer pruebas, pero para eso hemos incluido otra configuración de depuración, la de "Attach Chrome". Esta configuración hace que se utilice una instancia de Chrome que ya está funcionando, y que estará escuchando en el puerto 9222 (campo "port" del launch.json). La diferencia, es que tendremos que iniciar Chrome desde la terminal de comandos (si ya lo tenemos abierto, habrá que cerrarlo por completo antes de ejecutar el comando), diciéndole explícitamente que utilice ese puerto como puerto de depuración remoto. Esto es, utilizando este comando:
Bloque de código "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
Todo esto es utilizando Chrome, para otros navegadores se podrá hacer también de forma similar.