...
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 archivovue.config.jsen la raíz del proyecto que contenga lo siguiente:
...
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.
...
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.
