Vue DevTools

🔍 What are Vue DevTools?

Vue DevTools is a browser extension that helps you inspect, debug, and optimize Vue applications. It provides real-time component inspection, state management tracking, performance profiling, and event monitoring for efficient development workflows.


<!-- Debug this component with DevTools -->
<script setup>
const message = ref('Hello DevTools!')
const count = ref(0)
</script>

<template>
  <div>{{ message }} - Count: {{ count }}</div>
</template>

DevTools Features

🧩

Component Inspector

View component hierarchy and props

Props Data Computed

📊

Timeline

Track events and performance

Events Updates Timing

🗂️

State Management

Inspect Pinia/Vuex stores

State Actions Mutations

🚀

Performance

Analyze component rendering

Render Time Re-renders Memory

🔹 Installing Vue DevTools

Get Vue DevTools for your browser:

Browser Extensions:

Chrome: Install from Chrome Web Store
Firefox: Install from Firefox Add-ons
Edge: Install from Edge Add-ons
Standalone: Use Electron app for any browser

# Install standalone version
npm install -g @vue/devtools

# Run standalone DevTools
vue-devtools

🔹 Inspecting Components

View and edit component data in real-time:

<script setup>
const user = ref({
  name: 'John Doe',
  age: 25,
  email: '[email protected]'
})

const isActive = ref(true)
const items = ref(['Apple', 'Banana', 'Orange'])
</script>

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p>Age: {{ user.age }}</p>
    <p v-if="isActive">Status: Active</p>
  </div>
</template>

In DevTools you can:

View all reactive data (user, isActive, items)
Edit values and see changes instantly
Inspect computed properties
Track component lifecycle

🔹 Timeline and Events

Track application events and updates:

<script setup>
const count = ref(0)

function increment() {
  count.value++
  console.log('Count incremented:', count.value)
}

// Watch for changes
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})
</script>

<template>
  <button @click="increment">
    Clicked {{ count }} times
  </button>
</template>

Timeline shows: Click events, state updates, component renders, and performance metrics

🔹 Debugging with DevTools

Common debugging techniques:

<script setup>
const products = ref([])
const loading = ref(true)
const error = ref(null)

async function fetchProducts() {
  try {
    loading.value = true
    const response = await fetch('/api/products')
    products.value = await response.json()
  } catch (e) {
    error.value = e.message
    // Check error in DevTools
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchProducts()
})
</script>

DevTools Debugging Tips:

Use component inspector to verify data
Check timeline for async operations
Monitor network requests
Track state changes over time

🔹 Performance Profiling

Identify performance bottlenecks:

<script setup>
// Expensive computation
const expensiveComputed = computed(() => {
  // DevTools will show render time
  return items.value.map(item => {
    return item.price * 1.2
  })
})

// Track re-renders
onUpdated(() => {
  console.log('Component re-rendered')
})
</script>

Performance tab shows: Component render times, update frequency, and memory usage