Features

Explore the features of Vue DevTools.

Overview

Shows a quick overview of your app, including the Vue version, pages and components.

Pages

The Pages tab lists your routes and lets you navigate between pages. Enter a path in the text box to see which routes it matches.

Components

The Components tab shows the component tree and state. You can edit state values and scroll to a component on the page.

Timeline

The Timeline tab shows performance events, including the time spent rendering and updating components.

Router

The Router tab integrates with Vue Router to show your routes and their details.

Pinia

The Pinia tab integrates with Pinia to show your stores and let you edit their state.

Graph

The Graph tab shows the reactive dependencies of the selected component.

Settings

Use the Settings tab to customize Vue DevTools.

Inspect (Vite only)

Inspect uses Vite DevTools to show how Vite transforms your modules.

Inspector (Vite only)

Vue DevTools v9 includes component inspection in its Vite DevTools dock. Activate the component locator, select an element in the page, and Vue DevTools will reveal its owning Vue component.

Command Palette

Use the Command Palette to navigate panels, run commands, and open the Vue documentation. Press Ctrl+K or Cmd+K to open it.

Multiple App Support

If your app uses multiple Vue instances, you can switch between them in the top left corner of the DevTools.