前言:安装时参考了网上的一系列文章,但还是反反复复几次才安装成功,下面说下踩过的坑。

一、下载

地址:https://github.com/search?q=vue-devtools

git clone https://github.com/vuejs/vue-devtools.git

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

二、安装依赖包(npm install)

网上的文章说,要切换到 master 分支,去操作。所以我先 git branch 查看一下分支,发现只有 dev 分支,所以前面几次都放弃了。

后来发现运行 git checkout master 项目会自动给新建 master 分支。

切换分支 之后执行 npm install 安装依赖,安装好依赖包后 执行打包

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

三、打包(npm run build)

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

打包成功之后 shells -> chrome 文件夹是我们需要的。

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

四、安装

在谷歌浏览器 更多工具 -> 扩展程序 -> 加载已解压的扩展程序 -> 选择 shells -> chrome 文件夹,即可。

  【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

注意:选择完文件夹后可能没有反应,关闭浏览器,到 更多工具 -> 扩展程序 看一下就有了,如果还没有可以再重复一遍 第四步 的安装操作。重启浏览器,插件生效。

【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

 【Vue-devtools】Vue调试工具vue-devtools安装教程(亲测,避坑指南)

安装成功。

五、遇见的报错

Error: Cannot find [email protected]/build-tools

报错原因:因为没有执行 git checkout master 切换分支,就安装依赖去打包造成的。所以第二步,注意一下。

 

 

相关文章:

  • 2021-11-03
  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
  • 2021-09-29
  • 2021-10-24
  • 2021-04-30
  • 2021-08-24
猜你喜欢
  • 2021-05-27
  • 2021-05-01
  • 2021-10-09
  • 2021-07-08
  • 2021-04-20
相关资源
相似解决方案