下载vue官方调试工具vue-devtools的踩坑之路

最近开始系统的学习vue，看了个学习视频推荐说下载这个vue-devtools，可以看到各个组件的数据变化什么的，于是我就开始了我的踩坑之路，足足折腾了两天才摸索出来怎么安装和使用，下面就开始安装的过程吧

1号坑：千万别去下载它的压缩包

在网上搜索“安装vue-devtools”，跳出来一大堆让你去下载它的压缩包的，我下了，然后按照它的步骤去安装，可是一次都成功，但是那些教程都安装成功了，可能我命中带苦吧

跳坑措施：

去官网直接复制它的git地址，然后clone到本地

2号坑：记得在本地创建仓库

跳出了1号坑之后，那么应该顺风顺水了吧，然后并没有，我git clone到本地之后，先使用npm install，ok，没有问题，但接下来使用npm run build，报了一大堆错，好吧，上网百度，还是找不到原因，最后找了半天，终于有一个博主说到当代码clone到本地后，默认的分支是在dev分支上，我们需要切换到master分支进行操作（地址在这里https://www.pianshen.com/article/98521303157/），于是，我使用了git checkout master命令，但还是报错了，报错的具体信息我记不得了，但大概意思就是，识别不了master，我一拍脑袋，本地根本就没有仓库啊，所以得先建一个仓库

跳坑措施：

使用git init命令先建一个仓库，然后再去clone代码

3号坑：一个小水坑

跳出了前两个坑，按道理说这个时候应该可以使用了吧，然后，打开谷歌浏览器的控制台，依然没有出现vue-devtools的身影，这是咋回事呢？其实是因为它只会在有vue项目出现在浏览器中时才会出现

跳坑措施：

使用谷歌浏览器运行vue项目，调试器自然会出现：

没有vue项目的时候：
有vue项目的时候：

总结

最后再浓缩一下安装过程：
git init
git clone git@github.com:vuejs/vue-devtools.git
git checkout master
npm install
npm run build
修改shells>chrome文件夹下的mainifest.json 中的persistent为true
找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装