VueDevTools插件的使用方法

​ 学习Vue的时候往往需要使用vue devtools这款插件，其作用不言自明，当然是为了调试才安装的啦。那对于新手来说，在已开始的使用上可能就会遇到坎，比如网上一大堆打开开发者模式显示VUE模块的截图~，但是我们自己的怎么就没有显示呢？安装插件以后，还是需要注意一些问题的，问题总结如下：

1、检查Chrome插件管理里面vuedevtools是否开启了”允许访问文件网址”的权限

2、上述如果没有问题的话，你就要确定一下当前的页面是否开启了调试模式，具体的提示如下：

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

上述提示表明：”在此页面上检测到Vue.js。 Devtools检查不可用，因为它处于生产模式或作者明确禁用。” 这样一解释就很明朗了，确定一下自己是否开启了生产模式，不放心的话可以在js的入口文件中添加一句话“Vue.config.devtools = true”

3、此时基本上快要出来效果了，可能还是会出现问题的，比如下面的

Vue.js is detected on this page. Open DevTools and look for the Vue panel.

这个时候你需要做的是关闭当前页面，重新开启即可。看一下效果

4、如果到了这一步还是没有效果的话，重启浏览器！！！欧了~~如果还不行 那只能谷爹了~

看张美图放松一下紧张的心情~