vue3 - 为什么 chrome 的 vue 插件不能用了？

Question

如下图，已经成功安装，在F12打开后，确没有工具的选项。问题出在哪里呢？

插件版本：
Vue.js Devtools
7.7.0 2025-01-07

Answer 1

‌插件未正确安装‌：确保从Chrome Web Store或官方渠道下载并安装了最新版本的Vue开发工具。如果安装过程中遇到网络问题、权限问题或拼写错误，可能会导致插件无法使用‌

‌浏览器版本不兼容‌：某些浏览器版本可能不完全兼容最新的Vue开发工具。检查并确保你的浏览器版本与插件兼容‌
‌权限设置问题‌：浏览器的安全设置或插件的权限设置可能会阻止插件的正常运行。检查并调整相关设置，确保插件有足够的权限来运行‌

‌插件版本不匹配‌：如果你的项目使用的是Vue 2，而安装的插件版本是专为Vue 3设计的（如Vue DevTools v7），则会出现不兼容的情况。确保插件版本与你的Vue版本相匹配‌

‌当前页面未使用Vue.js‌：如果当前浏览的网页没有加载Vue.js库，Vue开发工具将无法检测到Vue的存在。确保你正在查看的页面确实使用了Vue.js框架‌

‌开发模式未启用‌：在生产模式下，某些开发工具和调试功能可能会被禁用。确保你启用了Vue的开发模式，这样Vue开发工具才能正常工作‌
‌与其他插件冲突‌：有时插件可能与浏览器中的其他插件发生冲突。可以尝试在无痕模式下使用Chrome或更换浏览器来解决这个问题‌

Answer 2

关闭掉 Chrome devTools 然后按一次F12重新打开应该就有了。
如果还是没有看一下 More Tools 选项下是不是有 Vue DevTools 这个选项。

或者看一下你启动的模式是否是生产模式，生产环境下默认是关闭 Vue DevTools 的。