Chrome扩展vue-devtools没有检测到Vue

Question

没有检测到我的<script src="https://cdn.jsdelivr.net/npm/vue"></script>

另外，https://v2.vuejs.org/v2/examples/commits.html有<script src="/js/vue.js"></script>，当单击Chorme上的Vue图标时，请说“未检测到Vue.js”

PS:使用扩展描述这里并假设github.com/vuejs/vue-devtools。

编辑:安装什么都没有，但是必须关闭并重新打开Chorme。

嗯，这是一个新的问题，现在点击-VueIcon消息是

在此页面中检测到Vue.js。Devtools检查不可用，因为它处于生产模式或作者显式禁用。

Answer 1

我找到了一个简单的解决办法：

• 右键单击Vue图标并单击Manage extensions
• 向下滚动并启用Allow access to file URLs
• 重新启动你的Chrome，你就好了。

注意：您可能需要通过在脚本开头添加一行来打开调试模式

Vue.config.devtools = true;

Answer 2

如果使用Vue 3，则需要当前仍处于beta https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en中的扩展的新版本。

Answer 3

对于初学者来说，使用萨马约的答案是不完整的。对于困惑的人来说，了解放置在某个位置的代码是很重要的。

导致此问题的原因是您正在使用来自CDN的Vue.js。您应该将Vue.config.devtools = true;代码片段添加到xxx.js文件中。例如：

example.js

Vue.config.devtools = true;

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
})

参考资料：

https://github.com/vuejs/vue-devtools/issues/190