vue.js - chrome扩展插件 Vue.js devtools 6.6.3 在 vite+vue3项目中无法展示vue tab？

Question

chrome扩展插件Vue.js devtools 6.6.3 在 vite+vue3项目中无法展示vue tab？ 这种怎么调整？

Answer 1

打开Chrome后先打开项目，再打开 Chrome DevTools 就能看到 Vue 面板了。
反过来的话 Vue 面板就不会出现了。

Answer 2

在Vite + Vue 3项目中，如果Vue.js devtools无法展示Vue tab，这通常意味着devtools没有正确检测到Vue实例。以下是一些可能的解决步骤：

1. 确保Vue.js devtools是最新版本：
   检查Chrome扩展商店，看是否有Vue.js devtools的更新版本。如果有，请更新到最新版本，因为旧版本可能不支持Vue 3。
2. 检查Vue.js版本：
   确保你的项目中使用的是Vue 3.x版本，因为Vue.js devtools 6.6.3可能不兼容Vue 2.x。
3. 检查项目配置：
   确保你的Vite配置没有禁用Vue的devtools插件。检查vite.config.js（或vite.config.ts）中是否有相关配置。
4. 重新安装Vue.js devtools：
   尝试从Chrome扩展商店中移除Vue.js devtools，然后重新安装。
5. 检查Chrome版本：
   确保你的Chrome浏览器是最新版本，因为旧版本的浏览器可能不支持最新的devtools扩展。
6. 检查项目构建：
   如果项目在构建时使用了某些特定的插件或配置，可能会影响devtools的检测。尝试在开发模式下运行项目（不构建），看看devtools是否能正常工作。
7. 查看控制台错误：
   打开Chrome的开发者工具，查看控制台是否有任何与Vue或devtools相关的错误或警告。
8. 查看网络请求：
   在开发者工具的Network tab中，查看是否有与Vue.js devtools相关的请求失败。
9. 尝试其他项目：
   为了排除是项目本身的问题还是devtools的问题，你可以尝试在另一个简单的Vue 3 + Vite项目中安装devtools，看看是否能正常工作。
10. 搜索相关issue：
    查看Vue.js devtools的GitHub仓库或相关社区，看是否有其他人遇到了类似的问题，并找到了解决方案。

如果上述步骤都不能解决问题，可能需要更深入地调查项目的具体配置和代码，或者等待Vue.js devtools的更新来支持Vue 3 + Vite的更多场景。