9

突然我的 Vue.js 开发工具停止工作了。我在 chrome 中使用了大约 2 年(因为我开始开发 Vue.js)。现在我在 chrome 中看不到 devtools。昨天就这样发生了——我使用了一段时间的 devtools,然后我在做别的事情,过了一会儿,我注意到了一些事情——devtools 不在了。即使扩展程序说 devtools 有效: 在此处输入图像描述


为什么它不是“我的”问题:

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

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

  1. 硬刷新网站(当然关闭并重新打开 devtools)
  2. 重新启动浏览器
  3. 重新安装扩展
  4. 试过这个版本这个错误修正版本
  5. 从帐户注销并登录
  6. 启用扩展的所有设置: 在此处输入图像描述

操作系统: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 并...”): 在此处输入图像描述

4

6 回答 6

12

对于 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 中时,添加我遇到的另一个案例:

  1. 在没有打开 Devtools 的情况下加载页面
  2. 按下扩展区域中的 Vue Devtools 按钮(可能会说“未检测到 Vue.js”,但不要让这打扰你)。在某些设置中,此步骤至关重要。
  3. 然后按 F12 打开Devtools 。Vue选项卡应该出现(检查所有选项卡的最右侧,您可以将其拖动到左侧)
于 2020-06-18T08:53:48.530 回答
3

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

于 2021-08-23T15:05:37.277 回答
1

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

因此,您必须运行npm run devnpm run watch.

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

于 2020-12-19T06:36:18.970 回答
0

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

于 2021-03-01T08:31:21.020 回答
0

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

于 2021-03-01T06:00:33.670 回答
0

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

于 2021-04-19T13:05:27.033 回答