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

【问题标题】：Why is Vue.js Chrome Devtools not detecting Vue.js?为什么 Vue.js Chrome Devtools 没有检测到 Vue.js？
【发布时间】：2017-05-04 02:35:30
【问题描述】：

我有以下代码和一个简单的 Vue.js 应用程序。但是 vue.js 开发工具没有响应。前几天还好好的，现在就不行了，怎么回事？当我去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>

【问题讨论】：

标签： vue.js devtools

【解决方案1】：

另一种方法是设置本地 Web 服务器，作为 OP already stated。
另一个 - 恕我直言，它更快且骚扰更少 - 让扩展程序可以访问文件 URL，默认情况下禁用。

只需转到 chrome://extensions 并为 Vue.js 开发工具选中“允许访问文件 URL”框。

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

【讨论】：

不起作用。需要安装 Beta 版的 Vue 开发工具。

【解决方案2】：

我尝试了此处答案中提供的所有方法，但没有一个对我有用（无论是 chrome 还是 firefox）。

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

之后记得重启浏览器。

【讨论】：

这绝对是 Vue 3 问题的答案
Firefox 用户应该从这里获得最新的 beta 版本：github.com/vuejs/vue-devtools/releases（直到 v6 有稳定版本）。上面的文档链接指向特定版本（对我不起作用）而不是最新版本（确实起作用）。
这个效果最好！谢谢！

【解决方案3】：

更新日期：2021 年 5 月 30 日，

如果您使用的是 Vue 3，旧的开发工具版本将无法使用，因此请使用新的 beta 版本。

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

【讨论】：

2021-07-05 仍然正确，这就是我的答案。
奇怪的是网上商店的扩展文档没有明确说它与Vue 3不兼容。对于Firefox，有一个测试版可在此处下载：vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3
只是为了加点DO NOT FORGET TO RESTART THE BROWSER AFTER INSTALLATION
我不需要重新启动浏览器 - 在 macOS 上使用 Vivaldi

【解决方案4】：

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

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

【讨论】：

在 github 自述文件中也提到过。 github.com/vuejs/vue-devtools#common-problems-and-how-to-fix

【解决方案5】：

遇到同样的问题，通过添加解决了

Vue.config.devtools = true;

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

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

【讨论】：

无法设置未定义的属性“devtools”

【解决方案6】：

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

【讨论】：

附带说明一下，我在我的 laravel 应用程序上加载 vue.js 时也遇到了困难，诀窍是运行“npm install”，然后运行“npm run watch”，现在一切正常.我喜欢使用 Vue.js 和 Laravel！ :)

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

我遇到了这个问题，我希望 vue-devtools 只包含它就可以工作。我让它控制台记录版本

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

但这并没有实际加载 vue 的实例。

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

let data = {
  message: 'Hello World'
}

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

【讨论】：

【解决方案11】：

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

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

感谢上面的例子。我使用 vue@2.4.4 并通过file://打开我的html

【讨论】：

【解决方案12】：

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

【讨论】：

在意识到 Vue Devtools 不支持 Vue 3 之前，我为此苦苦挣扎了很久。我还必须禁用稳定版才能使测试版正常工作。

【解决方案13】：

如果您已经在chrome://extensions/ -> Vue Devtools 中打开了Allow Access to file URLs，但仍然无法使用，请尝试重新安装 Vue Devtools，可能对您有用。

【讨论】：

【解决方案14】：

我在电子中使用 Vue，并且我将电子主“应用程序”与 Vue 的“应用程序”分开。

在调试器控制台中，键入 Vue 会给出错误 Uncaught ReferenceError: Vue is not defined

这是我的解决方法

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

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

【讨论】：

【解决方案15】：

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

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

在 Chrome 扩展程序中配置您的 Vue.js 工具
搜索“Vue.js 开发工具”
点击详情
选中“允许访问文件 URL”复选框

【讨论】：

【解决方案16】：

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

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

【讨论】：

我无法“在场外工作”，因为我使用的是 Google 应用程序脚本，它在我的 Web 应用程序之上添加了 iFrame。知道该怎么做吗？
vue3 还没有准备好。暂时使用 console.log
你是说 Vue3 还是 Vue 开发插件？
我现在的意思是 vue3

【解决方案17】：

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
@hardkoded 我实际上找到了这个线程，因为我在 Firefox 上遇到了同样的问题。我认为答案对使用另一个浏览器的人很有用。那么我应该如何发布这些类型的回复呢？