浏览器安装了Vue-devtools插件，但在浏览器控制台不显示的问题解决方案

已于 2022-05-15 17:55:27 修改
阅读量1.1w 收藏 16
点赞数 9
分类专栏： Vue学习笔记 文章标签： vue.js 前端 javascript
于 2022-05-15 17:55:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql19970816/article/details/124785307
版权

Vue-devtools 浏览器调试 生产环境 压缩文件 解决方案
关键词由CSDN通过智能技术生成

1. 具体问题如下：浏览器安装了Vue-devtools插件，浏览器控制台调不出来，页面显示正常，无其他问题

2. 错误原因：没显示调试工具的原因是用了生产环境的版本或是引入了压缩的vue版本，或是没有勾选（我就是引入了压缩的Vue文件，所以出现错误了）

3.具体解决方案：在你的代码 js里面添加如下代码

  1. Vue.config.devtools = true;

4.问题成功解决

欢乐多~
关注
  • 9
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
vue-electron控制台dev-tools插件包
09-28
vue-electrn控制台插件，安装dev-tools插件工具，下载到本地引入就可以正常使用。 vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用
前端vue浏览器插件vue-devtools，前端vue开发
04-10
在前端开发过程中，Vue DevTools 是一个不可或缺的工具，它是Chrome浏览器的一个扩展，专门用于调试Vue.js应用。 Vue Devtools 提供了丰富的功能，帮助开发者深入理解Vue应用的运行机制。以下是Vue Devtools的一些...
vue-devtools插件Edge亮了但是控制台不显示
weixin_52754360的博客
05-06 687
看网上加什么的设置感觉也不太行,而且这个商城直接下的感觉也不是压缩版 .直接在edge插件商城下的,也都勾选了,标志亮了,控制台无.我删了另外放了一个自己下的版本。
关于Chrome浏览器vue devtools F12后控制台不显示VUE选项的问题
最新发布
wenbaikaichang的博客
07-12 668
1.首先找到这个插件安装的位置（我浏览器谷歌为例）：C:\Users\fang\AppData\Local\Google\Chrome\User\Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\5.3.4_0，找到并打开manidest.json文件。在安装完Vue.js devtools后，打开自己写的vue网页，发现右上角vue图标虽然亮了，但是通过F12打开控制台也没有Vue这个选项。最后保存，重新Shift+F12就可以了。
解决浏览器中 vue-devtools 不显示的问题
来杯卡布奇诺的博客
08-09 1万+
一种是 vue-devtools 的配置错误，我们需要进入到 vue-devtools 的详情页中，将“允许访问文件网址勾选起来”。vue 项目中浏览器右上角可以显示出插件，但是控制台却没有显示。第三种情况是项目使用了 externals 打包优化。...
vue: dev-tools控制台不显示问题
weixin_46211267的博客
08-01 2708
1.查看public/index.html中引用的vue是否为压缩版本（vue.min.js）。2.1 设置-扩展程序-管理扩展程序-找到Vue.js devtools。2.4 有权访问的网站：设置成再在所有网站上。2.3 打开-允许访问文件网址。需要把压缩版换成vue.js。
浏览器中下载了vue扩展程序，控制台却不显示vue，且vue标签是灰色
weixin_55966654的博客
10-10 8141
解决浏览器控制台不显示vue，以及右侧的标签呈现灰色的问题
Vue插件安装详细步骤
outstanding木槿
07-06 3256
1、插件安装网址 https://chrome.zzzmh.cn/index 安装完后，运行含Vue的代码发现，控制台显示插件没安装，对次解决方法看另外一篇 2、打开网址 3、 4、 5、 6、 7、 8、
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
vue-devtools@6.1.4谷歌插件
04-27
vue-devtools是Vue开发的调试工具，官方推荐使用，vue-devtools第6代支持vue2和vue3，以及pinal，官方提供源代码，但是需要自己构建，构建的过程基本上没有3个坑都不能成功，这里直接分享一些，需要的小伙伴可以拿去
安装vue-devtools时，npm install总是报错的解决方案
03-14
安装vue-devtools时，npm install总是报错的解决方案 亲测有效！！！
vue-devtools v5.1.0.crx 最新版Chrome浏览器Vue调试插件
06-17
vuejs-devtools_v5.1.0.crx 最新版Chrome浏览器Vue调试插件，直接安装使用无需自己编译。安装方法：打开Chrome浏览器，输入“chrome://extensions/”打开扩展程序，启用开发者模式，然后把下载下来的“vuejs-...
安装了Vue-devtools插件，浏览器的控制台不显示
qq_31594665的博客
10-19 3717
Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools），控制台却没有Vue。没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，Vue Devtools只在开发环境生效。
【Vue】浏览器安装vue插件
m0_67930426的博客
11-24 1188
首先看一下安装之后的效果，再考虑一下要不要安装安装完之后，打开浏览器控制台（ctrl + shift + j)调试起来就会方便很多。
Chrome浏览器中的vue插件vue-devtools的下载安装
2301_76868945的博客
01-21 1644
原文链接：https://blog.csdn.net/weixin_53221528/article/details/134963962。几乎所有的Chrome应用商店中的插件都包括了，且免费下载，下载。在谷歌应用商店下载，但应用商店打不开（求大佬告诉我怎么打开）其中可以便捷的查看vueX的数据以及组件结构等，非常方便。使用Vue开发项目时，常会用到一款谷歌浏览器插件，于是找了一个国内下载Chrome。成功安装该插件并可以正常使用。2.国内gitee下载。3.浏览器应用商店下载。按照按照流程完成安装。
浏览器安装vue调试插件（极简单）
热门推荐
weixin_40496191的博客
02-27 1万+
准备材料：谷歌浏览器、vue-devTool.crx 打开浏览器的右上角的设置–>更多工具–>扩展程序 打开开发者模式 然后重启浏览器，继续打开浏览器的右上角的设置–>更多工具–>扩展程序 将vue-devTool.crx工具拖入浏览器 随便打开一个vue项目，然后f12，可以看到vue已经 存在，并且可以通过vue插件，查看页面中的各种数据参数，说明成功了！！！ ...
安装了vue.js devtools，但是控制台不显示。
qq_41973850的博客
02-11 1334
关于安装了vue devtools，但是在控制台看不到显示的问题。解决方案：打开扩展详情，勾选 允许访问文件url。问题：已经安装过devtools插件，但是控制台不显示。
Chrome谷歌浏览器安装VUE调试插件
weixin_49107940的博客
12-08 2583
【代码】Chrome谷歌浏览器安装VUE调试插件。
vue写了debugger谷歌浏览器打开控制台没进断点
dxjren的博客
01-19 1950
vue中写了debugger，谷歌浏览器无法调试
如何安装浏览器插件vue-devtools
08-24
要安装浏览器插件vue-devtools，首先需要使用Chrome浏览器。您可以按照以下步骤进行安装： 1. 打开Chrome浏览器，在地址栏输入"chrome://extensions"并按下回车键。 2. 在打开的页面中，找到并点击"开发者模式"开关，使其变为开启状态。 3. 下载已编译过的vue-devtools插件文件，可以在中找到适用于Chrome浏览器的版本。 4. 将下载的插件文件拖放到Chrome浏览器的扩展程序页面中。 5. 确保安装成功后，您将在插件列表中看到vue-devtools，并且浏览器右上角会出现一个灰色的vue标志。 6. 当您打开适用于vue开发的页面时，该vue标志会变为绿色。 7. 按下F12键，在开发者工具中可以找到vue选项，其中包含了vue-devtools的功能。 如果您安装后没有看到vue-devtools插件，请尝试重新启动浏览器。希望这些步骤对您有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue调试神器vue-devtools.zip](https://download.csdn.net/download/kevinfan2011/71479554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-devtools4.1.3-直接解压把chrome拖到浏览器.zip](https://download.csdn.net/download/weixin_44309374/12415422)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue整合SSM项目实战](https://download.csdn.net/download/m0_55755339/88241603)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值