VueJs dev工具面板没有显示

Question

我开始在我的应用程序中使用vue dev-tools,但在Chrome中的开发者模式下它是不可见的.我尝试了在dev-tools github页面和网络上其他地方找到的各种解决方案,但没有运气.以下是我已经/试图让它显示的东西.

1. allow access to file URL’s option在Chrome扩展程序中启用
2. Vue.config.debug = true; Vue.config.devtools = true;在新的Vue({})之前添加
3. 添加了非缩小版本的VueJS文件
4. 另外我使用的是Chrome最新版本:55.0.2883.87.

点击Chrome扩展程序后,我收到以下消息

除了小组实际上没有显示.

有人有解决方案吗？谢谢.

Answer 1

我无法在菜单栏上显示Vue图标,但是我可以在Chrome开发人员工具中显示Vue选项卡.请尝试以下方法:

• 关闭Chrome开发人员工具窗口
• 硬刷新浏览器
• 重新打开开发人员工具窗口并查找Vue选项卡

工具栏中的图标可能仍表示无法检测到Vue,但该选项卡应在Chrome开发人员工具中可见.

Answer 2

今天还发现，如果您安装了广告拦截器，这也会阻止 Vue Devtools 正常运行。

Answer 3

我有同样的问题,我正在使用来自cdn"vue.min.js"的缩小的vue.然后我删除了它并使用了非缩小的vue.然后我重新加载浏览器并重新打开控制台,vue选项卡就在那里.

Answer 4

关闭文件选项卡并重新打开它对我有用。

Answer 5

对我来说，我正在运行一个本地 HTML 文件。默认情况下，Chrome 会阻止扩展程序处理本地文件。

• 三点菜单 -> 更多工具 -> 扩展

• 找到 Vue 扩展，点击详细信息并更改打开设置“允许访问文件 URL：

截屏

• 关闭并重新打开 chrome

Answer 6

• 多次重启谷歌浏览器

• 不要使用最小文件

• 并在新的 vue 实例化之前添加：

  Vue.config.devtools = true;
  

Answer 7

在启用 vue 开发工具扩展之前应关闭 chrome 开发工具...（如果 chrome 开发工具已打开，请关闭 chrome 开发工具并重新打开）