Vue.js devtools运行但调试窗口未出现的解决方案

- 日理万妓 2023-10-12 10:58 38阅读 0赞

Vue.js devtools是一款基于Chrome浏览器的调试Vue.js应用的扩展程序。然而，有时即使该插件已经在运行，调试窗口也可能未出现。这主要可能有以下几个原因，并附有相应的解决方法：

### 1. Chrome扩展程序选项的问题 ###

![ba1194f855bd416a8ee1791aaefd6068.png][]

![81a20881d13b4568bb48bf2389d33c35.png][]

首先，右上角的Vue标识应该是亮的，表示当前页面检测到了引用的Vue文件。同时，Chrome调试窗口应该出现Vue一栏，表示能够对当前页面进行调试。如果右上角的Vue标识变灰，点击时可能会出现提示，表示Vue.js没有被检测到。

这种情况可能是由于Chrome扩展程序选项的问题。你需要打开Chrome的扩展程序管理界面，检查以下几项：

*  已启用按钮是否已勾选
 *  允许访问文件地址是否已勾选
 *  在隐身模式下启用是否已勾选（如果你习惯于使用Chrome的隐身模式）

### 2. Vue.js引入版本的问题 ###

我们在开发和部署代码时，可能会引用不同方式打包的Vue文件，比如vue.js、vue.min.js、vue.esm.js等。实际上，Vue devtools所能检测的Vue文件会受到版本的限制，比如后两种方式打包的Vue文件极有可能不会被检测出来。所以，在开发环境下，建议引用稳定版本的vue.js。在考虑性能的生产环境下，再根据需要选择。

### 3. Devtools被禁用的问题 ###

如果右上角扩展栏Vue标识亮起，但是点击显示"Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author."，这表示生产模式或开发者禁用了devtools。这种情况下，你需要在代码文件里显式地设置devtools可用，具体代码如下：

Vue.config.devtools = true;

### 4. 插件持久性问题 ###

如果上述步骤都已完成但问题仍然存在，那么问题可能在于插件的持久性。你需要进入插件安装目录，找到manifest.json文件，将"persistent": false修改为"persistent": true。这样可以在Vue项目启动时激活插件。

### 5. Vue版本问题 ###

如果你在Vue项目中引用了压缩版的vue.js，你需要在js中加入以下语法来开启devtools：

Vue.config.devtools = true;

这是因为压缩版的vue.js的 Vue.config.devtools 是默认关闭的，而

开发版的 Vue.config.devtools 是默认打开的。

### 6. 重启和刷新 ###

如果以上排查都做完，但devtools仍然不可用，可能需要考虑重启和刷新。比如，检查是否在代码修改后重启了服务器，是否刷新了页面并重启了Chrome调试窗口。

以上就是Vue.js devtools运行但调试窗口未出现的几个可能原因及其解决方案。希望这篇文章能够帮助你解决问题，提高开发效率。

[ba1194f855bd416a8ee1791aaefd6068.png]: https://img-blog.csdnimg.cn/ba1194f855bd416a8ee1791aaefd6068.png
[81a20881d13b4568bb48bf2389d33c35.png]: https://img-blog.csdnimg.cn/81a20881d13b4568bb48bf2389d33c35.png