vue-devtools 不显示的问题

最新推荐文章于 2025-03-25 22:37:16 发布
最新推荐文章于 2025-03-25 22:37:16 发布
阅读量2.9k 收藏 2
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39019768/article/details/137098163
版权
文章讨论了在Vue项目中，虽然浏览器右上角插件正常显示，但控制台未显示VueDevTools的问题。原因在于使用了externals打包优化和压缩版本的Vue，这导致默认调试工具未启用。为解决此问题，建议在开发环境中使用非压缩版本的Vue。

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

vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。

  1. 项目中在main.js中添加设置devtools为trueVue.config.devtools = true
  2. 插件显示可以使使用，控制台没有显示VUE选项
    请添加图片描述
    项目使用了 externals 打包优化，使用了vue的压缩版本，导致vue默认不显示调试工具

开发环境使用非压缩版本
在这里插入图片描述

uuai
关注
vue2 调试工具vue Devtools F12 不显示 vue 无法调试 苦恼啊！！ 本人亲测 绝对解决问题 ！！！！ 方法如下
2402_83696437的博客
01-12 2071
vue2 调试工具vue Devtools F12 不显示 vue 无法调试 解决方法 绝对有效！！！
vue.js (2.6.11)、vue devtools、vue页签不显示的解决 办法
04-03
学习vue，安装vue devtools后，按F12发现无法显示vue页签，百度后原因有二：1.vue.js(2.6.11)文件应该是无压缩、调试版本的；2.需要在vue devtools控制面板中勾选“在无痕模式下启用”、“允许访问网站文件”。本资源包含vue调试版本的无压缩文件、以及vue devtoosl离线安装插件。
解决安装了Vue-devtools插件，但浏览器的控制台不显示Vue的问题
最新发布
2301_76268105的博客
03-25 1178
此时在浏览器右上角出现了Vue的图标，我们在浏览器中打开自己的项目，发现是高亮状态，但控制台还是没有显示Vue。我使用的是Chome浏览器，在管理扩展程序页面打开vue.js devtool的详情页，选择固定到工具栏。今天在Vue-devtools插件的时候，发现控制台一直不显示vue选项，如图。重新安装了旧版本后，重新打开浏览器，打开自己的项目，就能成功显示Vue啦。在网上找了很多方法都没用，最后终于解决，于是给大家分享一下我的解决方案。所以只需要卸载当前版本，下载旧版本的。以下是正常显示Vue的页面。
Vue板块:安装 Vue Devtools及不显示没有作用的问题
weixin_44690155的博客
05-28 3886
问题1：在使用Vue.js开发过程中，有时我们会遇到"vue.js not detected"的问题，这意味着浏览器无法找到Vue.js库。解决1：将Vue实例挂载到HTML元素上。重启Chrome浏览器，打开使用Vue.js开发版的网页文件，发现此时Vue.js devtools图标亮了，可以使用该插件了（下面代码）
安装了vue插件devtools,控制台不显示的解决方法
m0_73657187的博客
09-21 2311
3.把允许访问文件地址打开即可，有时候反应稍慢，多刷新几遍即可。1.打开浏览器页面的管理扩展程序。2.点击vue插件的“详情”项。
解决浏览器中 vue-devtools 不显示的问题
来杯卡布奇诺的博客
08-09 1万+
一种是 vue-devtools 的配置错误，我们需要进入到 vue-devtools 的详情页中，将“允许访问文件网址勾选起来”。vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。第三种情况是项目使用了 externals 打包优化。...
Vue.js devtools插件显示不出来
weixin_63681863的博客
08-01 3484
下载的Vue.js devtools插件显示不出来。
vue-devtools-6.6.4-chrome
02-12
在本例中，文件名"vue-devtools-6.6.4-chrome"指明了这是一个特定版本（6.6.4）的Vue开发工具插件，专门用于Google Chrome浏览器。由于"描述"中提到它适用于Vue3，这意味着该版本的Vue-devtools支持Vue.js的第三个...
vue-devtools
03-27
对于经验丰富的开发者，Vue Devtools则是一个不可或缺的工具，能够帮助他们更高效地调试和优化Vue项目。因此，无论你是Vue新手还是资深开发者，都应该熟练掌握Vue Devtools的使用方法，以便在开发过程中更好地驾驭...
前端vue浏览器插件vue-devtools，前端vue开发
04-10
在前端开发过程中，Vue DevTools 是一个不可或缺的工具，它是Chrome浏览器的一个扩展，专门用于调试Vue.js应用。 Vue Devtools 提供了丰富的功能，帮助开发者深入理解Vue应用的运行机制。以下是Vue Devtools的一些...
vue-devtools安装包
06-04
在解压缩后的文件6.0.0.11_0中，可能包含的是Vue DevTools的最新稳定版本，该版本可能修复了一些已知问题，提高了兼容性和性能。 总的来说，Vue DevTools是一款对Vue开发者非常有价值的工具，它简化了调试过程，...
vue devtools右上角任务栏显示可用，但是控制台不显示
m0_74228681的博客
11-06 2379
vue devtools右上角任务栏显示可用，但是控制台不显示，All Block广告拦截器的锅，删掉就行
完美解决Vue Devtools调试工具无法显示在F12的问题
qq_74629570的博客
09-23 2278
解决调试vue.js项目文件时VueDevtools插件无法显示的问题
vue devtools面板没有显示_vue 基础入门（四）
weixin_39776298的博客
12-12 462
vue 基础入门(四)1.全局配置Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：1.1 silent类型：boolean默认值：false用法：Vue.config.silent=true❝取消 Vue 所有的日志与警告。❞1.2 devtools类型：boolean默认值：true (生产版为 false)用法：//务必...
Vue.js devtools运行但调试窗口未出现的解决方案
terence的博客
06-05 6505
Vue.js devtools是一款基于Chrome浏览器的调试Vue.js应用的扩展程序。然而，有时即使该插件已经在运行，调试窗口也可能未出现。
vue调试工具Devtools不出现的解决方式
热门推荐
przlovecsdn的博客
08-31 7万+
在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools） vue图标： 开发者工具： 扩展程序： 没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址 https:...
前端学习记录----vue.js devtools插件使用(不显示问题)
m0_56294200的博客
03-13 7834
vue.js devtools插件的下载与使用，解决出现的问题
vue DevTool 不展示
fth1002853070的博客
11-14 916
我们 在chrome中安装了Vue devTool 以后，但是在控制台中不显示vue工具。 然后点击浏览器右上角的 Vue devTool 图标以后，会显示下面这句话 Vue.js Devtools inspection is not available because it’s in production mode or explicitly disabled 解决方案：简单一句话，不要...
解决electron-devtools-installer问题的vue-devtools
"electron-devtools-installer"是npm（Node.js的包管理器）上的一个库，它的主要功能是帮助开发者方便地在Electron应用程序中安装vue-devtools。遗憾的是，根据描述，这个库可能存在问题，导致开发者在使用时遇到...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值