vue-devtools对于前端调试vue项目帮助非常大，以下介绍下支持vue3的vue-devtools的安装。
安装方式一：从官网下载https://devtools.vuejs.org/

安装方式二：github上下载源码，编译后加载安装：
github地址：https://github.com/vuejs/devtools/tree/v6.5.0

下一步按自己习惯的方式下载，我是直接download

下载源码后，解压到自己建好的文件目录下，解压后目录如下：

下一步：编译
1)我的npm版本是8.5.0（npm -v查看npm版本）
2)安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先要安装yarn
已经安装过yarn的跳过此步骤
执行命令：npm install -g yarn 全局安装yarn

npm install -g yarn

3）用yarn下载依赖

yarn install

4)build，build需要带watch,不带watch可能会出问题

yarn run build:watch

5）build执行一会后，没有反应，按Ctrl+C 退出即可

6）执行yarn run dev:chrome

yarn run dev:chrome

看到这里按Ctrl+C 退出
7）此时查看/vue-devtools\devtools-6.5.0\packages\shell-chrome目录下多了build文件夹

下一步：加载插件
打开谷歌浏览器：点击设置 > 拓展程序 > 加载已解压的拓展程序

选择刚刚shell-chrome目录

等待加载完成，如果没有生效，重启浏览器

注：shell-chrome文件夹下内容可以保存备份给其他人安装或者拷贝至其他电脑直接在浏览器加载已解压的扩展程序继续使用