Skip to content

Features

Discover all the features of the Vue DevTools

Overview

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

overview

Pages

Pages tab shows your current routes with some useful information, and provides a quick way to navigate between pages. You can also use the textbox to see how each route is matched.

pages

Components

Components tab shows your components information, including the node tree, state and so on. And provides some interactive features, e.g. edit state, scroll to component, etc.

components

Timeline

Timeline tab shows the performance of your app, including the time spent on rendering, updating, and so on.

timeline

Assets(Vite only)

Assets tab shows your files from the project directory, you can see the information of selected file with some helpful actions.

assets

Router

Router tab is a feature integrated with vue-router, allowing you to view the routes list and its details.

router

Pinia

Pinia tab is a feature integrated with pinia, allowing you to view the store list and its details, and edit the state.

pinia

Graph

Graph tab shows the relationship between modules.

graph

Settings

Settings tab provides some options to customize the DevTools.

settings

Inspect(Vite only)

Inspect expose the vite-plugin-inspect integration, allowing you to inspect transformation steps of Vite.

inspect

Inspector(Vite only)

Inspector expose the vite-plugin-vue-inspector integration, you can inspect your app's DOM tree and see which component is rendering it. Finding the place to make changes are much easier.

inspector

Separate Window(Vite only)

Vue DevTools is able to run as a separate window, it's so helpful when you want to debug your app in a small screen.

separate-window

Command Palette

Command Palette is a quick way to access some useful features of the DevTools such as easy navigation, run commands and Vue Documentations. You can open it with Ctrl+K or Cmd+K shortcut.

command-palette

Multiple Apps Support

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

multiple-apps

Split Screen

Split Screen is a useful feature to use multiple tabs at the same time. You can open it from Command Palette or by clicking the Vue Icon in the top left corner of the DevTools and activate it from there.

split-screen

Released under the MIT License.