突然我的Vue.js devtools停止工作。自从我开始开发Vue.js以来,我在Chrome中使用了大约2年。现在我看不到Chrome中的devtools。昨天发生了那样的事情-我使用了devtools一段时间,然后又在做其他事情,一段时间后,我注意到了一些东西-devtools不在了。即使扩展名说devtools起作用:
google-chrome - Vue.js devtools没有显示-LMLPHP

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

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


  • 为什么到目前为止我尝试:
  • 硬刷新网站(当然,请关闭并重新打开devtools)
  • 重新启动浏览器
  • 重新安装扩展名
  • 尝试过this version以及this bugfix version
  • 从帐户
  • 注销并登录
  • 启用扩展的所有设置:
    google-chrome - Vue.js devtools没有显示-LMLPHP


  • 操作系统:macOS Catalina 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。打开DevTools并...”):
    google-chrome - Vue.js devtools没有显示-LMLPHP

    最佳答案

    对于Chrome和Firefox,我也都经历过。
    不幸的是,Chrome的解决方案将其更新为最新版本(今天为83.0.4103.106,Windows上为64位)。
    对于Firefox(77.0.1,64位),我禁用了所有其他扩展,在未打开Firefox Devtools的情况下加载了页面,然后按F12键并弹出了Vue选项卡。
    通常,禁用任何其他扩展名(例如,考虑“Ad Block Plus”或“我不在乎cookie”)可能会有所帮助。
    [编辑]:当Chrome的Devtools中未显示Vue标签时,添加了我遇到的另一种情况:

  • 无需Devtools打开即可加载页面
  • 按下扩展区域中的Vue Devtools按钮(可能会说“未检测到Vue.js”,但请不要打扰您)。在某些设置中,此步骤至关重要。
  • 才可以通过按F12打开Devtools。 Vue标签应该出现(选中所有标签的右边,您可以将其拖到左侧)
  • 09-17 13:25
    查看更多