Vue DevTools

Vue DevTools es una extensión de navegador imprescindible para el desarrollo con Vue. Permite inspeccionar componentes, estado, rutas y eventos de tu aplicación en tiempo real, facilitando la depuración y el análisis del rendimiento.

Instalacion de Vue DevTools

Vue DevTools está disponible como extensión para los principales navegadores:

• Chrome: busca "Vue.js devtools" en la Chrome Web Store e instala la extensión oficial.
• Firefox: busca "Vue.js devtools" en Firefox Add-ons e instala la extensión oficial.
• Edge: busca "Vue.js devtools" en la tienda de complementos de Edge.

También existe una aplicación standalone que funciona como servidor independiente, útil cuando se trabaja con entornos donde las extensiones de navegador no están disponibles:

npm install -g @vue/devtools
vue-devtools

Integración con Vite

Vue DevTools ofrece un plugin de Vite que proporciona una experiencia mejorada directamente integrada en el flujo de desarrollo:

flowchart LR
  V["Servidor Vite (dev)"]
  P["vite-plugin-vue-devtools"]
  B["Panel en el navegador"]
  V --> P
  P --> B

npm install -D vite-plugin-vue-devtools

Configura el plugin en vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [vue(), VueDevTools()],
})

Con el plugin de Vite, DevTools se abre directamente en el navegador como un panel flotante sin necesidad de instalar la extensión.

Inspector de componentes

El inspector de componentes es la funcionalidad principal de Vue DevTools. Muestra el árbol de componentes de tu aplicación, permitiendo explorar:

• Árbol de componentes: visualiza la jerarquía completa de componentes renderizados, desde el componente raíz App hasta los componentes hoja.
• Props: muestra las props que recibe cada componente, sus tipos y valores actuales.
• Estado reactivo: muestra las variables ref y reactive del componente con sus valores en tiempo real.
• Computed: lista las propiedades computadas y sus valores calculados.
• Emits: muestra los eventos definidos con defineEmits y permite ver cuando se emiten.

Al seleccionar un componente en el árbol, el panel lateral muestra toda la información asociada. Puedes editar valores reactivos directamente desde DevTools para probar diferentes estados sin modificar el código.

<script setup lang="ts">
import { ref, computed } from 'vue'

// Estos valores aparecen en DevTools bajo "setup"
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

Inspector de Pinia

Cuando tu aplicación usa Pinia para la gestión de estado, DevTools muestra una pestaña dedicada que permite:

• Ver todos los stores: lista todos los stores definidos con defineStore, mostrando su identificador.
• Inspeccionar el estado: muestra el state de cada store con sus valores actuales.
• Ver getters: muestra los getters y sus valores calculados.
• Historial de acciones: registra cada acción ejecutada, mostrando el nombre de la acción, los parametros recibidos y los cambios de estado resultantes.
• Editar estado: permite modificar el state directamente desde DevTools para depuración.

// Este store aparece en el inspector de Pinia
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

Inspector de Router

El inspector de Vue Router muestra información detallada sobre el enrutamiento de la aplicación:

• Lista de rutas: muestra todas las rutas definidas, incluyendo rutas anidadas y rutas dinámicas.
• Ruta activa: resalta la ruta actual y muestra sus parámetros, query y hash.
• Historial de navegación: registra las transiciones entre rutas, mostrando la ruta de origen y destino.
• Guardias de navegación: muestra qué guardias se ejecutaron durante cada transición.
• Route meta: muestra los metadatos asociados a cada ruta.

Timeline

La pestaña Timeline es una herramienta de análisis que registra cronologicamente los eventos de la aplicación:

• Eventos de componentes: ciclos de vida (mounted, updated, unmounted), emisiones de eventos y renderizados.
• Eventos de Router: navegaciones, ejecución de guardias y resoluciones de rutas.
• Eventos de Pinia: mutaciones de estado y ejecución de acciones.
• Rendimiento: tiempo de renderizado de componentes y actualizaciones del DOM.
• Eventos personalizados: puedes registrar eventos propios en el timeline para depuración.

La timeline permite filtrar por tipo de evento y componente, facilitando el análisis de problemas de rendimiento o comportamientos inesperados.

Pestañas personalizadas

Vue DevTools permite crear inspectores personalizados mediante la API de plugins. Esto es útil para bibliotecas y herramientas que quieran integrarse con DevTools:

import { setupDevtoolsPlugin } from '@vue/devtools-api'

export function setupMyPlugin(app) {
  setupDevtoolsPlugin({
    id: 'mi-plugin',
    label: 'Mi Plugin',
    app
  }, (api) => {
    api.addInspector({
      id: 'mi-inspector',
      label: 'Mi Inspector'
    })
  })
}

DevTools en desarrollo vs producción

Vue DevTools solo funciona en modo desarrollo por defecto. En producción, la extensión no detecta la aplicación Vue. Esto es intencional por razones de seguridad y rendimiento:

• Desarrollo: DevTools se conecta automáticamente a la aplicación Vue y muestra toda la información disponible.
• Producción: la extensión muestra un mensaje indicando que Vue no se ha detectado en la página.
• Forzar en producción (no recomendado): se puede habilitar configurando app.config.devtools = true antes de montar la aplicación, pero esto expone la estructura interna de la aplicación.

Como buena práctica, no se debe habilitar DevTools en producción en aplicaciones públicas, ya que expone el árbol de componentes, el estado de la aplicación y las rutas.