VueJs dev工具面板没有显示

Question

我开始在我的应用中使用vue dev-tools但在Chrome中处于开发者模式时无法看到。我尝试了在dev-tools github页面和网络上其他地方找到的各种解决方案，但没有运气。以下是我已经完成/尝试展示的内容。

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

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

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

有没有人有解决方案？感谢。

Answer 1

我无法在菜单栏上显示Vue图标，但是我能够在Chrome开发者工具中显示Vue选项卡。请尝试以下方法：

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

工具栏中的图标可能仍表示无法检测到Vue，但该标签应在Chrome开发者工具中可见。

Answer 2

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

Answer 3

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

Answer 4

做一个＆＃34;硬重装＆＃34;好几次在Windows上：SHIFT + F5。 在Mac上：CMD + SHIFT + R。

Answer 5

关闭文件标签并重新打开它对我有用。

Answer 6

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

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

• 找到Vue扩展名，单击详细信息，然后更改设置为“允许访问文件URL：

Screenshot

Answer 7

步骤1：将vue.js devtools作为扩展名添加到here

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

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

第4步：：单击鼠标右键，然后选择inspect，然后尝试找到Vue。

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

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

Answer 8

（对于 Firefox 浏览器）如果在浏览器中添加了附加组件“Vue.js devtools”。只需单击 Inspect Element（或按 F12），就会有一个 Vue 选项卡以及 Inspector、Console、Network 等. 点击那个 Vue 标签并享受调试。

Answer 9

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

Answer 10

请确保您不使用生产CDN。让它适用于我的唯一方法是使用VueJS开发版。

发展：vue.js

Answer 11

• 多次重启Google Chrome

• 不使用分钟文件

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

  Vue.config.devtools = true;
  

Answer 12

这是我定期发生的事情，很烦人，因为似乎没有原因。

• 转到Chrome浏览器扩展程序
• 删除Vue DevTools扩展
• 重新添加回去
• 很难刷新页面

---

Chrome-版本71.0.3578.98

MacOS Mojave 10.14

VueJS 2.5.21

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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