Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

一、vue.js插件下载

二、Vue开发工具vuejs-devtools下载

三、Vue开发工具vuejs-devtools安装+使用
根据下图打开谷歌浏览器中的【拓展程序】：

勾选【开发者模式】——点击【加载已解压的拓展程序】——选择刚刚解压的vuejs-devtools插件整个文件夹导入即可。导入后即可看到一件导入的vuejs-devtools插件。

用谷歌打开文件进入调试模式（按F12即可进入），即可在调试控制台看到vue页签。如下图：

四、常见问题解决
安装好插件后，打开文件并打开调试模式后没有vue页签，这可很常见，解决方法如下：

方法一：最常见的是我们引入vue插件时引入了生产版本（vue.main.js）也就是压缩后的版本，这个默认是关闭，需要在你的js文件中的创建vue前面写入：Vue.config.devtools = true;即可（不是在vue.main.js写这句话）。


方法二：导入Vue插件是我们选择开发版本的插件（vue.js）这样就不存在上诉的问题了。