菜鸟安装vue-devtool 工具

Posted 2021-01-25 97310zt

vue-devtool工具是对运用了vue的页面在浏览器中进行调试的一个工具，进行安装如下几个步骤：

1.在github官网中搜索 vue-devtool，然后进行下载压缩安装包，或者用git克隆。

2.下载完之后进行解压，用命令提示行进入到解压的文件夹。

3.执行命令  npm  install  ，或者用cnpm  install 都可以，后者安装会更快些，前提是也的安装了cnpm.

4.安装完成之后执行npm run build

5.执行完之后打开  shellschromemanifest.json文件，然后修改  persistent 为 true

6.浏览器中   更多工具-扩展程序，然后直接把chrome文件拖入到页面中即可，到这里基本上就安装完了。

更详细的安装教程可以参考这个：

 https://www.jianshu.com/p/5c2f5ab3f22f 

主要想说的是遇到的一些问题，例如安装完之后，发现图标是灰色的，点击图标还出现 vue.js not detected  

当时还不能理解，怎么我安装完不能用么？是我没开启还是什么，后面才知道只有当前页面引用了vue.js 这个图标才会亮起来。然后找了个含有vue的网页打开，果然图标是正常的，但是我f12还是没看到列表上有vue 调试的那个框。又是各种查，有的说浏览器上vue-devtool 上的允许访问文件网址要选上

有的说重新打开浏览器，刷新然后f12才能看到，也有的说检查引用的是vue.js 还是引用的vue.min.js,通过筛选，觉得只有最后一个可以试试，但是因为第一次接触，还是菜鸟，还一直在想在哪检查是引用的vue.js还是vue.min.js,刚开始还以为是下载的包里是vue.min.js，但是翻了包也没见有这个文件，最后终于意识到你调试页面自然而然是看页面上使用的vue.min.js还是vue.js，然后自己简单写了一个例子，终于出现了调试面板。后面想想简直要被自己蠢哭了。。。。

通过查阅总结一下几个需要注意的地方：

1.重新打开浏览器

2.允许访问文件地址

3.修改persistent为true

4.页面要引用 vue.js