VueJs 开发工具面板未显示答案

【问题标题】：VueJs dev tools panel not showingVueJs 开发工具面板未显示
【发布时间】：2017-05-21 04:24:33
【问题描述】：

我开始在我的应用程序中使用vue dev-tools，但在 Chrome 的开发者模式下它不可见。我尝试了在 dev-tools github 页面和网络上的其他地方找到的各种解决方案，但没有运气。以下是我为显示它所做/尝试过的事情。

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

当我单击 chrome 扩展时，我确实收到以下消息

除了面板实际上没有显示。

有没有人可以解决这个问题？谢谢。

【问题讨论】：

请提供您的开发工具的截图
我为 vue-devtools-3.0 做出了贡献，所以我密切关注以确保我所做的一切都没有破坏任何东西。这可能是问题所在：github.com/vuejs/vue-devtools/issues/218
不幸的是我仍然有同样的问题。我尝试了不同的方式来获取 chrome 扩展。通过克隆构建开发工具应用程序的存储库。但还是没有运气。我没有看到 vue 开发工具面板。
您有没有机会将我在下面的答案标记为正确答案？
对我来说最好的答案。谢谢！！

标签： vuejs2 vue.js vue-resource

【解决方案1】：

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

【讨论】：

【解决方案2】：

只需执行几次“硬重新加载”即可。在 Windows 上：SHIFT + F5。在 Mac 上：CMD + SHIFT + R。

【讨论】：

Hard reload (shift + cmd + r on mac) and reload (close and open) chrome inspect 解决这个问题。（2020 年是）

【解决方案3】：

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

【讨论】：

【解决方案4】：

我无法让 Vue 图标在菜单栏上处于活动状态，但是我能够让 Vue 选项卡显示在 Chrome 开发人员工具中。请尝试以下操作：

关闭 Chrome 开发者工具窗口
硬刷新浏览器
重新打开开发者工具窗口并寻找 Vue 选项卡

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

【讨论】：

我刚刚关闭并重新打开 Chrome，就足够了。并感谢您的提示。
在我的例子中，Vue DevTools 图标被点亮并检测到 Vue.js，但 Chrome 的 DevTools 面板中没有 Vue 选项卡。关闭 DevTools、硬刷新页面并重新打开 DevTools 让我看到了 Vue 面板，但没有任何 Vue 功能存在（例如，没有检测到组件）。我不得不完全关闭 Chrome 并重新启动它，然后一切都按预期工作。奇数。

【解决方案5】：

只需硬重新加载并关闭开发控制台，然后重新打开它。

【讨论】：

我没有投反对票，我认为投反对票的原因是因为它看起来像是几个月前我的答案的副本......

【解决方案6】：

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

【讨论】：

哦，谢谢伙计。这是唯一对我有用的解决方案。拯救了我的一天。
这对我有用。我只是使用cdn设置。
谢谢！！它正在工作。

【解决方案7】：

请确保您不使用生产 CDN。使它对我有用的唯一方法是使用 VueJS 开发版本。

开发：vue.js

【讨论】：

【解决方案8】：

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

三点菜单 -> 更多工具 -> 扩展
找到 Vue 扩展，点击详细信息并更改打开设置“允许访问文件 URL：

Screenshot

关闭并重新打开 chrome

【讨论】：

【解决方案9】：

多次重启谷歌浏览器
不要使用最小文件
并在新的 vue 实例化之前添加：
```
Vue.config.devtools = true;
```

【讨论】：

【解决方案10】：

这会周期性地发生在我身上，很烦人，因为似乎没有原因。

转到 Chrome 浏览器扩展程序
删除 Vue DevTools 扩展
重新添加它
硬刷新您的页面

Chrome - 版本 71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

【讨论】：

【解决方案11】：

关闭 chrome 应用
重新运行开发服务器
重新打开 chrome 应用
打开本地主机
按 F12（打开开发工具）

【讨论】：

【解决方案12】：

第1步：添加vue.js devtools作为here的扩展

第二步：添加vue.js devtools后，关闭浏览器。

第 3 步：打开浏览器并打开 html 页面。

第四步：点击鼠标右侧，选择inspect，尝试找到Vue。

注意：如果你没有添加vue.js的CDN，那么将这行添加到你的html文件中。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

【讨论】：

不起作用。只有 Beta 版适合我。

【解决方案13】：

您应该启用 允许从 Vue 扩展访问文件 URL，然后使用 Shift + F5 硬刷新您的页面它对我有用

【讨论】：

【解决方案14】：

硬重装，帮帮我。

打开 devtools -> 右键单击重新加载按钮 -> 硬重新加载

【讨论】：

【解决方案15】：

也许很明显，但在隐身模式下 Vue 面板不可用。在这种情况下，Vue 图标也不可见。

【讨论】：

【解决方案16】：

（对于 Firefox 浏览器）如果在浏览器中添加了附加组件 'Vue.js devtools'。只需单击检查元素（或按 F12），就会有一个 Vue 选项卡以及检查器、控制台、网络等. 点击那个 Vue 选项卡并享受调试。

【讨论】：

【解决方案17】：

使用适用于 Vue 3 的 devtools 测试版。并始终检查您的 Vue 应用程序是否正确安装。

【讨论】：

【解决方案18】：

如果您使用的是 vue3，请卸载 Vue devtool 扩展并安装 beta 版本。您可以从以下链接为 chrome 安装它： https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

【讨论】：

如果只是向现有答案添加信息，请考虑留下评论而不是发布重复内容

【解决方案19】：

在 @Daryn answer 他提到他在 vue 图标上有问题 - 这是在 chrome 上运行 vue 扩展的这一部分的解决方案，同时也为我解决了 OP 问题：

在插件安装过程中，Chrome 右上角会出现 VUE 图标并显示消息（截图不是我的）：

关键是单击该图标上的右键（不关闭该消息！）并选择“PIN”（它固定到扩展图标栏）-如果您不这样做-那么您将永远不会再看到该图标（其中是错误）。之后关闭并重新打开chrome。现在在你的 vue 页面中，这个图标应该是绿色的（你可以点击它），然后在某些页面元素（或屏幕中心）上单击右键，然后选择“检查”以查看

【讨论】：

【解决方案20】：

也许你可以去设置然后去偏好然后寻找持久性然后启用本地覆盖，对不起我的英语不好

【讨论】：

【解决方案21】：

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

【讨论】：