The next generation of Vue3 Devtools is officially open source

What is Vue DevTools

Vue DevTools is a tool designed to enhance the Vue developer experience. It provides features to help developers better understand Vue applications.

Vue DevTools: Unleash Vue Developer Experience. Enhance your Vue development journey with an amazing experience!

Typical features include:

  • Pages: Displays the current route along with some useful information and provides a quick way to navigate between pages. Developers can also use text boxes to view matches for each route.
  • Components: Displays component information, including node tree, status, etc. And provide some interactive functions, such as: editing status, scrolling to components, etc.
  • Assets: Displays files in the project directory. Developers can view selected file information through some useful operations.
  • Timeline: Allows browsing of previous versions of a state or event.
  • Pinia: A function integrated with pinia that allows viewing the store list and its details, and editing the status
  • Gragh: Shows relationships between modules.

For example, the following shows screenshots of different functions:

There are many ways to use Vue DevTools in Vue projects, such as:

  • Vite Plugin
  • Standalone APP
  • Chrome extension

The typical high-quality features of Vue DevTools can be summarized as follows:

  • Premium Developer Experience: Enhance your Vue development journey with an amazing experience!
  • A wide range of applications: supports Vite plug-ins, browser extensions, and standalone applications, there is always one suitable for you.
  • Extensible: Provides a plug-in API for integration, which is a friendly bridge between libraries and development tools.
  • Component Wizard: Supports viewing component node tree, status and relationships.

It is worth mentioning that DevTools is only compatible with Vue 3. If you are still using Vue2, you can use vue-devtools instead. And if you use Nuxt, you can use nuxt-devtools for a more powerful developer experience.

Vue DevTools is currently open source on Github through the MIT protocol, with more than 0.5k stars and 1k project dependencies. It is a Vue ecological front-end open source project worthy of attention.

How to use Vue DevTools

Vite Plugin

Vue DevTools provides a Vite plug-in for running Vue DevTools. If your project uses Vite, it is highly recommended as the preferred option for running DevTools as it provides more powerful functionality.

$ 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

Then add the plugin directly in the Vite configuration:

//Configuration Vite


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


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

Standalone application

​You can use the standalone application if you are using an unsupported browser or have other specific needs (such as the application being hosted in Electron).

First install the corresponding dependencies:

$ npm add -g @vue /devtools
// pnpm
$ pnpm add -g @vue /devtools
// yarn
$ yarn global  add  @vue /devtools
// bun
$ bun add -g @vue /devtools

After installing the package globally, run the following command:

vue-devtools
 // Change the port through PORT= 8000 vue-devtools, and then set it in the APP as follows
window.__VUE_DEVTOOLS_PORT__ = 8000 
// or
devtools.connect( /host/ , 8000 )

Then add the following code to the <head> section of your application’s HTML file:

< script  src = "http://localhost:8098" > </ script > 
//Introduced through script tag

Or use the following code to remotely debug the device:

< 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 > 
// The ip here needs to be set to the real machine IP

<your-local-ip> is usually something like 192.168.xx.

Of course, you can also choose to import it in the application:

import {devtools} from  '@vue/devtools' 
// Import package

Then use the connect method:

if (process.env.NODE_ENV === 'development' )
  devtools.connect( /*requires host and port*/ )
  • host: is an optional parameter that tells the application where the devtools middleware server is running. If you are debugging the application on your computer, you do not have to set this parameter (the default is http://localhost), but if you want to debug a colleague, the application is located On mobile devices,… ).
  • port : is an optional parameter that tells the application which port the devtools middleware server is running on. If using a proxy server you may need to set this to null so that the port is not added to the connection URL.

The following example needs to ensure that the page under http://your-ip:8098 returns JavaScript code on the device/simulator. If not be sure to check the antivirus or router/firewall settings, if valid follow the instructions and connect to the development tools using IP. For example:

import devtools from  '@vue/devtools' 
import  Vue  from  'vue' 
// ...


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


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


else 
  onDeviceReady ()

Summary of this article

This article mainly introduces Vue DevTools to you. Vue DevTools is a tool designed to enhance the Vue developer experience. It provides some functions to help developers better understand Vue applications. Due to space constraints, I only gave a brief introduction to Vue DevTools.

References

https://devtools-next.vuejs.org/guide/getting-started

https://github.com/vuejs/devtools-next/tree/f96ec0421d702d8fc05f5d04eeff1000231221c4

By JavaScript