简介：

Vue-devtools是一个基于chrome浏览器调试vue.js应用的扩展程序

安装和介绍：https://github.com/vuejs/vue-devtools

复制代码

原因解析：

一般情况下，使用vue-devtools进行调试，如上图所示，主要有两种情况

右上角chrome扩展的vue logo亮，表示当前页面检测到vue文件被引用

vue列出现在chrome调试窗口中，表示可以调试当前页面

如果1不正常，2永远不会出现，即1是2的必要条件

右上角的vue标志变成灰色

点击时会出现提示，Vue.js没检测到。

但我显然用了vue。怎么回事？

chrome扩展选项的问题

打开chrome的扩展管理界面，检查：

是否勾选了启用按钮

检查是否允许访问文件地址

检查它是否在隐藏模式下启用(如果你习惯使用chrome的隐藏模式)

vue.js的引入版

在开发和部署代码时，我们可能会参考以不同方式打包的vue文件，如vue.js、vue.min.js、vue.esm.js等。实际上，vue devtools可以检测到的vue文件会受到版本的限制。例如，后两种方法打包的vue可能不会被检测到(并且还会受到vue本身版本的限制)。

所以建议在开发环境中参考稳定版本的vue.js，在考虑性能的情况下，在生产环境中根据需要进行选择。

chrome调试窗口中没有vue列

在这种情况下，右上角的扩展栏中的vue徽标会亮起，然后单击显示

在此页面上检测到Vue.js。Devtools检查不可用，因为它处于生产模式或被作者明确禁用。

意味着生产模式开发人员禁用devtools。

此时，您需要显式设置devtools可用。添加到代码文件

Vue.config.devtools=true .

复制代码

重新开始刷新

如果以上筛选完毕，仍然不可用。需要考虑重启刷新。

例如，代码修改后是否重新启动服务器，是否刷新页面并重新启动chorme调试窗口。