Historial de página

Depuración con VS 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:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Posteriormente necesitamos un archivo .vscode/launch.json con el siguiente contenido:

{
    "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:

...

De este modo tenemos la posibilidad de depurar nuestras aplicaciones del mismo modo que en Eclipse, con la diferencia de acostumbrarse al nuevo IDE.

Depuración en el navegador

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, e irnos a la pestaña Console.

...