Vue DevTools — Official Browser Extension for Debugging Vue Apps

Introduction

Vue DevTools is the official debugging companion for Vue.js applications. It provides a browser extension and standalone app that let developers inspect the component hierarchy, examine reactive state and props, track custom events, debug Vuex and Pinia stores, and profile component rendering performance.

What Vue DevTools Does

• Displays the full component tree with props, data, computed properties, and slots
• Provides a timeline view of component events, mutations, and route navigations
• Inspects and edits Pinia and Vuex store state in real time
• Shows Vue Router route matching, navigation guards, and route params
• Profiles component render performance to identify re-render bottlenecks

Architecture Overview

The extension consists of a content script that injects a hook into the page context to connect with the Vue runtime. When Vue initializes, it registers with the DevTools hook and exposes its internal component tree and reactivity system. A background script bridges the page context to the DevTools panel, which is a Vue-based single-page application. The panel subscribes to component tree updates, state mutations, and events via a structured messaging protocol. The standalone Electron app uses the same panel connected over a WebSocket for non-browser environments.

Self-Hosting & Configuration

• Install from Chrome Web Store, Firefox Add-ons, or Edge Add-ons for browser use
• Use npm install -g @vue/devtools for the standalone Electron version
• DevTools activates automatically when a Vue app is detected in development mode
• For production debugging, set app.config.devtools = true before mounting
• Configure component name display format in the DevTools settings panel

Key Features

• Component inspector: click any component to view its full reactive state and props
• State editing: modify data and store values directly from the DevTools panel
• Event timeline: chronological log of emitted events, route changes, and store mutations
• Performance profiling: measure component render times and identify unnecessary re-renders
• Multi-app support: switch between multiple Vue instances on the same page

Comparison with Similar Tools

• React DevTools — React-specific component inspector; Vue DevTools is purpose-built for Vue reactivity and SFCs
• Redux DevTools — Focuses on action-based state; Vue DevTools covers Pinia, Vuex, and component-level state
• Angular DevTools — Angular-specific with change detection profiling; Vue DevTools profiles Vue's reactivity system
• Browser console — Generic JavaScript debugging; Vue DevTools provides structured Vue-aware inspection

FAQ

Q: Does it work with Vue 2 and Vue 3? A: The latest version targets Vue 3. A legacy version (v5.x) is available for Vue 2 applications.

Q: Why does it not detect my Vue app? A: Ensure you are running a development build. Production builds strip the DevTools hook by default.

Q: Can I use it with Nuxt? A: Yes. Nuxt 3 includes its own DevTools layer that extends Vue DevTools with Nuxt-specific panels for modules, routes, and server API.

Q: Does the standalone app work with mobile devices? A: Yes. Point your mobile app's WebSocket connection to the standalone DevTools server for remote debugging.

Sources

• https://github.com/vuejs/devtools
• https://devtools.vuejs.org