Vue.js开发工具未显示

12

突然间我的Vue.js开发者工具停止工作了。我在chrome上已经使用它两年了(自从我开始开发Vue.js以来)。现在我在chrome中看不到开发者工具了。昨天就这样发生了-我用了一段时间的开发者工具,然后我在做其他事情,过了一会儿,我注意到某些事情-开发者工具没了。尽管扩展程序显示开发者工具是在运行的: enter image description here


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

  1. 我使用它已经两年了,之前没有问题
  2. 早上它还在工作,然后它“就这样”停止了
  3. 现在它在任何项目中都不起作用,即使我知道它之前起作用了
  4. 我没有使用生产模式,缩小版本等…我通过webpack编译它并且之前可以运行。
  5. 即使在简单的新Vue.js应用程序上也无法工作 *

我尝试了什么:

  1. 硬刷新网站(当然要关闭并重新打开开发者工具)
  2. 重新启动浏览器
  3. 重新安装扩展程序
  4. 尝试这个版本此错误修复版本
  5. 退出帐户并重新登录
  6. 启用扩展程序的所有设置: enter image description here

操作系统: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。即使它能够工作,我的所有项目也无法使用它,因为它们并不是使用vue-cli创建的。我需要一个浏览器vue的解决方案,这就是为什么我甚至没有尝试过vue-cli的原因。 - Patrik Krehák
是的,但我想了解在哪种情况下它不起作用,只是想帮忙。 - Cristiano Soleti
你尝试过卸载Chrome或降级吗? - Cristiano Soleti
1
@CristianoSoleti 我还没有重新安装Chrome,因为我没有时间...但突然间它现在可以用了,我真的没有对它做任何事情。奇怪。 - Patrik Krehák
你正在使用哪个版本的vue.js?如果你已经将你的Vue项目更新到V3,那么你也需要更新你的开发工具。 - wittgenstein
显示剩余4条评论
7个回答

18
我也遇到了这个问题,无论是在Chrome还是Firefox中。
对于Chrome不幸的解决方案是将其更新到最新版本(今天是83.0.4103.106,在Windows上为64位)。
对于Firefox(77.0.1,64位),我禁用了所有其他扩展程序,加载页面时未打开Firefox Devtools,然后按F12键,Vue选项卡就会弹出。
通常,禁用任何其他扩展程序(例如“Ad Block Plus”或“I don't care about cookies”)可能会有所帮助。
[编辑]:添加我遇到的另一种情况,即Vue标签未显示在Chrome的Devtools中:
  1. 在未打开Devtools的情况下加载页面。
  2. 在扩展区域按Vue Devtools按钮(可能会显示“未检测到Vue.js”,但不要让它困扰你)。在某些设置中,此步骤至关重要。
  3. 然后再按F12打开Devtools。Vue选项卡应该出现(在所有选项卡的最右侧检查,您可以将其拖到左侧)。

由于我不再遇到此问题,我认为更新 Chrome 是解决方案:D。 - Patrik Krehák
我遇到了类似的问题,它说可以检测到Vue,但是它没有在开发者模式下构建,但是我绝对是在开发者模式下构建的,所以我不知道出了什么问题...你的提示信息也是这样吗? - ADJenks
2
谢谢 - 你的F12解决方案像魔法一样有效! - Jonathan Hyams
安装Vue dev tools的Beta版本可以正常使用,Stable版本无法使用。 - Čamo
@Čamo 这只是在您使用Vue 3时的解决方案。稳定版本的Vue Devtools应该可以很好地与Vue 2配合使用。 - iron9
是的,但Vue 3已经发布了一年多了。 - Čamo

4

1
另一个可能导致Vuejs开发工具未显示的原因是您运行了npm run productionnpm run dev,在这种情况下,该扩展程序将检测到Vuejs,但不会显示在开发工具中。因此,您需要运行npm run devnpm run watch。关闭开发工具,重新加载页面并打开开发工具。

我正在使用gulp+webpack运行它,我知道我已经处于开发模式(因为在生产环境中不可能在本地主机上运行项目,以防我犯错误)。无论如何,自那以后我就没有遇到过这种情况了。 - Patrik Krehák
实际上,除了具有不同的数据外,可以在本地运行生产项目。 - Solar
我知道,我故意这样做的 :) - Patrik Krehák

0

说句实话,希望这对于那些最终来到这里的人有所帮助:代码中的错误可能会阻止 Vue Devtools 的显示。我在router/index.js中从 Pinia 存储调用数据时遇到了这个问题。


0
对我来说,通过 unpkg 嵌入 VUE 的无版本号版本是有帮助的。它会拉取最新版本。现在浏览器中 Vue Devtools 就会显示出来了。

0
我发现我需要按Ctrl+C来退出当前进程,然后再次运行“php artisan serve”,然后Vue工具就会在Chrome中显示出来。

0

这在 Chrome 中已经发生了好几次。我只需要关闭检查器,然后再次打开它,就可以在检查选项卡中看到 Vue Devtools。


不要认为这是一个合适的答案,没有提供任何理由或帮助。仅仅简单地重新启动并不能解决问题。 - Asimple
我认为修复vue.js开发工具的错误不是我们的问题。我们可以继续使用该工具,直到下一个更新版本发布。 - fffarzan
问题描述中提供的信息表明,重新打开页面/检查器/浏览器都没有帮助。 - Asimple

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接