为什么 Vue.js Chrome Devtools 没有检测到 Vue.js？

Question

我有以下代码和一个简单的工作 Vue.js 应用程序。但是 vue.js devtools 没有响应。前几天还好好的，现在不行了，是什么问题？当我转到 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 时，它说它已经添加了。

<!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">

  <script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>

  <title>Document</title>
</head>
<body>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

<script>
  let data = {
    message: 'Hello World'
  }

  new Vue({
    el: '#application',
    data: data
  })
</script>
</body>
</html>

Answer 1

我找到了答案，我在我的计算机上查看了一个普通的 html 文件，这导致 vue.js 工具无法加载。我再次从本地机器服务器 url 加载了本地 xampp 服务器和运行应用程序，现在 vue.js devtools 正在运行！ :)

Answer 2

您也可以使用 Vue 配置禁用： https://vuejs.org/v2/api/#devtools

Answer 3

另一种方法是设置本地 Web 服务器，作为 OP 。
另一个 - 恕我直言，速度更快，骚扰更少 - 允许扩展程序访问文件 URL，默认情况下是禁用的。

只需转到 chrome://extensions 并为 Vue.js devtools 勾选“允许访问文件 URL”框。

来源：
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
http://codersdeck.com/vue-js-2-setting-vue-devtools/

Answer 4

我遇到了这个问题，我希望 vue-devtools 能够通过包含它来工作。我让它控制台记录了版本

console.log("Vue Version " +Vue.version );

但这并不能实际加载 vue 实例。

花了我几分钟时间，但一旦我真正创建了一个 vue 实例，它就成功了。这是使 devtools 工作的 hello world 示例 :)

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})

Answer 5

有同样的问题并通过添加

解决了

Vue.config.devtools = true;

在 Vue.js 导入脚本之后，然后查看 chrome devtools。您将看到一个名为 Vue 的选项卡来检查您的 vue 实例。

参考：https://vuejs.org/v2/api/#devtools

Answer 6

要解决此问题，只需转至 chrome://extensions/，向下滚动到 Vue.js 开发工具并通过单击启用“允许访问文件 URL”在它的复选框上。

来源：https://github.com/vuejs/vue-devtools/issues/236

Answer 7

我解决了同样的问题。但在我的例子中 Vue.js Chrome Devtools 没有检测到 Vue.js 因为在 html 文件中是 <script src="https://unpkg.com/vue"/>

我把它换成了<script src="https://unpkg.com/vue"></script> 现在 Chrome Devtools 正在完美检测 Vue.js。

感谢 above.I 使用 vue@2.4.4 并通过 file://

打开我的 html

Answer 8

在 chrome 浏览器的扩展文件夹中，在 vue devtools 扩展的详细信息选项卡下，选中允许访问文件 URL 的框，这对我有用..

Answer 9

我在 electron 中使用 Vue，我有 electron main "app" 分离 Vue 的 "app"。

在调试器控制台中输入 Vue 时出现错误 Uncaught ReferenceError: Vue is not defined

这是我的解决方法

window.vue = new Vue({
  components: {
    App,
    Login,
  },
  router,
  store,
  template: '<App/>',
}).$mount('#app');

解决方法是分配window.Vue以便开发工具可以找到它。

Answer 10

如果您已经在 chrome://extensions/ -> Vue Devtools 中启用了 Allow Access to file URLs 但它仍然不起作用，请尝试重新安装 Vue Devtools，它可能对您有用。

Answer 11

同样的问题，我已经解决了

如果您在本地主机环境中开发并使用 Chrome 开发工具，那么您需要授予 Vue.js 扩展访问计算机上本地文件的权限。

在 Chrome 个扩展中配置您的 Vue.js 工具
搜索 "Vue.js devtools"
点击详情
选中 "Allow access to file URLs" 复选框

Answer 12

如果您使用的是 Vue 3 并遇到此问题，请尝试安装 Vue Devtools 的测试版。在稳定版本得到主要重构之前，它可能会有所帮助。

Answer 13

我尝试了此处答案中提供的所有方法，但是 none 对我有用（对 chrome 和 firefox 均无效）。

终于找到答案了：如果还是有这个问题，可以尝试卸载当前版本的Vue扩展，安装测试版：https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension

之后记得重启浏览器。

Answer 14

我遇到了同样的问题并通过以下方式解决了：

正在安装此扩展程序Vue Dev Tools Beta Chrome Extention
正在重新加载 chrome 浏览器。

Answer 15

更新：2021 年 5 月 30 日，

如果您使用的是 Vue 3，旧的开发工具版本将无法使用，所以只需使用新的测试版。

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Answer 16

检查 vuejs 应用程序是否未嵌入 iframe，例如 storybook 应用程序。

这种情况下的破解方法是在父框架之外工作，直接在 iframe 的 url 上工作，vue devtools 应该可以正常工作。

Answer 17

如果是 Firefox，请安装支持 Vue 3 的 the beta version of vue-devtools。

Answer 18

在我的例子中，我只是为生产编译了 npm run prod - 这就是问题所在。当我运行在 dev npm run dev 中时，它开始识别 Vue。

为什么 Vue.js Chrome Devtools 没有检测到 Vue.js？

Why is Vue.js Chrome Devtools not detecting Vue.js?

devtools

vue.js