vue.js-devtools 在控制栏有选项，但是点击选项没有组件

最新推荐文章于 2025-05-01 15:52:19 发布

原创最新推荐文章于 2025-05-01 15:52:19 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue devtools

收录于

js 同时被 3 个专栏收录

122 篇文章

订阅专栏

vue

83 篇文章

订阅专栏

浏览器

24 篇文章

订阅专栏

本文探讨了在Vue开发中遇到的组件不可见问题，并提供了解决方案。通过在main.js中调整Vue.config.devtools的设置，可以在开发环境中启用Devtools工具，而在生产环境中禁用，确保组件正常显示。

看不到组件，可以从下面的截图来看，是禁用了

所以在main.js 里面设置如下一段话

// 若是没有开启Devtools工具，在开发环境中开启，在生产环境中关闭
// if (process.env.NODE_ENV == 'development') {
//   Vue.config.devtools = true;
// } else {
//   Vue.config.devtools = false;
// }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蚁族的奋斗1

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue.js devtool插件已经运行，但是调试窗口没有出现的原因

weixin_45785873的博客

11-23

2748

Vue.js devtool插件已经运行，但是调试窗口没有出现的原因我们可以看到插件运行了，但是在调试器中没有显示首先我们进入插件安装目录，找到manifest.json文件，修改参数："persistent": false成"persistent": true 然后刷新页面，可以看到运行成功，当然，有注意点： 1、首先是要修改"persistent": true，在vue项目...

当使用qiankun时vue-devtools无法观测到子应用的解决方案

q140948940的博客

04-08

2418

