VUE3 VUE-DEVTOOLS 安装

最新推荐文章于 2024-04-25 12:50:07 发布

ashin8032

最新推荐文章于 2024-04-25 12:50:07 发布

阅读量1.2w

点赞数 20

分类专栏： vue vue-devtools 文章标签： vue.js chrome 前端

本文链接：https://blog.csdn.net/ashin8032/article/details/122600345

版权

vue 同时被 2 个专栏收录

1 篇文章 2 订阅

订阅专栏

vue-devtools

1 篇文章 1 订阅

订阅专栏

VUE3 Vue-Devtools 正确安装，亲测有效

写在前面

最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。
官方网址：Vue-Devtools。

对于Vue3，Vue-Devtools没有正式的发布，目前最高版本是 6.0.0-beta.21版。因此，无法像Vue2-Devtools那样通过 npm install vue-devtools这样的命令来安装。

正确的安装方式

只有两种：

从Chrome Web Store（针对chrome）或者Mozilla Addons website（针对Firefox）下载
从Github上下载源代码，进行编译。

本文只讲述基于Chrome浏览器的安装，出于众所周知的原因，下面来讲第二种方式。

下载源码

进入官网，在分支上我们选择最新的 v6.0.0-beta.21
v6.0.0-beta版本对应的是Vue3
选好后会刷新当前页面，切换到 v6.0.0-beta.21 的内容页。
刷新后，点击右侧的 Code 按钮，下拉项中选择 Download ZIP。
在这里插入图片描述
当然，也可以通过Clone方式下载，具体操作不在这里描述。

下载后解压到目录，解压后目录如下
在这里插入图片描述
在这里吐槽一下，网上好多的帖子都告诉你，在这里把 packages\shell-chrome目录里面的内容修改下，然后导入到Chrome的扩展里。亲们，这些说的都是错误的。虽然把src\hook.js文件里的build全部改为src，然后安装到扩展里确实能显示安装了扩展插件。但是：

vue-Devtools的快捷键是灰色的。即使修改了 manifest.json的 "persistent": true也没用。
打开Vue3的网站后，Vue-Devtools后台会报错。

这是为什么呢？因为以上安装的是源代码，没有编译啊。
在这里，作者走了不少弯路，浪费不少时间，不说了，都是泪。
接来下，我们就说一下如何编译。

编译

NPM的安装就不多说了，我用的是最新版本8.3.1
需要注意的是，安装Vue-Devtools的依赖需要用到yarn，而不是npm，所以首先我们要安装yarn。
命令行进入到解压后的Vue-Devtools目录。
在这里插入图片描述
执行命令：

npm install -g yarn

安装好yarn，通过yarn来安装依赖

yarn install

依赖安装完成后，开始build。
需要注意，这里的命令带了watch，如果不带watch，会出错。
具体原因，我也不知道是为什么，如果哪位大神知道，望告知。

yarn run build:watch

代码执行一阵后，没有反应，此时Ctrl+C退出即可。
接下来执行

yarn run dev:chrome

出现下面的界面后就可以Ctrl+C退出了。
在这里插入图片描述
此时，我们再看一下Vue-Devtools目录，发现生成了 build目录。

至此，编译完成。

安装

安装过程就不过于详细的介绍了，网上有好多。

打开 Chrome 的开发者模式。
拖拽 devtools-6.0.0-beta.21\packages\shell-chrome目录到上面扩展程序页面，会自动安装Vue-Devtools插件。
在扩展栏固定Vue-Devtools图标

至此，Vue-Devtools插件安装完成，打开vue3网站，F12打开调试台，就能看到Vue-Devtools的界面按钮。

以上所写内容，实际上早在官网上就给出了完整操作步骤。但我开始是在网络上搜索相关的安装帖子，结果走了不少弯路。最后在官网找到了正确答案，还非常简单，让我有一种蓦然回首，那人却在灯火阑珊处的无奈。
此后学习新的东西还是先从官网入手，引以为戒。