Vue DevTools 可以检测到 Vue.js 但未显示在 F12 面板中

Posted 2023-02-22

【中文标题】Vue DevTools 可以检测到 Vue.js 但未显示在 F12 面板中

【英文标题】：Vue DevTools could detect Vue.js but does not show in F12 panel

【发布时间】：2020-02-14 00:02:38

【问题描述】：

我正在尝试调试用 Vue 编写的网页。我想使用 Vue DevTools 查看 Vue 数据。我将它安装在 Chrome 上，它可以检测到我的网页：

但是，当我单击 F12 打开 DevTools 时，Vue 选项卡无法出现在面板上：

我也尝试在本地安装 VUE devtools（从 gi​​thub 下载，使用 npm run build）并得到相同的结果。 有什么解决这个问题的建议吗？

【问题讨论】：

必须启用调试。如果开发者禁用了调试，那么扩展会显示该页面使用了 Vue，但您将无法通过 devtools 进行调试和查看详细信息。

【参考方案1】：

更改vue源码<script src="//cdn.bootcss.com/vue/2.5.17/vue.min.js"></script> 到<script src="//cdn.bootcss.com/vue/2.5.17/vue.js"></script> 可以解决这个问题

【参考方案2】：

可能的原因可能是vue devtools检测不到vue代码，可以通过https://vuejs.org/index.html测试一下。