Vue.js 开发工具未显示答案

【问题标题】：Vue.js devtools not showingVue.js 开发工具未显示
【发布时间】：2020-09-15 11:27:45
【问题描述】：

我的 Vue.js 开发工具突然停止工作。我在 chrome 中使用了大约 2 年（因为我开始开发 Vue.js）。现在我在 chrome 中看不到 devtools。昨天就这样发生了——我使用了一段时间的 devtools，然后我在做别的事情，过了一段时间，我注意到了一些事情——devtools 不在了。即使扩展程序说 devtools 有效：

为什么不是“我的”问题：

我用了2年没问题，到现在
它在早上工作，然后它“只是”停止了
现在它不适用于任何项目，即使我知道它之前也有效
我没有使用生产模式，缩小版本等...我通过webpack编译它并且之前工作过。
即使在简单新鲜的 Vue.js 应用程序上也无法使用 *

到目前为止我为什么尝试：

硬刷新网站（当然关闭并重新打开开发工具）
重启浏览器
重新安装扩展程序
试过this version 和this bugfix version
退出并从帐户登录
启用扩展的所有设置：

操作系统：macOS Catalina 10.15.4 (19E287)

浏览器：83.0.4103.61

Vue.js 开发工具：5.3.3

* 新鲜的 Vue.js 应用程序代码如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

它仍然不起作用（是的，扩展程序仍然显示“在此页面上检测到 Vue.js。打开 DevTools 并...”）：

【问题讨论】：

即使是在通过 vue-cli 创建的应用程序上？因为你发送的“新鲜sn-p”是在浏览器上使用Vue
我根本不使用 vue-cli。即使它可以工作，我所有的项目也无法让它工作，因为它们不是用 vue-cli 制作的？我需要一个浏览器 vue 的解决方案，这就是为什么我什至没有尝试 vue-cli。
是的，但我想了解在哪种情况下它不起作用，只是想帮助人类
我很感激。有趣的是 - 它适用于我所有的同事，除了他们还没有更新他们的 chrome。
@CristianoSoleti 我没有重新安装 chrome，因为我没有时间安装它......但突然之间它现在可以工作了，我真的没有用它做任何事情。很奇怪。

标签： google-chrome vue.js vuejs2 devtools vue-devtools

【解决方案1】：

我在 Chrome 和 Firefox 中也遇到过这种情况。

不幸的是，Chrome 的解决方案是将其更新到最新版本（今天是 83.0.4103.106，Windows 上为 64 位）。

对于 Firefox（77.0.1，64 位），我禁用了所有其他扩展，在没有打开 Firefox Devtools 的情况下加载页面，然后按 F12 并弹出 Vue 选项卡。

一般来说，禁用任何其他扩展程序（例如“Ad Block Plus”或“我不关心 cookie”）可能会有所帮助。

[编辑]：添加我遇到的另一个案例，当 Vue 选项卡未显示在 Chrome 的 Devtools 中时：

在没有打开 Devtools 的情况下加载页面
按扩展区域中的 Vue Devtools 按钮（可能会说“未检测到 Vue.js”，但不要让这打扰您）。在某些设置中，此步骤至关重要。
只有然后按 F12 打开 Devtools。 Vue选项卡应该会出现（选中所有选项卡的最右侧，您可以将其拖动到左侧）

【讨论】：

由于我不再遇到这种情况，我认为更新 chrome 是解决方案：D
我遇到了类似的问题，它说它可以检测到 vue，但我没有在开发者模式下构建它，但我确实在开发者模式下构建了它，所以我没有知道发生了什么事...你说的吗？
谢谢 - 您的 F12 解决方案就像魔术一样！
安装 Beta 版的 Vue 开发工具可以工作。稳定不起作用。

【解决方案2】：

如果使用 Vue 3，您需要当前仍处于测试阶段的新版扩展 https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en

【讨论】：

【解决方案3】：

Vuejs devtools 可能未显示的另一个原因是因为您运行了 npm run production 或 npm run dev，所以在这种情况下，扩展程序会检测到 Vuejs，但不会在 devtools 中显示。

因此，您必须运行 npm run dev 或 npm run watch。

关闭 devtools，重新加载页面并打开 devtools

【讨论】：

我正在通过 gulp+webpack 运行它，并且我知道我有开发模式（因为在生产环境中无法在 localhost 上运行该项目，以防万一我出错）。不管怎样，从那以后我就再也没有经历过。
其实可以在本地运行生产项目，只是数据不同
我知道，我只是故意这样做的 :)

【解决方案4】：

我发现我必须按 Ctrl+C 退出当前进程，然后再次运行“php artisan serve”，然后 Vue 工具会出现在 Chrome 中

【讨论】：

【解决方案5】：

这在 Chrome 中发生了好几次。我只是关闭检查并再次打开它以在检查选项卡中查看 Vue Devtools。

【讨论】：

不要认为这是一个正确的答案，没有提供任何理由/帮助。只是简单的重启并不能解决问题。
我认为修复 vue.js 开发工具的 bug 不是我们的问题。在下次更新之前，我们可以继续使用该工具
有问题描述中的信息表明重新打开页面/检查器/浏览器没有帮助

【解决方案6】：

对我来说，通过 unpkg 嵌入 VUE 无版本会有所帮助。它提取最新版本。现在浏览器 Vue Devtools 出现了。

【讨论】：