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工具提前打开导致的。