Vue DevTools

Was sind die Vue DevTools?

Die Vue DevTools sind eine Browser-Extension, die speziell für Vue.js entwickelt wurde. Sie erweitern die Entwicklerwerkzeuge deines Browsers um einen „Vue"-Tab, der dir tiefe Einblicke in deine laufende Anwendung gibt.

Stell dir vor, du könntest in deiner Rails-App live sehen, welche Instanzvariablen in welchem Partial gerade verfügbar sind, wie sich der Session-Zustand verändert und welche Events gerade gefeuert werden. Genau das bieten die Vue DevTools.

Installation

Die Vue DevTools sind als Extension für alle großen Browser verfügbar:

Standalone-Version (ohne Extension)

Seit Vue DevTools 7 gibt es auch eine eigenständige Version, die direkt als Vite-Plugin eingebunden werden kann:

npm install -D vite-plugin-vue-devtools

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

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

Komponentenbaum inspizieren

Das Herzstück der Vue DevTools ist der Komponentenbaum. Er zeigt die gesamte Hierarchie deiner Vue-Komponenten — von der Wurzel-Komponente App.vue bis zum kleinsten Button.

▼ <App>
  ▼ <RouterView>
    ▼ <HomeView>
      ► <TheHeader>
      ▼ <ProductList>
        ► <ProductCard key="1">
        ► <ProductCard key="2">
        ► <ProductCard key="3">
      ► <TheFooter>

Wenn du eine Komponente im Baum auswählst, siehst du rechts deren Details:

• Props — Die von der Eltern-Komponente übergebenen Daten
• Reactive State — Alle reaktiven Variablen (ref, reactive)
• Computed — Berechnete Werte und ob sie aktuell im Cache sind
• Events — Welche Events die Komponente emittiert hat
• Slots — Welche Slots definiert sind und was sie enthalten

State inspizieren und live ändern

Du kannst den Zustand jeder Komponente nicht nur ansehen, sondern direkt in den DevTools ändern. Das ist extrem nützlich zum Debuggen:

<ProductCard>
  Props:
    product: { id: 1, name: "Vue-Handbuch", price: 29.99 }
    featured: true

  Reactive State:
    isInCart: false        ← Klick zum Ändern!
    quantity: 1            ← Wert direkt editieren!

  Computed:
    totalPrice: 29.99     (cached)

Pinia Stores debuggen

Der „Pinia"-Tab zeigt dir alle aktiven Stores, ihren Zustand und ihre History. Du kannst:

• Den aktuellen State jedes Stores sehen und editieren
• Alle Getters und ihre berechneten Werte inspizieren
• Die History aller State-Änderungen verfolgen (Time-Travel Debugging)
• Actions tracken — welche Actions wurden aufgerufen und mit welchen Parametern?

Stores:
  ▼ auth
    State:
      user: { id: 42, name: "Max", role: "admin" }
      isLoggedIn: true
      token: "eyJhbG..."
    Getters:
      fullName: "Max Mustermann"
      isAdmin: true

  ▼ cart
    State:
      items: [{ id: 1, qty: 2 }, { id: 3, qty: 1 }]
      couponCode: null
    Getters:
      totalItems: 3
      totalPrice: 89.97

Router inspizieren

Der „Routes"-Tab zeigt dir alle definierten Routen, die aktuelle Route und deren Parameter:

Aktuelle Route:
  Path:      /products/42
  Name:      product-detail
  Params:    { id: "42" }
  Query:     { tab: "reviews" }
  Matched:   ProductDetailView

Alle Routen:
  /                    → HomeView
  /products            → ProductListView
  /products/:id        → ProductDetailView
  /cart                → CartView
  /login               → LoginView

Events und Performance

Event-Timeline

Die Timeline zeigt alle Events in chronologischer Reihenfolge: Lifecycle-Hooks, emittierte Events, Router-Navigationen und Pinia-Mutations. So siehst du exakt, was in welcher Reihenfolge passiert.

12:34:56.100  [Router]    Navigation start → /products/42
12:34:56.102  [Component] ProductDetailView: setup()
12:34:56.105  [Component] ProductDetailView: onMounted()
12:34:56.110  [Pinia]     products/fetchProduct(42)
12:34:56.350  [Pinia]     products: state changed
12:34:56.352  [Component] ProductDetailView: re-render
12:34:56.355  [Router]    Navigation complete

Performance-Profiling

Die DevTools können die Render-Performance jeder Komponente messen. Du siehst, welche Komponenten wie oft und wie lange rendern — perfekt, um Performance-Engpässe zu finden.

Debugging-Tipps für den Alltag

// Ausgewählte Komponente in der Konsole
$vm.count        // Wert einer ref lesen
$vm.increment()  // Methode aufrufen

<script setup>
import { watch } from 'vue'

const cart = useCartStore()

watch(() => cart.items, (items) => {
  if (items.length > 10) {
    debugger // Browser hält hier an
  }
})
</script>

Debugging-Tools im Vergleich

Empfohlene Editor-Einrichtung

Neben den Browser DevTools solltest du auch deinen Editor optimal einrichten. Für VS Code empfehlen wir:

{
  "recommendations": [
    "vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

Zusammenfassung

• Vue DevTools als Browser-Extension und/oder Vite-Plugin installieren
• Der Komponentenbaum zeigt die gesamte UI-Hierarchie mit Props und State
• State kann live in den DevTools geändert werden — ohne Code-Änderung
• Pinia-Tab zeigt alle Stores mit Time-Travel Debugging
• Router-Tab zeigt alle Routen und die aktuelle Navigation
• Für API-Debugging den Browser Network-Tab nutzen
• VS Code mit Vue (Volar), ESLint und Prettier einrichten