VueJs 开发工具面板未显示

Question

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

1. 启用allow access to file URL's option
2. 添加Vue.config.debug = true; Vue.config.devtools = true; 就在新 Vue({}) 之前
3. 添加了 VueJS 文件的非缩小版本
4. 我也在使用 Chrome 最新版本：55.0.2883.87。

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

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

有人对此有解决方案吗？ 谢谢。

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

截屏

• 关闭并重新打开 chrome

Answer 5

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

Answer 6

• 多次重启谷歌浏览器

• 不要使用最小文件

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

   Vue.config.devtools = true;

Answer 7

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

Answer 8

第 1 步：从此处添加vue.js devtools作为扩展

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

第三步：打开你的浏览器并打开你的html页面。

第 4 步：单击鼠标右侧并选择inspect并尝试找到Vue 。

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

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

硬重装，帮帮我。

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

Answer 15

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

开发： vue.js

Answer 16

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

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

---

铬 - 版本 71.0.3578.98

MacOS 莫哈韦 10.14

VueJS 2.5.21

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

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

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

Answer 21

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

Answer 22

不要忘记

npm run dev 

（或您项目中的类似内容）

然后尝试来自第一个答案的建议

Answer 23

不知道这是否有帮助，但请确保在当前路径中呈现的视图文件中引用 app.js。 视图文件中的 Laravel 示例： <script src="{{ asset('js/app.js') }}" defer></script>

这样 vue 扩展就开始为我工作了。

Answer 24

你应该跑

npm run watch

或者

npm run dev

否则看不到 Vue 工具栏

Answer 25

重新启动 Chrome 对我有用

Answer 26

我有同样的问题。关闭浏览器或硬重新加载无法正常工作。 然后我尝试：-我打开了开发者心情，-重新安装了vue devtool并且它起作用了