Vue.js 开发工具未显示

Posted 2023-04-13

技术标签:

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

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

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

任何

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

硬刷新网站（当然关闭并重新打开开发工具）重启浏览器重新安装扩展程序试过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，因为我没有时间安装它......但突然之间它现在可以工作了，我真的没有用它做任何事情。很奇怪。 【参考方案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 中时：

然后

【讨论】：

由于我不再遇到这种情况，我认为更新 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。