解决Chrome浏览器vue devtools F12后控制台不显示的问题

最新推荐文章于 2024-09-21 21:15:42 发布
最新推荐文章于 2024-09-21 21:15:42 发布
阅读量4.2w 收藏 16
点赞数 21
分类专栏： Vue 系统测试 文章标签： vue devtools vue调试 chrome扩展 安装vue devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21891743/article/details/89002178
版权

最近开发vue项目中，为了更好的调试程序，安装了vue.js devtools调试工具，
安装成功了之浏览器右上角出现了图标，同时在vue的页面下也能点亮，就是控制台没有vue的页签，最后是在扩展程序中开启允许访问文件网址和在隐身模式下启用两项后就可以了。

在这里插入图片描述
成功后显示：
在这里插入图片描述

对于如何下载这个插件，可以参考思否https://segmentfault.com/a/1190000009682735

黑夜开发者
关注
专栏目录
在Chrome浏览器中配置vue-devtools调试工具
mystonelxj的博客
12-25 1万+
1，首先在浏览器上打开 地址 https://github.com/vuejs/vue-devtools.git ，在页面上点击 “Clone or Download” 按钮 ，下载相关的 “vue-devtools-dev” 压缩包  2，Windows系统下，解压缩文件“vue-devtools-dev.zip” ,本例解压缩路径为“D:\vue-devtools-dev\vue-dev...
关于Chrome浏览器vue devtools F12后控制台不显示VUE选项的问题
wenbaikaichang的博客
07-12 1979
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插件但在浏览器控制台不显示的解决方案
fxshy的博客
08-21 548
出现vue工具。
安装了vue插件devtools,控制台不显示的解决方法
最新发布
m0_73657187的博客
09-21 703
3.把允许访问文件地址打开即可，有时候反应稍慢，多刷新几遍即可。1.打开浏览器页面的管理扩展程序。2.点击vue插件的“详情”项。
Chrome Devtools之控制台
笑笑学生
03-16 742
控制台的使用
chrome浏览器console控制台无输出 / 突然空白没输出
weixin_44296621的博客
06-10 1965
大坑！！！！！！！！！！！！！！！！！！ 看这儿看这儿看这儿 不知道什么时候会误输个东西.服了~
vue调试工具Devtools不出现的解决方式
热门推荐
przlovecsdn的博客
08-31 7万+
在使用vuex时，想直观的查看数据state的变动，用Devtools可实现，但是在Google浏览器中开发调试的时候，右上角出现vue的图标，但是在开发者工具中没有出现vue调试（已在扩展程序中安装 Vue Devtools） vue图标： 开发者工具： 扩展程序： 没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址 https:...
Vue开发者工具可能遇到的问题
zimugua的博客
05-20 454
vue开发者工具找不到components
vueDevTools
07-04
4. 在开发模式下启动Vue应用，打开浏览器的开发者工具（F12或右键单击页面选择检查），VueDevTools就会出现在“应用”或“元素”面板旁边。 VueDevTools对于Vue和UniApp开发者来说是必不可少的工具，它极大地提高了...
前端vue浏览器插件vue-devtools，前端vue开发
04-10
在前端开发过程中，Vue DevTools 是一个不可或缺的工具，它是Chrome浏览器的一个扩展，专门用于调试Vue.js应用。 Vue Devtools 提供了丰富的功能，帮助开发者深入理解Vue应用的运行机制。以下是Vue Devtools的一些...
Vue Devtools谷歌浏览器插件下载
07-06
7. 加载成功后，Vue Devtools会出现在浏览器的开发者工具栏中，你可以通过按F12或者右键点击页面空白处选择“检查”来打开开发者工具。 Vue Devtools的主要功能包括： 1. **组件树视图**：展示当前Vue实例的组件...
vuedevtools安装.zip
10-31
通过阅读链接提供的博客文章（），你将获得更具体的安装指南和常见问题解决方案，例如解决Vue DevTools与Electron或某些浏览器扩展冲突的问题。 总的来说，Vue DevTools 是Vue.js开发者不可或缺的工具，它极大地...
工具应用——Chrome浏览器 F12控制台中文改成英文
m0_67393593的博客
03-06 1776
今天打开浏览器，调试控制台的时候，控制台给了一具体是，我直接点了Reload DevTools 没想到点完，直接就变成中文了 这给我整懵了，平常看英文控制台习惯了，突然改为中文不习惯，所以我还是想用英文，一时没找到入口，上网查了一下，原来这么简单。 步骤： （1）点击控制台右上角的这个图标 （2）“语言”选项从浏览器界面语言设置成英文 （3）然后重新加载DevTools，控制台就又变成英文了 ...
vue开发者工具无法使用问题汇总
songhy111的博客
06-10 2411
vue开发者工具常见问题解决方案
Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
weixin_34061555的博客
01-29 654
在开发vue相关的项目时，使用vue devtools工具是一件极其有趣的事，你所有的操作都马上给你实时反馈。   然而有时候安装好的工具，在chrome中不显示。  在网上找过多次，一直没有找到有效解决方案，测试过很多复杂的方式，都没成功。 这次终于找到一个简单的解决方法，一定要记录下来：   ① F12关闭开发者模式 ② 刷新 ③ 然后再按F12就好了...
解决谷歌导入Vue开发工具没反应的问题
chensen99的博客
10-17 3188
解决谷歌导入Vue开发工具没反应的问题
【vue】chrome已安装Vue Devtools在控制台却无显示
ansem0444的博客
07-10 4824
chrome已安装Vue Devtools在控制台却无显示的解决： 在点亮Vue Devtools图标后，控制台没有vue解读显示。 原因：脚手架配置NODE_ENV直接定义为了production版本 解决： 更改webpack的发布的开发环境配置为 NODE_ENV: '"development"' 之后，重新编译，页面刷新再F12打开控制台即可。 转载于:ht...
vue devtools无法在控制台显示
07-27
回答: 当vue devtools无法在控制台显示时，可能有两种情况。第一种情况是vue-devtools的配置错误，需要进入到vue-devtools的详情页中，将“允许访问文件网址”选项勾选起来。\[1\]第二种情况是Vue.js devtools插件出错，可以通过进入chrome浏览器的扩展程序，找到Vue.js devtools并点击详细信息，在无痕模式下启用并允许访问文件网址。\[2\]这些问题可能是由于使用了生产环境的版本或压缩的Vue版本，或者没有勾选“允许访问文件网址”选项所导致的。\[3\] #### 引用[.reference_title] - *1* [vue-devtools无法显示的解决办法](https://blog.csdn.net/weixin_43866830/article/details/120021903)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [安装了VueDevtools插件但在控制台不显示Vue的解决方案](https://blog.csdn.net/IT13333/article/details/118514509)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

黑夜开发者

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值