Vue.js devtools 未显示

Question

我的 Vue.js devtools 突然停止工作。我在 chrome 中使用了大约 2 年（自从我开始开发 Vue.js 以来）。现在我在 chrome 中看不到 devtools。昨天就这样发生了——我用了一段时间的 devtools，然后我在做其他事情，过了一会儿，我注意到了一些东西——devtools 不在了。即使扩展说 devtools 有效：

为什么不是"my"问题：

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

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

硬刷新网站（当然关闭并重新打开 devtools）
重启浏览器
重新安装扩展程序
尝试过this version and also this bugfix version
注销并从帐户登录
启用扩展程序的所有设置：

OS: macOS 卡特琳娜 10.15.4 (19E287)

浏览器: 83.0.4103.61

Vue.js DevTools: 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 detected on this page. Open DevTools and..."）：

Answer 1

对于 Chrome 和 Firefox，我也遇到过这种情况。

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

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

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

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

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

Answer 2

Vuejs devtools 可能不显示的另一个原因是因为你运行 npm run production 或 npm run dev 所以在这种情况下扩展将检测 Vuejs 但不会在 devtools 中显示.

所以你必须运行 npm run dev 或 npm run watch.

关闭开发工具，重新加载页面并打开开发工具

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Vue.js devtools 未显示

Vue.js devtools not showing

google-chrome

vue.js

vuejs2

devtools

vue-devtools