javascript - vue3 devtools 不会亮了怎么回事?

Question

vue3 devtools 不会亮了怎么回事? 重启过电脑 浏览器了

插件已经装上了

跟着官方文档装的

• package.json

{  "name": "vue-project",  "version": "0.0.0",  "private": true,  "type": "module",  "scripts": {    "dev": "vite",    "build": "vite build",    "preview": "vite preview",    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"  },  "dependencies": {    "pinia": "^2.1.7",    "vue": "^3.4.21",    "vue-router": "^4.3.0"  },  "devDependencies": {    "@vitejs/plugin-vue": "^5.0.4",    "@vitejs/plugin-vue-jsx": "^3.1.0",    "eslint": "^8.49.0",    "eslint-plugin-vue": "^9.17.0",    "sass": "^1.72.0",    "sass-loader": "^14.1.1",    "vite": "^5.1.6",    "vite-plugin-vue-devtools": "^7.0.18"  }}

官方的方案都试过了

Answer 1

打开项目之后再使用F12打开Chrome DevTools，就能看到Vue面板了。

Vue devTools 文档里面有一些关于没有展示 devTools 的常见FAQ可以都尝试一下的
�� Frequently Asked Questions | Vue Devtools

---

更新：

在项目页面打开之后再使用F12打开Chrome的devTools工具。提前打开devTools会不显示，需要关闭后重新打开面板。
确定没有给VueDevTools插件调整过配置，比如说检查站点访问权限是否开启。

但是我看OP截图上面的Vue图表是点亮的，所以我觉得应该是devTools工具提前打开导致的。

Answer 2

根据您提供的信息和图片，Vue 3 Devtools 没有亮起可能有几个原因。以下是一些建议的解决步骤：

1. 确保 Vue 3 Devtools 已启用：

* 在浏览器的扩展程序中，找到 Vue 3 Devtools 并确保它已启用。* 如果已经启用，尝试禁用然后重新启用它。

2. 检查 Vue 版本：

* 确保您的项目中使用的 Vue 版本与 Vue 3 Devtools 兼容。Vue 3 Devtools 是为 Vue 3 设计的，所以请确保您的 `package.json` 文件中的 Vue 版本是 3.x.x。

3. 检查浏览器控制台：

* 打开浏览器的开发者工具，并查看控制台（Console）标签页中是否有任何错误或警告。这可能会提供关于为什么 Devtools 不工作的线索。

4. 检查 Vite 配置：

* 确保您的 Vite 配置正确，并且没有阻止 Devtools 的工作。您可以在 Vite 的配置文件（通常是 `vite.config.js`）中查找与 Devtools 相关的设置。

5. 更新依赖项：

* 尝试更新您的项目依赖项，特别是与 Vue 和 Vite 相关的依赖项。使用 `npm update` 或 `yarn upgrade` 命令来更新依赖项。

6. 尝试不同的浏览器：

* 尝试在不同的浏览器中运行您的项目，看看问题是否仍然存在。这有助于确定问题是否与特定的浏览器或浏览器扩展程序有关。

7. 查阅文档和社区：

* 查阅 Vue 3 Devtools 的官方文档，看看是否有任何未提到的配置或要求。* 在 Stack Overflow 或 Vue 社区论坛中搜索类似的问题，看看是否有其他开发者遇到了相同的问题并找到了解决方案。

如果上述步骤都无法解决问题，建议您创建一个最小可复现问题的示例项目，并在 Vue 3 Devtools 的官方仓库或相关社区中提交问题，以寻求更专业的帮助。