Vue.js Devtools

Vue Devtools is a browser extension that shows what happens inside a Vue application. A normal browser inspector displays plain HTML, which hides components, data, and events. Vue Devtools reveals the component tree, the live values of every property, and the events that components send. Finding a bug becomes a matter of looking at the data instead of guessing.

Think of a doctor with an X-ray. The skin shows only the outside of a body. The X-ray shows the bones and organs beneath. Vue Devtools is the X-ray for your application.

Install Vue Devtools

Search for "Vue.js devtools" in the extension store of Chrome, Edge, or Firefox, and install the official version. Open your Vue project in the browser, press F12 to open the developer tools, and look for a tab named Vue. The extension works with applications that run in development mode. Production builds hide the panel by default.

Diagram: Where the Tab Appears

Browser developer tools
  Elements | Console | Network | Vue   <-- new tab

Explore the Components Tab

The Components tab lists every component as a tree. Click a component to see its props, data, computed values, and injected values on the right side.

App
 +-- NavBar
 +-- ProductList
      +-- ProductCard (price: 25, inStock: true)
      +-- ProductCard (price: 40, inStock: false)

Click ProductCard and the panel shows price and inStock with current values.

Edit Data Live

Double-click a value in the panel and type a new one. The page updates instantly. Use this feature to test how a component looks when a list is empty, a name is very long, or a counter reaches a high number. No code change or page reload is required.

Diagram: Live Editing

Panel: inStock = true
Developer changes it to false
   --> Vue redraws the card with an "Out of stock" label

Find a Component on the Page

Click the target icon in the Components tab, then click any part of the page. Devtools jumps to the component that owns that spot. The reverse works too: hover a component in the tree to highlight it on the page.

Inspect Pinia Stores

The Pinia tab lists every store with its state and getters. Edit state values directly and watch the whole application react. The panel helps track how a cart total or a login status changes across components.

Track Actions on the Timeline

The Timeline tab records events as they happen. It logs component events, mouse clicks, keyboard actions, and router navigation in order. Press record, perform the steps that cause a problem, and stop. The list shows what fired and when.

Diagram: Timeline Entries

00:01  click        "Add to cart" button
00:01  event        cart-updated (from ProductCard)
00:02  route        /products  -->  /cart

Debug Routes

The Routes tab shows every route in Vue Router, marks the active one, and displays its parameters and meta fields. A page that refuses to open often traces back to a wrong path or a missing parameter, and this panel exposes both quickly.

Common Debugging Tricks

• Use console.log inside watchers to see old and new values.
• Check props first when a child component shows wrong data. A parent may pass the wrong value.
• Look for a missing :key when list items behave strangely after sorting.
• Read the browser console. Vue prints clear warnings in development mode, such as missing props or failed property reads.
• Add a debugger statement to pause code and inspect variables line by line.

watch(count, (newValue, oldValue) => {
  console.log("count changed from", oldValue, "to", newValue);
});

Work with Source Maps

Vite creates source maps in development, so error messages point to your original .vue files and line numbers instead of compressed code. Click the file link in the console to jump to the exact line.

Summary

Vue Devtools opens the inside of a running application. The Components tab shows props and data, live editing tests edge cases, the Pinia tab exposes shared state, the Timeline records events in order, and the Routes tab explains navigation. Combined with console warnings and source maps, the tool turns bug hunting into a clear, visual process.