vconsole插件不显示问题

最新推荐文章于 2024-04-15 11:25:06 发布
最新推荐文章于 2024-04-15 11:25:06 发布
阅读量847 收藏
点赞数 1
分类专栏： vue 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qd1014751893/article/details/133951169
版权

vconsole 2.5.2版本能正常显示，升级了 最新版 3.x版本，vconsole就出不来了
原因是3.0版本开始引入之后要初始化

import VConsole from 'vconsole' // TODO: 上线要注释掉
new VConsole({ theme: 'light' })

重启就好了

参考资料：
vconsole官网

https://gitee.com/Tencent/vConsole

夜鸦DX
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vconsole错误
01-12
记一次前端JSON序列化问题排查，cdn文件夹下为此次JSON错误时cdn返回的错误版本js文件，github文件夹下为github上正确的js文件
移动端控制台插件vConsole.min.js
09-08
移动端控制台插件vConsole.min.js是专门为移动设备开发者设计的一款工具，用于在手机或平板等移动设备上查看和调试Web应用的JavaScript控制台。它弥补了移动浏览器原生控制台功能的不足，使得在没有电脑连接或者无法...
控制vConsole在开发模式显示在生产模式隐藏
阿妖的博客
10-27 1719
在main.js 中引入, import VConsole from 'vconsole'; // 判断是否为生产环境 否则显示vConsole移动端调试工具 if(process.env.NODE_ENV !== "production"){ new VConsole(); } 以上操作就可以成功了 在网上看了好多好长, 我看不懂, 所以直接根据process.env.NODE_ENV 进行判断 效果也可以实现 如果想直接去掉的话 可以在App.vue里面引入样式
【Vue项目】安装引入使用vconsole（生产环境不显示）
Allen_Sushi首页
09-17 6608
vue2中安装引入使用vconsole（生产环境不显示）
npm install vconsole 不显示报文 request payload object 问题
HarryWord
09-16 877
之前一直使用vconsole 最近更新完版本到3.9后发现 提交数据 报文没了 显示object ，后来就找了各种办法，解决了问题 先说一下原因是因为最新版本的问题，一般情况都是 npm install 并没有发现安装的版本号 1. 安装 npm install vconsole@3.8.0 2. 使用 main.js import Vconsole from 'vconsole' const vConsole = new Vconsole() Vue.use(vConsole) 后
uniapp解决vconsole无法正常使用
最新发布
近10年前端开发工作经验，为你分享日常经验所得
04-15 1028
uniapp开发的h5需要使用vconsole真机调试，如果直接在main.js引入，打包后整个项目会页面空白，经实验。而且引入后vconsole在其他页面并不会消失，因此并不是只能调试单个页面，
关于解决配置fiddler后钉钉播放界面右下角没有出现绿色的vconsole
热门推荐
Keep Doing this的博客
01-28 1万+
这里是解决我的关于钉钉直播回放下载问题的 文章链接:钉钉直播回放下载解决方案_Keep Doing this的博客-CSDN博客_钉钉回放下载 有很多小伙伴遇到了一个问题就是没有打开钉钉直播没有看到绿色的Vconsole 我尝试了把我的绿色标志弄掉,解决了问题(这里可能有的小伙伴跟我的问题不一样) 解决方法就是配置钉钉的代理ip 首先保证你的前面的步骤与我相同,详情看上篇博文, 第一步:配置fiddler 选择option general与我勾选一样 http与我勾选一样 ..
typescript版 vconsole 代码
03-24
vConsole 是由 WeChat Web Development Team 开发的一款适用于移动端 Web 页面的控制台工具，它支持显示 Console、Network、Storage、Element 等调试面板，使得开发者在没有电脑或者无法使用电脑连接设备的情况下，...
vconsole.js
12-19
总结来说，vconsole.js是前端开发者在处理移动端项目时不可或缺的工具之一。它弥补了移动设备上调试工具的不足，使得开发者能够在真实的设备环境中高效地进行调试工作，提升了开发和调试的体验。无论是新手还是经验...
移动端（微信等使用vConsole调试console的方法
10-17
vConsole 是腾讯WeApp团队开发的一个轻量级的移动端Web控制台插件，它允许开发者在手机上查看和使用类似于Chrome开发者工具中的`console`，以便于在实际设备上调试JavaScript、CSS以及网络请求等问题。vConsole简单...
vue项目移动端中使用vconsole，并配置在不同的环境是否显示
01-08
1.npm 安装 npm install vconsole 2.初始化 & 配置 在入口文件main.js中加入以下代码 import Vconsole from 'vconsole'; const vConsole = new Vconsole(); 3.打印日志  与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志： console.log('Hello World');   4.注意 VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中; 未加载 vCo
微信小程序内置的vConsole
01-27
总之，vConsole-wx是微信小程序开发中不可或缺的调试利器，它使得在真机环境中进行小程序调试变得更加方便，提高了开发者的效率和应用的质量。通过深入理解和有效利用vConsole，开发者可以更好地应对微信小程序开发...
微信小程序在手机如何显示vconsole面板？
fghfghhgjgj的博客
10-13 9365
vconsole面板对开发小程序帮助很大， 普通版（线上使用版）小程序无法打开vconsole面板。 只有在微信开发者工具预览，用开发者的手机微信扫码，进入开发版的小程序才可以打开vconsole面板。 扫码进入开发板小程序后，点击右上角“关闭”按钮，左边的三个点， 在右下角，就可以看到 “开发调试”的选项了。 ...
vue 热更新失效问题以及 移动端插件vConsole失效问题（个人开发中遇到的问题）
weixin_44294658的博客
07-16 2776
问题描述 混合app开发过程中，移动端插件vConsole突然失效，且vue热更新也失效，console.log无法打印出东西，页面内容更改无法及时同步到浏览器页面上，需要手动刷新才行； 原因分析 1.发现并不是所有页面都会出现vue热更新失效、vConsole插件失效。 2.有些页面刷新后热更新正常且vConsole插件也正常了，但有些页面无论如何刷新就是无法启用热更新，且vConsole插件依...
安卓手机在生产环境的微信H5显示vconsole
rrrrroy_Ha的博客
05-29 2310
在微信公众号H5开发过程中，vconsole可以通过引用相应的npm包展示在开发环境/测试环境中，但生产环境由于面对用户，不能开启vconsole，导致遇到真实环境的问题不好定位还耽误时间。 有一种方式可以解决这个问题。 首先在微信中，点击“http://debugx5.qq.com”， 复制其中的链接“http://debugtbs.qq.com”，可以复制到文件传输助手等可以点击跳转的地址。 复制其中的链接“debugmm.qq.com/?forcex5=true”， 然后返...
ios中页面某一块不显示，点击vconsole后显示，ios下z-index兼容问题
dhw276的博客
03-01 912
在开发过程中遇到某一块div不显示，但是点击vconsole后之前不显示的div又显示异常，而且这种情况只出现在ios的页面中，排查了好久，最后发现是ios对z-index的兼容问题，应该是命中了下面的某一种情况，导致ios中z-index没有生效，重新设置div的排列顺序可解决： 一.zindex和transform translateZ冲突问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ
微信小程序已发布版本vconsole仍出现问题解决办法
weixin_30721899的博客
03-31 2399
解决办法很简单，进入小程序的体验或者开发版，点击关闭调试，再次进入小程序，就不会出现了 转载于:https://www.cnblogs.com/ggrm/p/10629912.html
H5唤起真机调试（VConsole）
cdx1170776994的博客
01-25 1058
VConsole，H5真机调试
H5移动端动态控制vconsole控制台显示或隐藏
心若有所向往，何惧道阻且长。
02-27 936
H5移动端动态控制vconsole控制台显示或隐藏
vConsole不显示sessionStorage
08-23
vConsole是一个在移动端开发中用于调试和查看日志的工具库。它提供了多种功能，包括查看Cookies、LocalStorage和SessionStorage的值。但是，默认情况下，vConsole并不会直接显示SessionStorage的内容。要在vConsole中显示SessionStorage的值，您需要使用vConsole的自定义插件功能来实现。 通过自定义插件，您可以扩展vConsole的功能，使其支持显示SessionStorage的内容。自定义插件是指您可以编写自己的代码，在vConsole中加载并执行。您可以在自定义插件中通过JavaScript命令访问和显示SessionStorage中的数据。 首先，您需要手动执行JavaScript命令来访问和获取SessionStorage的值。您可以使用`sessionStorage.getItem(key)`方法来获取指定键（key）对应的值。然后，您可以将获取到的值通过vConsole的`vConsole.log(value)`方法打印出来。这样，您就可以在vConsole中看到SessionStorage的值了。 另外，如果您需要在vConsole中显示SessionStorage的值，您还可以下载vConsole的源代码，然后在源代码中进行修改，使其支持显示SessionStorage的内容。具体的修改方法可以参考vConsole的官方文档或者开发者社区中的相关讨论。 综上所述，要使vConsole显示SessionStorage的值，您可以通过自定义插件来实现，或者下载源代码进行修改。希望这些信息能对您有所帮助！<span class="em">1</span> #### 引用[.reference_title] - *1* [vConsole:用于移动网页的轻量级，可扩展的前端开发人员工具](https://download.csdn.net/download/weixin_42141437/18551159)[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: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值