Vue.js Debugging Tips for Faster Development

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>

Performance Debugging

Use the Performance tab in Vue DevTools to identify slow components. Watch for:

• Components re-rendering unnecessarily
• Computed properties recalculating too often
• Large lists without v-memo or virtual scrolling

For production Vue apps, Bugsly captures errors with component context, showing exactly which component and props led to the failure.