一.vite的官方配置-vite-plugin-vue-devtools

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [vue(), vueJsx(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

官方默认推荐的就是内置vite-plugin-vue-devtools

可查看官网：

Vite Plugin | Vue DevTools

安装​

安装到扩展程序上：

 控制台使用界面：

方案二 

在chrome应用商城下载 需要科学上网