突然我的Vue.js开发工具停止工作.我在chrome上使用了大约两年(自从我开始开发Vue.js以来).现在我看不到chrome中的devtools.昨天就这样发生了——我用了一段时间devtools,然后我在做其他事情,过了一段时间,我注意到了一件事——devtools不见了.尽管扩展说明devtools是有效的:


为什么不是"我的"问题:

  1. 我用了两年都没有问题,直到现在
  2. 它在早上开始工作,然后就"停止"了
  3. 现在它在any项目上不起作用了,即使我知道它以前起过作用
  4. 我没有使用生产模式、缩小版等...我是通过网页编辑的,以前工作过.
  5. 它甚至在简单的fresh Vue上也不起作用.js应用*

到目前为止我为什么try :

  1. 硬刷新网站(当然,关闭并重新打开devtools)
  2. 重新启动浏览器
  3. 重新安装扩展
  4. 试了this version次,也试了this bugfix version
  5. 注销并从帐户登录
  6. 已启用扩展的所有设置:

OS:macOS Catalina 10.15.4(19E287)

Browser: 83.0.4103.61

Vue.js DevTools: 5.3.3


* fresh 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并…"):

推荐答案

对于Chrome和Firefox,我也有过这样的经历.

不幸的是,Chrome的解决方案是将其更新到最新版本(今天,在Windows上是83.0.4103.106,64位).

对于Firefox(77.0.164位),我禁用了所有其他扩展,在Firefox开发工具未打开的情况下加载页面,然后点击F12,Vue选项卡弹出.

一般来说,禁用任何其他扩展(比如"Ad Block Plus"或"我不在乎cookies")可能会有所帮助.

[EDIT]:添加另一个我经历过的 case ,当Vue选项卡没有出现在Chrome的Devtools中时:

  1. 在没有打开Devtools的情况下加载页面
  2. 按扩展区域中的Vue Devtools按钮(可能会说"Vue.js未检测到",但不要让它打扰您).在某些设置中,这一步至关重要.
  3. 只需点击F12即可打开then个Devtools.Vue选项卡应该出现(选中所有选项卡的最右侧,可以将其拖动到左侧)

Vue.js相关问答推荐

为什么元素会从Vue 3中的TransitionGroup左上角出现?

Rails Webpacker 还是 Vue-CLI?

运行vue-cli-service build --watch时没有 CSS 文件

带有外部配置文件的 Vue js

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

查看 cli3 启用 CORS

eslint – 如何知道 defined定义规则的位置

Vue-Router 抽象父路由

React.js 是否有类似 Vue.js

VueRouter 未定义

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

如何使用 vue.js 获取所选选项的索引

Laravel 中的 VueJS 组件实现中的鼠标悬停

如何在 Vue 类组件中定义过滤器?

v-if inside v-for - 在两列中显示项目列表

如何在 JEST 测试中模拟全局 Vue.js 变量

VueJS错误避免直接改变props

在 Vue.js 模板中调用函数

如何使用vue js判断组件本身的数据何时发生变化?

在 Vuejs 中全局导入 Axios 方法