vue之调试工具DevTools

1.创建一个空文件夹（我命名为vue devtools），

2.进入这个文件夹按住 shift + 右键 选择差旅进入在此处打开powershell 窗口，就可以进入这个文件的终端

3.在终端输入 npm install vue-devtools

完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文亏轿件，进入其中，将vender 文件拖至谷歌虚空凳浏览器的扩展程序中即可。

进入verder下的 manifest.json ，修改persistent 为 true， 保存。

刷新浏览器扩展程序即可使用。运行vue程序，即可在控制台中看到此调试工具。

vue devtools 在用vue做的网站上会变亮但不能查看其结构。只有在本地运行的项目才能查看。

资料参考： https://blog.csdn.net/qq_44210926/article/details/106161483

安装VUE的方法有两种：

第一种方法：需正常打开亩唤chrome商店，搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展迅拿凯程序下启用；

第二种方法：github下载插件，npm包安装依赖，拖入浏览器扩展程序。具体 *** 作如下：

1、下载chrome扩展插件。在github上下载压缩包并解压敏纳到本地。

2、npm install下载完成后打开命令行cmd进入vue-devtools-master文件夹。

3、 打开shells>chrome>manifest.json并把json文件里的persistent：false改成true。

4、扩展chrome插件。打开chrome浏览器，打开更多工具>扩展程序；再点击加载已解压的扩展程序，然后把shells>chrome文件夹放入。

5、测试安装成功。在插件的目录下执行npm run dev，这个时候的插件就可以运行了。

有时候我们明明打开了devtool设置为true，并按chrome上安装了vueTool后，发现还是没有在控制台里显示vue的tool等问题

1、如果是没有扒乎安装vueTool，可以到chrome的扩展里面选择并安装

如果是没有科学上W的话可以github上手动down下仓库来安装

然后就是扩展Chrome插件

打开Chrome浏览器 >选择更多工具>扩展程序>打开开发者模式

点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools >shells >chrome 放入, 安装成功如上面的图1

下方是可能可以看到vueTool了，但是在控制台就是出不来的情况

2、检查下vue.config.js的devtool是否打开，默认是true，看看是不是在非生产环境也设置为false了

3、检查看看是否有手动启用CDN加速Vuejs的文件，按官网说的，我们开发环境也需要使用开发版本的vuejs，否则很多春段悉警告就会不生效，比如props的校验器等

检燃仿查public.html的vuejs引用(如果是按脚手架的则无需关注)

确认以上问题以后，我们重新安装依赖并且重新跑脚手架编译。

---