DOCSEARCHbyAlgolia
Submit Docs

Vue DevTools Documentation

repository·main·Indexed 25 days ago

https://github.com/vuejs/devtools

A suite of developer tools for Vue.js applications providing inspection and debugging capabilities. Version 7+ supports Vue 3 and is available as a Vite plugin, a standalone application (@vue/devtools), or browser extensions for Chrome and Firefox. Key features include component tree inspection, state editing, time travel debugging, and integrations with Pinia and Vue Router.

Tokens
21.9K
Snippets
42
Records
187
Agent score
83%

What's inside Vue DevTools

  2. Overview of Vue DevTools features

    main

    Vue DevTools is a developer tool designed to enhance productivity and debugging for Vue.js applications. Key capabilities include:

    • Live Editing Properties: Edit component properties directly in the tool to see immediate changes in the application without code restarts.
    • Time Travel Debugging: Inspect application state at specific points in time to track state changes and debug logic.
    • Vue Router Integration: Inspect the list of routes and their specific details.
    • Pinia Integration: Monitor and track custom events, including the source component, name, size, and payload, to identify performance bottlenecks.
    • Comprehensive Inspection: General inspection of the Vue application structure and state.

  4. Use @vue/devtools as a standalone application

    main
    The @vue/devtools package provides a standalone Vue DevTools application. This allows you to debug any Vue application regardless of the environment, including mobile browsers, Safari, or native scripts, extending debugging capabilities beyond standard desktop Chrome or Firefox extensions.

  5. Explore Vue DevTools core features

    main

    Vue DevTools provides several tabs for inspecting your application:

    • Overview: Displays a summary of your app, including the current Vue version, pages, and components.
    • Pages: Shows current routes and provides navigation between them. Includes a textbox to test route matching.
    • Components: Displays the component node tree, state information, and interactive tools like editing state or scrolling to a component.
    • Timeline: Monitors application performance, specifically time spent on rendering and updating.
    • Router: Integrated with vue-router to view route lists and specific route details.
    • Pinia: Integrated with pinia to view store lists, inspect details, and edit state.
    • Graph: Visualizes the relationships between different modules.
    • Settings: Provides configuration options to customize the DevTools experience.

  6. Use @vue/devtools-api for DevTools integrations

    main
    @vue/devtools-api is a plugin API designed to facilitate easier integrations with Vue DevTools. To build integrations or plugins that interact with the DevTools ecosystem, you should refer to the official documentation for detailed implementation guides.

  8. Configure the Vite plugin for Vue DevTools

    main

    Add vueDevTools() to the plugins array in your vite.config.ts file to enable DevTools in your project.

    import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools(),
  ],
})

  9. Enable Split Screen mode

    main

    Split Screen allows you to view and interact with multiple DevTools tabs simultaneously. You can activate this mode in two ways:

    1. Open the Command Palette (Ctrl+K / Cmd+K) and select the split screen option.
    2. Click the Vue Icon in the top left corner of the DevTools and select the split screen option from the menu.

  11. Set up the Vue DevTools development environment

    main

    To set up the local development environment, ensure you have the following prerequisites installed:

    • Node.js: version 18.19 or higher
    • PNPM: version 10 or higher

    After cloning the repository, install the project dependencies using:

    pnpm i

  12. Migrate plugins to v7

    main

    When migrating plugins from v6 to v7:

    1. API Compatibility: The v7 version is fully compatible with the v6 Plugin API, with the exception of TypeScript types.
    2. Timeline Tab: The Plugin Timeline tab has been moved. It is now managed within each individual plugin's menu rather than being a top-level tab.