【搬迁】vue-devtools无法启动的几个原因&解决方案

[escawn]

• 本文首发于https://escawn.github.io/（已废弃）
• 发表时间2017/07/30

简介

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

长这样：

安装及介绍在这

原因&解决

正常情况

正常情况下，使用vue-devtools进行调试，如上图，主要有两个条件

1. 右上角chrome扩展的vue标识亮，这表示当前页面检测到引用了vue文件
2. chrome调试窗口出现vue一栏，这表示能够对当前页面进行调试

如果1不正常，则一定不会出现2，即1是2的必要条件，由这两点出发，看看"不出问题的人是相似的，出问题的人则各有各的问（bu）题（xing）"是个什么情况

右上角vue标识变灰

点击时会出现提示，Vue.js not detected.(未检测到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 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。

重启&刷新

如果做完以上排查，仍然不可用。需要考虑重启&刷新。

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

其他问题

如果还有问题，可以考虑向vue devtools的github提交issue

---

[Gerogina6]

请问这个Vue.config.devtools = true要加在哪个文件夹里？

[davecat]

@Georginaaaa main.js

[Gerogina6]

@davecat 谢谢了 先mark

[errorcc]

没用

[ZouHuaYi]

试了一遍真的不行啊

[woshiyile]

所有都尝试了，还是不行 哈哈，不知道哪里问题~

[gangmax]

You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.

From here.

[William-WFC]

Vue.config.devtools = true 有用，多谢

[code1024programming]

在自己工程中的main.js 加入 Vue.config.devtools = true 问题解决了，多谢

[18725057479]

在哪里加入Vue.config.devtools = true？

[18725057479]

Vue.config.devtools = true 有用，多谢

在哪个文件里添加呀？

[18725057479]

main.js

这个文件在哪里呀

[lulinchuanllc]

在项目目录的src文件夹下的main.js文件中添加Vue.config.devtools = true

[hhb0709]

有用，感谢！！