debugging-in-vscode.md

title	type	order
Depurando en VS Code	cookbook	8

Toda aplicación alcanza un punto donde es necesario entender los errores, desde los más chicos a los más grandes. En esta receta, se exploran algunos flujos de trabajo para usuarios de VS Code a quienes les gustaría depurar su aplicación en el navegador.

Esta receta muestra como depurar aplicaciones Vue CLI en VS Code mientras ejecutan en el navegador.

Nota: Esta receta cubre Chrome y Firefox. Si ud sabe como configurar la depuración en VS Code con otros navegadores, por favor considere compartir sus percepciones (vea al final de la página).

Prerequisitos

Asegúrese de tener VS Code y el navegador de su preferencia instalado, así como también la última versión de la extensión de depuración que corresponda instalada y habilitada:

• Depurador para Chrome
• Depurador para Firefox

Instale y cree un proyecto con vue-cli, siguiendo las instrucciones en Guía Vue CLI. Muévase dentro del directorio de la aplicación recientemente creada y abra VS Code.

Mostrando código fuente en el Navegador

Antes de que pueda depurar sus componentes Vue desde VS Code, necesitará actualizar la configuración de Webpack generada para poder construir los sourcemaps. Haremos esto para que nuestro depurador tenga una forma de correlacionar el código del archivo comprimido con la posición en el archivo original. Esto asegura que pueda depurar una aplicación incluso luego de que sus assets hayan sido optimizados por Webpack.

Si usa Vue CLI 2, configure o actualice la propiedad devtool dentro de index.js:

devtool: 'source-map',

Si usa Vue CLI 3, configure o actualice la propiedad devtool dentro de vue.config.js:

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

Lanzando la aplicación desde VS Code

Haga clic en el icono Depurar en la Barra de Actividad para cargar la vista de Depuración. Luego haga clic en el icono Engranaje para configurar el archivo launch.json, seleccione Chrome/Firefox: Launch como el entorno. Reemplace el contenido del archivo launch.json generado con la configuración correspondiente:

{
  "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}/" }]
    }
  ]
}

Poniendo un Breakpoint

1. Ponga un breakpoint en src/components/HolaMundo.vue en la línea 90 donde la función data devuelve una cadena de texto.

2. Abra su terminal favorita en la carpeta raíz y corra su aplicación usando Vue CLI:

npm start

3. Vaya a la vista de Depuración, seleccione la configuración 'vuejs: chrome/firefox', luego presione F5 o haga clic en el botón verde de reproducir.

4. Su breakpoint debería ser alcanzado una vez que la nueva instancia de su navegador se abra: http://localhost:8080.

Patrones Alternativos

Vue Devtools

Hay otros modelos de depuración, variando en complejidad. El más simple y popular es usar el excelente Vue.js devtools para Chrome y para Firefox. Algunos de los beneficios de trabajar con las devtools es que le permite editar las propiedades y ver los cambios reflejados en tiempo real. El otro gran beneficio es la habilidad de depurar viajando en el tiempo para Vuex.

Por favor tenga presente que si la página usa una compilación minificada de producción de Vue.js (como ser el link estándar del CDN), la inspección de devtools estará deshabilitada por defecto lo cual no mostrará el panel de Vue. Si se cambia a una versión no minificada, quizás sea necesario que recargue la página forzadamente para poder verlo.

Simple Sentencia Debugger

El ejemplo anterior tiene un gran flujo de trabajo. Sin embargo, hay una opción alternativa donde puede usar la sentencia nativa debugger directamente en su código. Si elige trabajar de esta forma, es importante que recuerde remover las sentencias una vez haya terminado.

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    const hello = 'Hola Mundo!'
    debugger
    this.message = hello
  }
};
</script>

Expresiones de gratitud

Esta receta se basa en una contribución de Kenneth Auchenberg, disponible aquí.