DevTools and Debugging

Install Vue DevTools

Use the browser extension. Inspect the component tree, refs, and events while clicking through the UI.

Console evidence

Log values before and after events when the UI does not match expectations.

console.log(count.value, todos.value);

Common pitfalls

• Forgetting .value when reading or writing a ref in script
• Mutating props in a child
• Missing :key on v-for
• Putting async work in the wrong place and never assigning the result

Read the warning

Vue's console warnings about props and keys usually point near the real issue.