...
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:
Cambiaremos el campo "url" en ambos bloques para poner nuestra url local donde se despliega el proyecto.Bloque de código language json { "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}", } ] } - 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
VS Code dispone de un Debugger, en la barra lateral.
La primera vez que lo hagamos, nos situaremos en el archivo App.vue y pulsaremos en Ejecutar y depurar:
Nos dará a elegir un navegador en el que depurar. Chrome está instalado por defecto, si queremos podemos instalar la extensión de Debugger for Firefox:
Seleccionamos uno y se nos creará un archivo launch.json con la configuración por defecto para el debugger. Tendremos que modificar la url
Se nos dará a elegir el entorno en el que depurar. Yo seleccionaré Chrome, pero podemos seleccionar también Firefox sin problemas:
Con esto, se nos generará un archivo launch.json en la carpeta .vscode, en el que vendrán especificadas todas las configuraciones que tengamos. Si ya tenemos añadida alguna configuración, y queremos añadir otra, haremos click en el desplegable de selección de configuración, y en Add configuration:
En este caso, sobre el contenido del propio launch.json nos dará a elegir. Para Chrome o Firefox tendremos que seleccionar respectivamente Chrome: Launch o Firefox: Launch (server):
Con esto, podemos ver las configuraciones en el archivo launch.json, donde tendremos que especificar la url en la que está desplegada nuestra aplicación, y podemos también cambiar el nombre de la configuración, modificando los campos url y name:
Por último, para arrancar la depuración, teniendo seleccionada la configuración correspondiente en el desplegable, haremos click sobre el triángulo verde:
Con esto, se nos abrirá el navegador correspondiente en modo depuración, accediendo a la url que hayamos especificado.
Para establecer puntos de parada, breakpoints, en el código, lo haremos 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.