...
Posteriormente necesitamos un archivo.vscode/launch.jsoncon el siguiente contenido:
| Bloque de código | ||
|---|---|---|
| ||
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs:firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
} |
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.
añadir una configuración para iniciar la depuración. En la barra lateral izquierda, nos iremos al apartado de depuración:
Si todavía no tenemos ninguna configuración, se nos mostrará lo siguiente, y haremos click en create a launch.json file:
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 Podemos 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.
...
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 (al menos en Chrome), 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>
| Bloque de código | ||
|---|---|---|
| ||
console.log('Valor de x ' + this.x); |
...
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.
...