vue-devtools安装

背景介绍

换了新的电脑，强迫症所有的一切都要重头来配置。很早之前稀里糊涂配置的一直也是用过来了，现在既然是要重新配置，就来记录一下完整的流程。
目前自己发现了三种安装的方法，自己其实最喜欢的是直接下载已经打包好的crx扩展包，别问为什么，懒
下面逐一介绍三种方法和自己遇到的问题

---

1、从GitHub上clone源码自己打包然后添加

手动clone项目vue-devtools
git clone [https://github.com/vuejs/vue-devtools.git](https://github.com/vuejs/vue-devtools.git)
进入vue-devtools根目录：
然后切换到master分支，默认的是dev分支：
git checkout master
npm install安装依赖

执行完上述步骤之后，如果没有问题，即可npm run build打包即可
打包完成后，在shells文件夹下回生成chrome文件夹，这个就是build生成的vue-devtools插件


注：很多时候这里打包会报错，一般为Error: Cannot find module ‘@vue-devtools/build-tools’ ，这个基本是因为最开始没有切换到master分支导致的，建议删掉文件夹重头再来。
浏览器安装的时候，只需要在扩展中打开开发者模式，然后添加已解压的扩展程序，选择前面那个chrome文件夹即可添加成功，如下图：


注：新版的edge浏览器基于Chromium内核，也可以按照同样的方法添加扩展
安装完成之后，打开一个自己写的vue项目或者B站首页，浏览器右上方的vue图标亮起即安装成功，可以愉快地使用了~


写在最后，我在一些前辈的博客里看到在打包之前需要修改shells>chrome>manifest.json文件中的persistent的值为true，不知道这一步的用意是什么。
接上，经测试（无论是打包前修改或是打包后修改persistent的值，功能上和默认不修改一样）修改了之后反而会报错，如下：

2、从GitHub上下载别人已经打包好的文件

其实和方法本质是一样的，只是别人帮我们做好了前面的所有操作，我们只需要添加已解压的扩展程序即可

3、从第三方网站下载打包好的crx插件直接安装

看前辈们的博客时候偶然发现的一个网站，里面有各种已经打包好的插件，直接拖进浏览器安装即可，个人认为是目前最简便的方法，安全性未知。
网站地址：https://chrome.zzzmh.cn/，里面有各种各样的扩展插件，插件详情中显示插件来源于chrome网上应用店（国内访问不了）


注：从第三方安装打包好的crx可能会涉及一个插件ID的问题，和自己打包的ID是不同的。不知道这个对什么有影响
备注：自己曾经做过一个eletron-vue的小项目，里面有要用到vue-devtools，当时是直接安装的此网站的crx插件，后面换了电脑之后重新安装依赖打包，提示我需要之前同ID的插件，于是又重新下载了crx插件才搞好

---

总结：还是最推荐第三种方法，省事省心，而且版本很新，自己从GitHub一顿操作下来，版本4.1.5，打包好的crx包版本5.3.3，多了很多功能，而且没有报错