原内容在[反馈]使用qiankun时，vue-devtools无法调试子项目我采用了作者推荐的第二种方案进行解决 instance = new Vue({ router, store, i18n, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app') if (process.env.NODE_ENV === 'development') { // vue-d.

参与评论您还未登录，请先登录后发表或查看评论

解决Vue.js devtools插件成功装上，却在控制台中找不到的问题

CCCCt1的博客

07-29

8984

在Vue.js devtools这个插件安装成功后是可以在浏览器的右上角可以见到这个图标，如下图所示：当然，现在我们要解决的是为什么安装好了，在控制台却找不到这个插件：首先第一种方法是：修改文件：vue-devtools-master/shells/chrome/manifest.json如下图所示：如果这个方法不行，就换下一种方法：第二种方法：按F5+F...

IDEA安装Vue插件后新建文件不显示Vue Component问题及解决方法

qq_40302165的博客

01-05

381

参考链接： https://blog.csdn.net/weixin_42428778/article/details/118695783

uni-app 组件找不到问题常规解决办法

m0_49714202的博客

04-09

3475

uni-app 组件找不到问题常规解决办法 1.确认文件是否保存 2.确认引用路径是否正确，特别是利用复制粘贴的引用路径最容易导致组件应用错误，这时候需要手动敲一遍路径 3.组件是否注册，引用的组件需要在 components:{ } 中注册，请注意书写规范为驼峰式 4.确认以上均没问题，请尝试重编译或者关闭编程环境，重启试试 5.如果以上均不能解决请针对具体问题寻找解决办法 ...

Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

热门推荐

goog_man的博客

01-13

6万+

这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载下载地址：vue.js插件下载；点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发

在google应用商店下载的Vue.js Devtools在控制台(开发者模式)没有vue选项

weixin_42664784的博客

02-21

8757

在google应用商店下载的Vue.js Devtools在控制台没有vue选项第一种:图标不亮第二种:图标亮,但是在下面的控制台选项中没有vue 第一种:图标不亮首先,如果最上面那个vue图标如果没有亮,说明当前页面不是vue写的,找一个vue写的网页打开就亮了,比如哔哩哔哩第二种:图标亮,但是在下面的控制台选项中没有vue 点击vue图标,有这么一段话 Vue.js is detecte...

【亲测免费】 Vue开发工具vuejs-devtools安装教程及常见问题解决

gitblog_06590的博客

09-20

994

Vue开发工具vuejs-devtools安装教程及常见问题解决【下载地址】Vue开发工具vuejs-devtools安装教程及常见问题解决 Vue开发工具vuejs-devtools安装教程及常见问题解决本文详细介绍了如何安装Vue开发工具vuejs-devtools，并提供了常见问题的解决方法 ...

vue.js.devtools插件不能进行调试, 提示: Devtools inspection is not available...

CS@zeny的博客

11-17

2万+

vue.js.devtools不能进行调试的问题, 插件信息提示: Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author. 学习前端中遇到的小麻烦!

在google应用商店下载的Vue.js Devtools在控制台没有vue选项

qq_45191974的博客

12-14

1505

第一种:图标不亮首先,如果最上面那个vue图标如果没有亮,说明当前页面不是vue写的,控制台必然没有vue选项,找一个vue写的网页打开就亮了,比如哔哩哔哩.如果亮了之后控制台还是没有vue选项,就需要看我们的第二种了. 如果访问文件就需要打开：第二种: 图标亮,但是在下面的控制台选项中没有vue 点击vue图标,有这么一段话 1.Vue.js is detected on this page. Devtools inspection is not 2.available because it's.

关于chrome浏览器中使用Vue Devtools控制台没有vue选项的问题

weixin_40285832的博客

04-07

1万+

学习Vue过程中,得知有一个好用的插件即Vue devtools 下载就不说了,谷歌应用商店就可以找到,或者离线安装都可以下载完成之后,正常情况打开,如图配置一下就可以使用了可是我配置好了以后,控制台就是没有vue选项,不论如何就是调不出来, 参阅了https://blog.csdn.net/weixin_42664784/article/details/87858814 这篇博客以后发现...

关于Chrome浏览器vue devtools F12后控制台不显示VUE选项的问题

thirteen_king13的博客

10-16

2万+

在安装完Vue.js devtools后，打开自己写的vue网页，发现右上角vue图标是灰色，而且通过F12打开控制台也没有Vue这个选项。通过上网查询：提到最多的是打开Vue扩展程序，打开无痕模式（隐私模式）下启用，和允许访问文件网址，这两项。对于自己的还是没有用，鼠标左键点击Vue图标（扩展程序已将Vue固定到了页面）会出现提示类文字。情况一： Vue.js not detected ，Vue图标是灰色，这种情况通常可以通过上面那个方法解决。情况二： Vue图标是高亮的，但是控制台没有Vu

图文详解vue.js devtools插件使用方法

xsq123的专栏

06-19

4万+

本文重点介绍Vue.js devtools使用方法，提供chrome插件直接安装和源代码安装两种方法，你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。

Vue.js开发者工具：Vue Devtools实战指南

最新发布

weixin_35592186的博客

05-01

1575

Vue.js，一个轻量级、渐进式JavaScript框架，由前谷歌工程师尤雨溪于2014年推出，旨在简化Web界面的开发。起源于早期的AngularJS项目，Vue.js迅速发展，成为前端开发者最受欢迎的框架之一。它的轻量级特性和易学易用的API使得它在短时间内吸引了大量开发者。Vue Devtools 是一个扩展程序，能够为 Vue.js 应用程序提供强大的调试能力。其基本功能包括但不限于：组件树的可视化检查、状态监控、事件监听以及时间旅行调试等。

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

🏆 前端领域优质创作者

01-18

7050

前言安装了VueDevtools后，发现如下图所示提示：但在控制台中找不到任何相关界面，而正确（有Vue选项卡）的应该是如下图所示：解决方案有2种可能性，请依次按照步骤进行。一、打开谷歌浏览器，在地址栏输入chrome://extensions/，执行如下操作：进入扩展程序中心，找到工具卡片，点击进入详情，如下图所示：打开各种权限，尤其是允许访问文件网址，如下图所示：最后重启浏览器，重新打开页面。如上述操作依然不行，请继续往下看。二、打开项目中main.

Vue Devtools下载使用

已经天黑了的博客

06-22

1万+

Vue Devtools下载使用 Vue Devtools介绍在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。下载安装通过官方下载渠道（可跳过）访问Vue2.x官网https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools 访问Vue3.x官网https://v3.cn.vuejs.org/guide/installation.html#vue-devto

vue-devtools安装后，chrome控制台并没有出现vue扩展工具

palmer_kai的博客

02-15

6638

问题在使用 vue-cli3.0 开发的时候，突然发现vue-devtools 扩展工具不能使用，虽然开发中可以不使用该工具，但是使用该工具确实可以提高开发效率 Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly ...

解决electron10.1.3+vue3无法显示vue-devtools问题

总之就是非常可爱

10-18

7432

项目使用@vue/cli 4脚手架创建 package如下，我使用的electron-devtools-installer 科学上网自动安装 "vue": "^3.0.0" "electron": "10.1.3", "electron-devtools-installer": "^3.1.1", "vue-cli-plugin-electron-builder": "~2.0.0-rc.4" background.js中的安装代码： app.on("ready", async () =>

Chrome浏览器安装Vue插件vue-devtools

A_aspectJ的博客

03-30

8412

vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。