...
| Bloque de código | ||
|---|---|---|
| ||
console.log( msg ) |
Depuración con Visual Studio 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:
| Bloque de código | ||
|---|---|---|
| ||
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
} |
Posteriormente necesitamos añadir una configuración para iniciar la depuración. En la barra lateral izquierda, nos iremos al apartado de depuración:
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
| Advertencia |
|---|
El debugger de VS Code está dando problemas con el proyecto Portal UI, seguramente por algo de configuración que nos falte. Estamos buscando una solución, en cuanto lo tengamos actualizaremos esta guía. |
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 urlSi 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:
...
De este modo tenemos la posibilidad de depurar nuestras aplicaciones del mismo modo que en Eclipse, con la diferencia de acostumbrarse al nuevo IDE.
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.