Vue - DevTools Open DevTools and look for the Vue panel（控制台没有 Vue 选项卡）

已于 2025-01-19 15:30:07 修改
阅读量5.5k 收藏 3
点赞数 4
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： vue.js 前端 javascript
于 2022-01-18 11:06:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/122555380
版权
+ Vue 同时被 2 个专栏收录
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
112 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在安装Vue DevTools后，若在Chrome控制台未看到Vue选项卡的解决方案。可能的问题包括权限设置不正确和配置文件中缺少启用DevTools的代码。建议首先检查浏览器扩展程序的权限设置，确保Vue DevTools可以访问文件网址，如果问题依旧，尝试在项目配置文件中添加相应代码以启用DevTools。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

安装了 Vue Devtools 后，发现如下图所示提示：
在这里插入图片描述
但在控制台中找不到任何相关界面，而正确（有 Vue 选项卡）的应该是如下图所示：
在这里插入图片描述

解决方案

有 2 种可能性，请依次按照步骤进行。

一、打开谷歌浏览器，在地址栏输入 chrome://extensions/ ，执行如下操作：

进入扩展程序中心，找到工具卡片，点击进入详情，如下图所示：
在这里插入图片描述
打开各种权限，尤

了解本专栏 订阅专栏 解锁全文
在google应用商店下载的Vue.js Devtools在控制台(开发者模式)没有vue选项
weixin_42664784的博客
02-21 8120
在google应用商店下载的Vue.js Devtools在控制台没有vue选项第一种:图标不亮第二种:图标亮,但是在下面的控制台选项中没有vue 第一种:图标不亮 首先,如果最上面那个vue图标如果没有亮,说明当前页面不是vue写的,找一个vue写的网页打开就亮了,比如哔哩哔哩 第二种:图标亮,但是在下面的控制台选项中没有vue 点击vue图标,有这么一段话 Vue.js is detecte...
Vue.js devtools-chrome插件-检测网站是否使用vue.js
08-30
网站vue.js检测插件,判断网页是否使用vue.js或者Nuxt.js，Nuxt.js + Vue.js is detected on this page.
关于控制台没有VUE选项
qq_50730710的博客
03-25 1287
然而下面没有vue这个选项，那么需要在js代码中添加 Vue.config.devtools = true;当上面图标亮起时，点击图标显示。
最新Chrome控制台中VUE Tools不显示问题（已解决！）
最新发布
Mismatch_16888的博客
04-12 260
使用Vue DevTools 插件报错的问题：Vue.js is detected on this page. Open DevTools and look for the Vue panel.
提莫拌一团蘑菇
03-31 7327
这个问题，是因为没有在main.js中开启debug mode main.js import Vue from 'vue' Vue.config.devtools = true 重新启动项目，就可以成功调试啦！
vue-devtools安装注意事项
吃瓜群众的博客
12-28 747
在Chrome浏览器中打开Chrome应用（点击即可）,点击添加至Chrome 安装后在vue项目调试时图标置灰，点击图标报如下错 Vue.js not detected；Vue.js is detected on this page. Open DevTools and look for the Vue panel. 如何处理？ 1、找到manifest.json在这个目录下（参...
【插件工具】Vue.js is detected on this page. Open DevTools and look for the Vue panel报错及安装vue-detools
Umbrella_Um的博客
08-06 1万+
如果已经安装了vue-devtools可以不看这部分 先介绍三种安装vue-devtools的方法： ① 可以直接去chrome商店下载该插件（科学上网） ② 事实上并不是都可以科学上网的，所以又不想找梯子，也不想npm install的，这里就给你们准备了大礼 -------------------------------------------------5.1.0--------------...
VUE.JS IS DETECTED ON THIS PAGE. OPEN DEVTOOLS AND LOOK FOR THE VUE PANEL.
qq_45055165的博客
08-08 2851
这个问题，是因为没有在MAIN.JS中开启DEBUG MODE！！我们在MAIN.JS中开启就OK啦。 解决办法： main.js Vue.config.devtools = true 重新启动项目，就可以成功调试啦！
Vue.js is detected on this page. Open DevTools and look for the Vue panel. 解决方法
热门推荐
weixin_45467273的博客
06-09 2万+
安装 Vue Devtools 之后运行总是提示 Vue.js is detected on this page. Open DevTools and look for the Vue panel. ** 安装完成后,必须进入chrome扩展工具选项里,找到 vue-devtools 详情信息，把允许访问文件网址选项 勾选上 然后使用F12来打开开发工具栏,就能看到 vue-devtools的了 如果觉得不错，用你发财的小手点个赞哦~ ...
Vue.js is detected on this page. Open DevTools and look for the Vue panel.
weixin_45346457的博客
03-02 855
1、closed and re-open Chrome. 2、Hard refresh the browser. 3、re-open the developer tools window and look for the Vue tab. 4、add before new vue instantiation: Vue.config.devtools = true;
vue-devtools-6.6.4-chrome
02-12
Vue-devtools是专为Vue.js开发的调试工具，它通过浏览器扩展的形式提供了调试Vue应用程序的能力。随着技术的发展，Vue-devtools也不断更新迭代以支持新的Vue.js版本和浏览器功能。 在本例中，文件名"vue-devtools-...
vue-devtools谷歌浏览器插件
09-20
vue-devtools专门用来调试vue If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
vue-devtools
03-27
Vue Devtools 是一个专为Vue.js开发者设计的强大浏览器扩展，它提供了深入的应用程序状态检查、实时编辑、性能分析等工具，极大地提升了开发效率。 在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以...
前端vue浏览器插件vue-devtools，前端vue开发
04-10
3. **实时编辑**：Vue Devtools 允许你在控制台中直接修改组件的数据，观察应用程序的即时响应，这在快速测试和调试时特别有用。 4. **事件监听**：在“Events”面板中，你可以看到组件触发的所有事件，以及与之...
vue-devtools5.1.1.rar
12-18
不过，对于"vue-devtools\shells\chrome"目录结构，这可能表示提供了离线安装的方式。你可以直接将这个文件夹拖放到Chrome的扩展页面进行安装，这对于没有网络或者需要在隔离环境中工作的开发者来说特别有用。 总的...
【Error】Vue.js is detected on this page. Open DevTools and look for the Vue panel.
道阻且长，行则将至。
10-12 1416
已成功解决
Vue开发者工具
weixin_45115479的博客
03-09 1万+
此篇文章帮助我记录，自己新手在使用Vue开发者工具遇到的问题 问题的大前提，要检查有无安装好Vue开发者工具 1、安装了 Vue.js devtools，也就是Vue开发者工具（Vue官网有详细介绍） https://cn.vuejs.org/ 2、在浏览器中安装，在扩展程序管理中添加 3、启动 Vue.js devetools 4、最重要一步！开启允许访问文件网址 5、基本能够在控制台中看到，并使用Vue开发者工具了 6、我会将Vue开发者工具固定在浏览器上，这样页面中使用了Vue，图标就变绿色，
Vue.js devtool插件下载安装及后续问题解决 Vue.js is detected on this page. Open DevTools and look for the Vue pane
weixin_44852765的博客
05-12 1048
安装步骤 下载: 下载地址 打开拓展程序: 点击设置—> 更多工具 —> 拓展程序 或者 chrome://extensions/ 在你的入口JS文件里加上一行Vue.config.devtools = true 问题: Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the aut.
vue.js.devtools图标有颜色显示，但不出现在控制台，why？
m0_67548194的博客
05-19 1978
出现这段英文Vue.js is detected on this page.控制台不显示vue面板？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值