| 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.
...
| 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:
...
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.
...