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

最新推荐文章于 2024-03-19 09:39:04 发布
最新推荐文章于 2024-03-19 09:39:04 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： js vue 浏览器 文章标签： vue  devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39319000/article/details/89375399
版权
js 同时被 3 个专栏收录
122 篇文章 1 订阅
订阅专栏
vue
83 篇文章 1 订阅
订阅专栏
浏览器
24 篇文章 0 订阅
订阅专栏

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

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

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

 

蚁族的奋斗1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js-devtools_5.1.1解压后 在浏览器扩展程序直接加载已解压 即可使用
04-20
vue.js-devtools_5.1.1解压后 在浏览器扩展程序直接加载已解压 即可使用
Vue.js-devtools-5.3.3.rar
08-02
编译好的Vue.js-devtools，直接拖入谷歌浏览器的扩展即可。简单实用或者可参考小编的blog，如何使用即可！
Vue Devtools不显示Components
yaocsu的专栏
02-03 1873
Vue Devtools不显示Components 遇到的问题：红框处的组件未显示，清理浏览器缓存也未显示。 解决方法：往搜索框中输入关键字母即可搜索出，然后就都显示了
探秘Vue.js DevTools：前端开发的强大神器
最新发布
gitblog_00007的博客
03-19 348
探秘Vue.js DevTools：前端开发的强大神器 项目地址:https://gitcode.com/vuejs/devtools Vue.js DevTools 是一个浏览器扩展程序，专为 Vue.js 应用提供强大的调试功能。它是由 Vue.js 社区开发并维护的，可以在 Chrome 和 Firefox 等主流浏览器上使用。通过 GitCode 链接，你可以轻松获取和安装此项目。 技术解...
Vue.js-devtools6.1.4.crx
04-18
vue必备调试工具，亲测可用；直接打开chrome的扩展工具，拖入后点击添加即可；需要有vue的项目才有效果 vue-devtools-v6.1.4
Vue.js-devtools_v5.1.1.zip 直接解压安装
06-07
vue的工具安装使用。下载解压，在开发者模式下选择加载已解压的扩展程序，选择解压后的文件夹，按F12，找到vue即可。一般到这就都ok了。测试多次有效，有的人有问题按百度就在安装目录下找manifest.json,改persistent参数改为true
uni-app 组件找不到问题常规解决办法
m0_49714202的博客
04-09 1901
uni-app 组件找不到问题常规解决办法 1.确认文件是否保存 2.确认引用路径是否正确，特别是利用复制粘贴的引用路径最容易导致组件应用错误，这时候需要手动敲一遍路径 3.组件是否注册，引用的组件需要在 components:{ } 中注册，请注意书写规范为驼峰式 4.确认以上均没问题，请尝试重编译或者关闭编程环境，重启试试 5.如果以上均不能解决请针对具体问题寻找解决办法 ...
IDEA安装Vue插件后新建文件不显示Vue Component问题及解决方法
qq_40302165的博客
01-05 220
参考链接： https://blog.csdn.net/weixin_42428778/article/details/118695783
Vue devtools安装，解决调试界面没有VUE的方法
weixin_46463398的博客
09-17 1239
5.然后找到文件扩产文件所在的位置，找到“mainfest.json”文件，用文本文件打开编辑，将"persistent": false更改为"persistent": true。1.下载Vue devtools，网址：https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd。2.下载完成之后进行解压，会有一个“.crx”文件，点击扩展程序，添加扩展，添加扩展程序。3.直接张“.crx”文件拖拽进来，记得打开“开发者模式”
Vue创建component组件引用后不显示问题
weixin_51540252的博客
08-17 2789
Vue创建component组件引用后不显示问题
vue调试工具Devtools不出现的解决方式 https://blog.csdn.net/przlovecsdn/article/details/82256558
qq_42859450的博客
04-22 2424
链接https://blog.csdn.net/przlovecsdn/article/details/82256558 在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools） vue图标： 开发者工具： 扩展程序： 没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址 https://g
Vue.js-Devtools_5.3.3_qwblog.com_-1.zip
05-11
vue-devtools插件下载
【Vue】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 4612
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
vue进阶 Iframe基础
hjdjhh的博客
11-18 5498
Iframe 在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。iframe.contentDocument, 获取iframe的document对象。iframe 接受 vue 的值 建议写在 mounted 和 created 中。iframe.contentWindow, 获取iframe的window对象。iframe 路径 建议写在 mounted 中，可以设置路径和参数。vue 监听 iframe 传过来的值。template 引入。
Vue-devtools远程链接(iframe内vue项目)调试＜独立运行程序＞
骚饼
10-28 258
vue/devtools的远程链接调试方法，
Vue.js devtools无法使用，显示Vue.js is detected的解决办法
树袋熊的博客
03-26 6033
Vue的chrome测试工具的错误解决办法
Chrome中无差错安装Vue调试工具vue-devtools（错误合集及解决方法）
meiko667的博客
07-23 1714
Chrome中无差错安装Vue调试工具vue-devtools 1.搜索极简插件Vue Devtools，下载并解压 Vue Devtools下载地址 2.将Vue.js解压到D盘中，把文件后缀由.crx修改为.zip，并将其进行解压 3.打开文件夹，找到mainifest.js 4.修改mainifest.json文件中的persistent的属性为true； 关于persistent参数 persistent为true时，在background字段中指出的js脚本将持续运行在后台，而若persist
vue中iframe的使用
热门推荐
upStar1的博客
03-31 3万+
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。 <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe> 获取iframe里面的内容 iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取if
Vue.js devtools工具不显示问题
ihchenchen的博客
11-25 5100
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author. 网络上般说的问题原因：1、可能是在main.js里设置了Vue.config.devtools=false；2、可能是用了vue.min.js， 但是如果两个的你都确定没有问题。你需要打开index.html和Vue.config.
vue-devtools-5.1.1.zip chorme
07-02
### 回答1： vue-devtools-5.1.1.zip 是一个用于 Vue.js 的开发工具包，它提供了在 Chrome 浏览器中进行 Vue.js 应用程序调试的能力。 在 Chrome 浏览器中，我们可以通过安装 vue-devtools-5.1.1.zip 这个插件来使用这个开发工具。安装插件后，我们可以在开发者工具中找到 Vue Devtools 选项，并点击进行打开。 打开 Vue Devtools 后，我们可以看到左侧面板列表列出了 Vue.js 应用程序的组件层次结构。通过展开组件，我们可以查看每个组件的状态、属性和事件。可以通过在这些组件上进行查看、编辑和监视来进行调试。 此外，Vue Devtools 还提供了性能分析的功能。我们可以通过选择 Performance 标签并执行一些操作来检查 Vue 应用程序的性能瓶颈。这个工具可以帮助我们优化代码并提高应用程序的性能。 总之，vue-devtools-5.1.1.zip 是一个方便的开发工具包，能够帮助我们在 Chrome 浏览器中进行 Vue.js 应用程序的调试和性能分析。通过使用它，我们可以更方便地开发和调试 Vue.js 应用程序，并优化其性能。 ### 回答2： vue-devtools-5.1.1.zip 是 Vue.js 的开发者工具的版本为 5.1.1 的压缩文件。Chorme 是指 Google Chrome 这个浏览器。 Vue.js 是一个流行的 JavaScript 前端框架，使用它可以更高效地构建用户界面。而 vue-devtools 则是 Vue.js 的浏览器插件，帮助开发者在 Chrome 浏览器上更方便地调试和分析 Vue.js 应用程序。 vue-devtools-5.1.1.zip 是 vue-devtools 的一个特定版本的压缩文件，包含了安装 vue-devtools 所需的所有文件。这个压缩文件可以通过下载的方式获取。 Chorme 是一款流行的网络浏览器，被广泛应用于各种操作系统和设备上。为了使用 vue-devtools，你需要将下载的 vue-devtools-5.1.1.zip 文件解压缩，并在 Chrome 浏览器中安装 vue-devtools 插件。安装成功后，你可以在开发者工具中找到 Vue 选项卡，以便于调试 Vue.js 应用程序。 总结起来，vue-devtools-5.1.1.zip 是 Vue.js 的开发者工具的特定版本的压缩文件，Chorme 是指用于安装该压缩文件并调试 Vue.js 应用程序的 Google Chrome 浏览器。 ### 回答3： vue-devtools-5.1.1.zip是Vue.js开发工具的压缩文件，用于在Chrome浏览器中进行Vue.js应用程序的开发和调试。此工具是由Vue.js团队开发的，旨在简化开发人员在开发过程中对Vue.js应用程序进行调试和分析的工作。 使用vue-devtools，开发人员可以方便地检查Vue组件的状态、观察和修改数据、查看组件层次结构等。它提供了一个直观的用户界面，让开发人员可以更好地了解和分析他们的Vue.js应用程序。 要将vue-devtools添加到Chrome浏览器中，首先需要将zip文件下载到本地计算机。然后，在Chrome浏览器的地址栏中输入"chrome://extensions/"，打开扩展程序页面。在该页面的右上角开启开发者模式，然后点击"加载已解压的扩展程序"按钮。 选择下载的vue-devtools zip文件，然后点击确认。这样，vue-devtools就会被添加到Chrome浏览器的扩展程序列表中。之后，在开发Vue.js应用程序时，可以通过单击Chrome浏览器的扩展程序图标，打开vue-devtools面板，并进行相关调试和分析操作。 总之，vue-devtools是一个非常有用的工具，可以大大简化Vue.js应用程序的开发和调试过程，提高开发效率。通过将其添加到Chrome浏览器中，开发人员可以更方便地使用此工具进行Vue.js应用程序的调试和分析。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值