# Vue DevTools — Official Browser Extension for Debugging Vue Apps

> Vue DevTools is the official browser extension for inspecting Vue.js component trees, state, events, routes, and Pinia stores in real time during development.

## Install

Save in your project root:

# Vue DevTools — Official Browser Extension for Debugging Vue Apps

## Quick Use
```bash
# Install browser extension from Chrome Web Store or Firefox Add-ons
# Or use the standalone Electron app
npm install -g @vue/devtools
vue-devtools
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-cdbb3b11
Author: AI Open Source