Vue.js Debugging Tips for Faster Development

Vue's reactivity system can be magical until something breaks. Here's how to debug effectively.

Vue DevTools

The Vue DevTools browser extension is essential:

Component inspector — view props, data, computed values, and refs for any component
Timeline — see events, mutations, and performance marks chronologically
Pinia/Vuex inspector — inspect store state and track mutations
Router tab — debug route matching and navigation guards

Debug Reactivity Issues

Vue 3's reactivity system uses Proxies. When reactivity breaks, use these techniques:

import { watch, watchEffect } from 'vue';

// Track when a reactive value changes
watch(
  () => state.user,
  (newVal, oldVal) => {
    console.log('user changed:', { oldVal, newVal });
  },
  { deep: true }
);

// Track all reactive dependencies
watchEffect(() => {
  console.log('Dependencies accessed:', state.user?.name, state.count);
});

Common Reactivity Pitfalls

// Bug: adding new properties to reactive object
const state = reactive({ name: 'Alice' });
state.age = 25; // This IS reactive in Vue 3 (unlike Vue 2)

// Bug: destructuring loses reactivity
const { count } = reactive({ count: 0 }); // count is NOT reactive
const { count } = toRefs(reactive({ count: 0 })); // count IS reactive

// Bug: replacing reactive object
let state = reactive({ items: [] });
state = reactive({ items: [1, 2, 3] }); // Breaks reactivity!
state.items = [1, 2, 3]; // Correct way

Debug Composition API

Add debug labels to computed and watchers:

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
}, {
  onTrack(e) { console.log('fullName tracking:', e); },
  onTrigger(e) { console.log('fullName triggered:', e); },
});

Template Debugging

<template>
  <!-- Quick debug output -->
  <pre>{{ JSON.stringify(user, null, 2) }}</pre>

  <!-- Conditional debug panel -->
  <DebugPanel v-if="isDev" :data="{ user, orders, loading }" />
</template>