vue.js devtools的安装步骤和使用

前言：vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。这里主要说下手动安装：

1、在github下载devtools源码

地址：点我跳转,前往下载devtools源码

下载安装包

2、解压

（我是在D盘下又建了一个文件夹来放，可以直接解压在D盘根目录）

image.png

3、打开cmd，输入指令npm install（下载依赖）、npm run build（编译）

可以直接在文件地址栏中输入“cmd”即可直接打开
用npm在vue-devtools目录下安装依赖包，输入指令：npm install

image.png

4、编译完成后，目录结构如下：

image.png

5、修改shells-chrome目录下的mainifest.json 中的persistant为true

image.png

6、打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式

image.png

image.png

然后点击“加载已解压的扩展程序”：

image.png

找到vue-devtools>shells>chrome，点击确定，进入“详细信息”并选择启用，成功界面如下：

进入“详细信息”并选择启用

成功界面

7、打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式：

发现vue.js is not detected ，可以调整一下webpack.config.js的代码：

image.png

image.png

最后，重启一下你的vue项目应该就可以使用了

image.png

小结：Vue.js devtool插件安装后出现提示“vue.js not detected”的问题，首先在扩展程序中选择开发者模式，打开插件的安装目录，将mainifest.json 中的persistant为true，如果还不行就调整一下webpack.config.js的代码，最后重启vue项目就可以使用。

文章参考：
http://chromecj.com/utilities/2018-12/1653.html
https://blog.csdn.net/UNDEFINED_AUBE/article/details/81869385