【Vue-devtools】Vue调试工具vue-devtools安装教程（亲测，避坑指南）

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

一、下载

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

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

二、安装依赖包（npm install）

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

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

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

三、打包（npm run build）

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

四、安装

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

 

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

 

安装成功。

五、遇见的报错

Error: Cannot find module@vue-devtools/build-tools

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