Vue’s new generation of developer tools is officially open source!

Recently, Vue’s new generation of developer tools (DevTools) has been officially open source! Vue DevTools is a tool designed to enhance the Vue developer experience. It provides some features to help developers better understand Vue applications. Let’s take a look at the functions and usage of the new generation of Vue DevTools!

Function

First, let’s take a look at what functions are available in Vue DevTools!

Overview : Displays an overview of the application, including Vue version, number of pages, and number of components.

Pages : The Pages tab displays the current route and related information and provides a way to quickly navigate between pages. You can also use the text box to view the matches for each route.

Components : The Components tab displays component information, including node tree, status, etc., and provides some interactive functions, such as editing status, scrolling to components, etc.

Assets : The Assets tab displays the files in the project directory, and you can view information about the selected file.

Timeline : The Timeline tab allows browsing previous versions of a status or event.

Router : The Router tab is integrated with vue-router and allows you to view the route list and its details.

Pinia : The Pinia tab is integrated with Pinia to view storage lists and their details, and edit status.

Graph : The Graph tab shows the relationships between modules.

Settings : The Settings tab provides some options for customizing DevTools.

Inspect : Inspect is integrated with vite-plugin-inspect and can inspect Vite's conversion steps.

Inspector : Integrated with vite-plugin-vue-inspector, the Inspector can inspect your app's DOM tree and see the components that render it, making it easier to find where changes need to be made.

Standalone window : Vue DevTools can run as a standalone window, which is very helpful when you want to debug your application on a small screen.

use

There are many ways to use Vue DevTools in Vue projects:

Vite plugin
Standalone application
Chrome extension (currently under development)

Let's take a look at how to use Vue DevTools through Vite plug-ins and standalone applications .

Notice:

DevTools is only compatible with Vue 3. If using Vue2, use vue-devtools instead.

If using Nuxt, use nuxt-devtools for a more powerful developer experience.

Vite plugin

The first way to run Vue DevTools is the Vite plugin. If your project uses Vite, it is highly recommended to make it your preference for running DevTools as it provides more powerful functionality.

Note: Vue DevTools requires Vite v3.1 or higher .

First, install Vue DevTools with the following command:

npm add -D vite-plugin-vue-devtools

usage:

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

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

Configuration items:

interface VitePluginVueDevToolsOptions {
  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp

  /**
   * Customize openInEditor host (e.g. http://localhost:3000)
   * @default false
   */
  openInEditorHost?: string | false

  /**
   * DevTools client host (e.g. http://localhost:3000)
   * useful for projects that use a reverse proxy
   * @default false
   */
  clientHost?: string | false
}

The configuration items are as follows:

appendTo: Appends an import to the module id at appendTo the end, rather than adding the script to <body> it. Very useful for projects that don't use HTML files as entry points. Note, only set this option if you know exactly what it does. The default value is ''.
openInEditorHost: Customize the host where the editor is opened (for example: http://localhost:3000). The default value is false.
clientHost:DevTools client host (eg: http://localhost:3000), useful for projects using reverse proxies. The default value is false.

Standalone application

If you are using an unsupported browser, or have other specific needs (such as the app being in Electron), you can use the standalone app.

First, install DevTools globally through the following command (it can be installed globally or as a project dependency, here we take global installation as an example):

npm add -g @vue/devtools

After the installation is complete, run the following command in the terminal:

vue-devtools

Then add the following code to <head>the section where your HTML file is applied:

<script src="http://localhost:8098"></script>

Or, if you want to debug your device remotely:

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

You can view details in the official documentation: https://devtools-next.vuejs.org/guide/standalone

Check

Official website: https://devtools-next.vuejs.org/
Github: https://github.com/vuejs/devtools-next