Vue.js 开发工具未显示
deb*_*ute 7 google-chrome devtools vue.js vuejs2 vue-devtools
突然间，我的 Vue.js devtools 停止工作了。我在 chrome 中使用了大约 2 年（自从我开始开发 Vue.js）。现在我在 chrome 中看不到 devtools。昨天就这样发生了——我使用了一段时间的 devtools，然后我在做其他事情，过了一段时间，我注意到了一些东西——devtools 不见了。即使扩展说 devtools 有效：
为什么它不是“我的”问题：
- 我用了 2 年没有问题，直到现在
- 它在早上工作，然后它“只是”停止了
- 现在它不适用于任何项目，即使我以前知道它也有效
- 我没有使用生产模式、缩小版本等......我通过 webpack 编译它并且以前工作过。
- 即使在简单新鲜的 Vue.js 应用程序上它也不起作用 *
为什么我到目前为止尝试过：
操作系统：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 和...”）：
hen*_*zen 10
对于 Chrome 和 Firefox，我也经历过这种情况。
Chrome 的不幸解决方案是将其更新到最新版本（今天是 83.0.4103.106，Windows 上的 64 位）。
对于 Firefox（77.0.1，64 位），我禁用了所有其他扩展，在没有打开 Firefox Devtools 的情况下加载页面，然后按 F12 并弹出 Vue 选项卡。
通常，禁用任何其他扩展程序（例如“Ad Block Plus”或“我不关心 cookie”）可能会有所帮助。
[编辑]：添加我遇到的另一个案例，当 Vue 选项卡未显示在 Chrome 的 Devtools 中时：
- 在没有打开 Devtools 的情况下加载页面
- 按扩展区域中的 Vue Devtools 按钮（可能会说“未检测到 Vue.js”，但不要让它打扰您）。在某些设置中，此步骤至关重要。
- 只有再开放Devtools通过按F12。应出现Vue选项卡（检查所有选项卡的最右侧，您可以将其拖到左侧）
- 谢谢 - 您的 F12 解决方案就像魔法一样！ (2认同)
| 归档时间： |
|
| 查看次数： |
7913 次 |
| 最近记录： |