DOCSEARCHbyAlgolia
Submit Docs

Vue DevTools Documentation

website·Indexed 19 days ago

https://devtools.vuejs.org/

Documentation for Vue DevTools, a tool designed to enhance the Vue development experience. Includes guides for installation via browser extensions, the standalone app, and the Vite plugin, as well as information on the Plugins API, migration to v7, and troubleshooting.

Tokens
4.3K
Snippets
27
Records
42
Agent score
98%

What's inside Vue DevTools

  1. Overview of Vue DevTools features

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

    • Live Editing: Modify component properties in real-time to see immediate changes without restarting the application.
    • Time Travel Debugging: Inspect the state of the application store at any specific point in time to track state changes and identify bugs.
    • Vue Router Integration: Access and inspect the routes list and associated route details.
    • Pinia Integration: Monitor and track custom events, including the source component, event name, size, and payload, which helps in identifying performance bottlenecks.

  2. Explore Vue DevTools core tabs

    Vue DevTools provides several tabs for application analysis:

    • Overview: Displays the Vue version, pages, and components.
    • Pages: Shows current routes, provides navigation, and includes a textbox to test route matching.
    • Components: Displays the component node tree and state, allowing users to edit state or scroll to specific components.
    • Timeline: Monitors app performance, specifically time spent on rendering and updating.
    • Graph: Visualizes the relationships between modules.

  3. Contribute changes to Vue DevTools

    Pull requests for bug fixes are welcome. For new ideas or feature requests, you must open an issue or a discussion first before submitting a pull request. Note that the project uses simple-git-hooks to automatically format changed files using ESLint on every commit.

  4. Install Vue DevTools Vite plugin

    The Vue DevTools Vite plugin is the recommended way to run DevTools in Vite-based projects. It requires Vite v6 or higher.
    # npm
npm add -D vite-plugin-vue-devtools

# pnpm
pnpm add -D vite-plugin-vue-devtools

# yarn
yarn add -D vite-plugin-vue-devtools

# bun
bun add -D vite-plugin-vue-devtools

  5. Inspect Cordova applications

    To inspect Cordova apps, ensure the DevTools server is accessible on your device/simulator. Call devtools.connect() using your local IP. For file: protocol apps, wait for the deviceready event before connecting. This only works in development builds.
    import devtools from '@vue/devtools'

function onDeviceReady() {
  devtools.connect('http://192.168.xx.yy') // Use your local IP
}

if (window.location.protocol === 'file:') {
  document.addEventListener('deviceready', onDeviceReady, false)
} else {
  onDeviceReady()
}

  6. Enable 'Open in Editor' for Webpack projects

    To enable the 'Open in Editor' feature in a Webpack project, install the launch-editor-middleware package and register the /__open-in-editor HTTP route within the devServer configuration. The editor is typically guessed automatically, but can be specified manually (e.g., 'code').
    const openInEditor = require('launch-editor-middleware')

module.exports = {
  // ...
  devServer: {
    before: (app) => {
      app.use('/__open-in-editor', openInEditor('code'))
    }
  }
}

  8. Verify Vue DevTools compatibility and requirements

    Vue DevTools is only compatible with Vue 3. For projects using Vue 2, use the legacy vue-devtools (v6). Additionally, users of Nuxt are recommended to use nuxt-devtools for an enhanced developer experience.

  10. Use Vue DevTools via global package

    After installing @vue/devtools globally, start the server by running the vue-devtools command. To connect your application, add a script tag to the <head> section of your HTML. For remote debugging, configure the host and port using global window variables before the script load.
    vue-devtools

    <!-- Local connection --> <script src="http://localhost:8098"></script>

    <!-- Remote connection --> <script> window.VUE_DEVTOOLS_HOST = '<your-local-ip>' // e.g., 192.168.x.x window.VUE_DEVTOOLS_PORT = '<devtools-port>' // default: 8098 </script> <script src="http://<your-local-ip>:8098"></script>

  11. Choose a Vue DevTools installation method

    Vue DevTools can be integrated into projects using one of four primary methods depending on the development environment: a Vite Plugin for Vite-based projects, a Standalone App, a Chrome Extension, or a Firefox Extension.

  12. Set up the Vue DevTools development environment

    To develop for Vue DevTools, you must have Node.js version 18.19+ and PNPM version 10+ installed. After cloning the repository, install the project dependencies using pnpm i. If you encounter issues installing electron due to network instability, configure the Electron mirror before running the install command again.
    # Install dependencies
pnpm i

# Optional: Set Electron mirror if installation fails
pnpm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/