最近开始系统的学习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文件夹直接拖到页面中,完成安装