来到官网，选择最新的分支下载代码；
https://github.com/vuejs/devtools

解压后执行以下命令

# 如果没有安装yarn的话  
# 不知道自己是否安装 可以通过 yarn -v 查看一下
# 安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。命令行进入到解压后的Vue-Devtools目录。
npm install -g yarn   

yarn install

yarn run build:watch

yarn run dev:chrome

以上几条指令执行一阵后，没有反应，此时Ctrl+C退出即可。

看到这个就说明好了

next

打开文件夹，可以看到 devtools-6.2.1\packages\shell-chrome下有build文件了

把shell-chrome文件夹整个拖拽到 谷歌的 扩展程序页面 就ok了

新手引导：

随着 Vue 3 的发布，devtools 被完全重写。

它的新架构可以更好地支持不同版本的 Vue，以及集成第三方库（稍后会详细介绍！）。

它包含了大大小小的变化，所以这里是新功能的概述！

您可能会注意到导航有所不同。 devtools 现在有两个主要选项卡：

Inspector 以结构化的方式显示调试信息（例如检查组件）， 时间线可随时间跟踪不同类型的数据，例如事件。

要访问设置，请使用右上角的新“3 点”菜单。

任何 Vue 插件和库现在都可以通过其插件 API 与 devtools 集成。

例如，他们可以添加自己的自定义检查器：

在这里，您可以实时查看来自您的应用程序的事件。它包括鼠标和键盘事件、组件事件、性能火焰图…

您可以缩放和平移时间线，或单击事件以查看更多信息。 使用 Devtools 插件 API，第三方库还可以将图层和事件添加到时间轴。

在顶部栏的左侧，您可以找到一个新的 App Selector。 devtools 现在被限定为特定的选定应用程序，甚至可以检查 iframe
内的应用程序！

我们希望您会喜欢新的 Vue 开发工具。

如果您的项目无法正常工作，您可以使用旧版本并报告问题。