Vue.js devtools没有显示 [英] Vue.js devtools not showing
问题描述
突然我的Vue.js devtools停止工作.自从我开始开发Vue.js以来，我在Chrome中使用了大约2年.现在我看不到Chrome中的devtools.昨天发生了这样的事情-我使用了一段时间的devtools，然后又在做其他事情，一段时间后，我注意到了一些东西-devtools不在了.即使扩展名说devtools可以工作:
Suddenly my Vue.js devtools stopped working. I had it in the chrome for like 2 years (since I started developing Vue.js). Now I can't see devtools in chrome. It happened yesterday just like that - I was using devtools for a while, then I was working on something else and after a while, I noticed something - devtools is away. Even though the extension is saying that devtools works:
为什么不是我的"问题:
Why it is not "my" problem:
- 我使用了2年没有问题，直到现在
- 它在早上工作，然后只是"停止了
- 现在它不适用于任何项目，即使我知道以前也可以使用
- 我没有使用生产模式，缩小版本等.我通过webpack对其进行了编译，并且以前可以使用.
- 即使在简单的Vue.js应用程序上也无法使用*
- I use it for 2 years with no problem, until now
- It was working in the morning, then it "just" stopped
- Now it doesn't work on any project, even I know it worked before
- I'm not using production mode, minified version, etc... I compile it through webpack and worked before.
- It doesn't work even on the simple-fresh Vue.js app *
为什么我到目前为止尝试过:
Why I tried so far:
- 硬刷新网站(当然，请关闭并重新打开devtools)
- 重新启动浏览器
- 重新安装扩展程序
- 尝试了
操作系统:macOS Catalina 10.15.4(19E287)
OS: macOS Catalina 10.15.4 (19E287)
浏览器:83.0.4103.61
Browser: 83.0.4103.61
Vue.js DevTools :5.3.3
* Fresh Vue.js应用程序代码如下:
* Fresh Vue.js app code looks like this:
<!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，然后..."):
And it still doesn't work (yes, the extension still says "Vue.js detected on this page. Open DevTools and..."):
推荐答案
在Chrome和Firefox上我也都经历过.
I experienced this, too, both for Chrome and Firefox.
不幸的是，Chrome的解决方案将其更新为最新版本(今天为83.0.4103.106，Windows上为64位).
The unfortunate solution for Chrome was updating it to the latest version (today, that is 83.0.4103.106, 64bit on Windows).
对于Firefox(77.0.1，64位)，我禁用了所有其他扩展，在未打开Firefox Devtools的情况下加载了页面，然后按了F12键并弹出了Vue标签.
For Firefox (77.0.1, 64bit) I disabled all other extensions, loaded the page without Firefox Devtools open, then hit F12 and the Vue tab popped up.
通常，禁用任何其他扩展名(例如考虑"Ad Block Plus"或我不在乎cookie")可能会有所帮助.
In general, disabling any other extensions (think of "Ad Block Plus" or "I don't care about cookies" for example) might help.
:添加了我遇到的另一种情况，即Chrome的Devtools中未显示Vue标签:
: Adding another case I experienced, when the Vue tab does not show up in Chrome's Devtools:
- 在未打开Devtools的情况下加载页面
- 按下扩展区域中的Vue Devtools按钮(可能会说未检测到Vue.js"，但不要让您感到烦恼).在某些设置中，此步骤至关重要. 通过按F12键，仅
- 然后 打开Devtools.Vue标签会出现(选中所有标签的右边，您可以将其拖到左侧)
- load the page without Devtools open
- press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.
- only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)
这篇关于Vue.js devtools没有显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
