Chrome 未显示Vue.js开发工具

lskq00tm  于 2022-12-16  发布在  Go
关注(0)|答案(7)|浏览(710)

突然我的Vue.js devtools停止工作了。我把它放在chrome中大概2年了(自从我开始开发Vue.js)。现在我在chrome中看不到devtools了。昨天就发生了这样的事情--我用了一段时间devtools,然后我在做别的东西,过了一段时间,我注意到了一些东西-- devtools不在了。尽管扩展程序说devtools可以工作:

为什么不是“我的”问题:
1.我用了2年没有问题,直到现在
1.早上还能用,然后“就”停了
1.现在它不工作在任何项目,甚至我知道它以前工作
1.我没有使用生产模式,缩小版等...我编译它通过webpack和工作之前。
1.即使在简单新鲜的Vue.js应用程序上也不起作用 *
为什么我尝试到目前为止:
1.硬刷新网站(当然是关闭和重新打开devtools)
1.重新启动浏览器
1.重新安装扩展
1.已尝试this versionthis bugfix version
1.从帐户注销和登录
1.已启用扩展的所有设置:

操作系统: Catalina macOS 10.15.4(19E 287)
浏览器: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并...”):

ccrfmcuu

ccrfmcuu1#

我也经历过这种情况,无论是Chrome还是Firefox。
不幸的是,Chrome的解决方案是将其更新到最新版本(今天,在Windows上是83.0.4103.106,64位)。
对于Firefox(77.0.1,64位),我禁用了所有其他扩展,在没有打开Firefox Devtools的情况下加载页面,然后按F12,Vue选项卡弹出。
一般来说,禁用任何其他扩展(例如,“广告拦截+”或“我不关心Cookie”)可能会有所帮助。

**[EDIT]:**添加我遇到的另一个案例,当Vue选项卡未显示在Chrome的Devtools中时:

1.在Devtools未打开的情况下加载页面
1.按下扩展区的DevVue工具按钮(可能会显示“未检测到Vue.js”,但不要让它困扰你)。在某些设置中,这一步至关重要。
1.只有 * 然后 * 通过按F12打开Devtools。Vue选项卡应出现(选中所有选项卡的最右侧,您可以将其拖动到左侧)

ttygqcqt

ttygqcqt3#

Vuejs devtools可能不显示的另一个原因是因为您运行了npm run productionnpm run dev,所以在这种情况下,扩展将检测Vuejs,但不会在devtools中显示。
因此,您必须运行npm run devnpm run watch
关闭devtools,重新加载页面并打开devtools

e0bqpujr

e0bqpujr4#

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

a0x5cqrl

a0x5cqrl5#

这种情况在Chrome中发生过几次,我只是关闭Inspect,然后再次打开它,就可以在Inspect选项卡中看到DevVue工具。

u3r8eeie

u3r8eeie6#

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

5t7ly7z5

5t7ly7z57#

不管它是值得的,也希望它能对最终来到这里的人有所帮助:代码中的错误可能会阻碍vue devtools显示。我在router/index.js中调用pinia存储的数据时遇到了这个问题。

相关问题