首页 > 其他分享 >vConsole

vConsole

时间:2024-12-28 16:42:25浏览次数:3  
标签:console 打印 vConsole 内容 日志 circular

vConsole

在真机上,如果想要查看 console API 输出的日志内容和额外的调试信息,需要在点击屏幕右上角的按钮打开的菜单里选择「打开调试」。此时小程序/小游戏会退出,重新打开后右下角会出现一个 vConsole 按钮。点击 vConsole 按钮可以打开日志面板。

小程序和小游戏的 vConsole 展示内容会有一定差别,下图左边是小程序 vConsole,右边是小游戏 vConsole

img img

vConsole 使用说明

由于实现机制的限制,开发者调用 console API 打印的日志内容,是转换成 JSON 字符串后传输给 vConsole 的,导致 vConsole 中展示的内容会有一些限制:

  • 除了 NumberStringBooleannull 外,其他类型都会被作为 Object 处理展示,打印对象及原型链中的 Enumerable 属性。
  • InfinityNaN 会显示为 null
  • undefinedArrayBufferFunction 类型无法显示
  • 无法打印存在循环引用的对象
let a = {}
a.b = a
console.log(a) // 2.3.2 以下版本,会打印 `An object width circular reference can't be logged`

针对上述问题,小程序/小游戏在使用 vConsole 时做了一些处理

  • 2.3.2 及以上版本,支持打印循环引用对象。循环引用的对象属性会显示引用路径,@表示对象本身。
const circular = { x: {}, c: {} }
circular.x = [{ promise: Promise.resolve() }]
circular.a = circular
circular.c.x0 = circular.x[0]

console.log(circular)
// "{a: '<Circular: @>', c: {x0: '<Circular: @.x[0]>'}, x: [{promise: '<Promise>'}]}"
  • 2.3.1 及以上版本,支持展示所有类型的数据。基础库会对日志内容进行一次转换,经过转换的内容会使用<>包裹。如:
    • <Function: func>
    • <Undefined>
    • <Infinity>
    • <Map: size=0>
    • <ArrayBuffer: byteLength=10>
    • ...
  • 2.2.3 ~ 2.3.0 版本中,可以展示 ArrayBufferFunction 类型,undefined 会被打印为字符串 'undefined'

注:尽量避免在非调试情景下打印结构过于复杂或内容过长的日志内容(如游戏引擎中的精灵或材质对象等),可能会带来额外耗时。为了防止异常发生,日志内容超过一定长度会被替换为<LOG_EXCEED_MAX_LENGTH>,此时需要开发者裁剪日志内容。

标签:console,打印,vConsole,内容,日志,circular
From: https://www.cnblogs.com/AtlasLapetos/p/18624382

相关文章

  • vue3中vconsole使用方法
    1.安装npmivconsole-D 2.在Vue项目的入口文件(通常是main.js或main.ts)中导入VConsole请注意,在生产环境下,你应该避免将VConsole包含在你的项目中。你可以使用条件语句来仅在开发环境下引入VConsole//处理是开启H5调试importVConsolefrom"vconsole";//在dev环境使......
  • 【Vue】Vue中 Vconsole 的使用 移动端调试神器vConsole
    【Vue】Vue中Vconsole的使用:https://blog.csdn.net/m0_53715482/article/details/125590180?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170539699116800182121287%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=1705396991168......
  • Vue3+TS+Vite中 vConsole 插件的使用
    vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole是框架无关的,可以在Vue、React或其他任何框架中使用。现在vConsole是微信小程序的官方调试工具。https://gitee.com/Tencent/vConsole/ 平时在web应用开发过程中,我们可以console.log去输出一些......
  • uniapp引入H5调试vConsole
    在真机环境下调试移动端H5的时候,无法像浏览器一样打开控制台进行console调试,那么我们可以在前端项目中引入vconsole,便于我们在真机环境下调试移动端H5项目vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。详细文档可查看:https://gitee.com/mirrors/vConsole/功......
  • vconsole 前端调试神器,h5页面调试工具
    npminstallvconsole在需要的页面引入,并初始化<script> importVconsolefrom'vconsole'; exportdefault{ created(){ letvConsole=newVconsole(); } }</script>先安装vconsole组件,然后vue页面调用即可,注意一定要放在created方法里面。否则......
  • 在html中使用vConsole
    在vue中可以自行安装vConsole,那么移动端怎么办呢<scriptsrc="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><script>varvConsole=newVConsole();console.log('Helloworld');</script......
  • 前端必须知道的手机调试工具vConsole
    在日常业务中我相信大家多多少少都有移动端的项目,移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦,今天给大家分享一个我认为比较好用的调试第三方库VConsole,有了这个库咱们就在手机上看控制台了,VConsole有两种引用方式,使用方法也很简单方法一:在public目录下index.ht......
  • nextjs项目引入vconsole报错处理:ReferenceError: window is not defined
    引入文件(nextjs项目):importVconsolefrom'vconsole'报错: 处理:letVconsoleif(typeofwindow!=='undefined'){Vconsole=require('vconsole')}打开调试:if(typeofwindow!=='undefined'){//加了一个打开调试......
  • 神器vConsole!快速定位移动端问题,加快开发效率
    大家好,我是程序视点的小二哥!今天小二哥碰到一新来的实习生在使用alert调试H5页面,仿佛看到小二哥年少时羞涩的样子...趁这个机会,就给大家分享一个针对手机网页的前端开发者调试面板工具:vConsole简介vConsole是框架无关的,可以在Vue、React或其他任何框架中使用。现在vC......
  • vConsole
    vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板,是微信小程序的官方调试工具。开源地址:https://github.com/Tencent/vConsolehttps://gitee.com/Tencent/vConsole预览http://wechatfe.github.io/vconsole/demo.html以前微信打开http://debugx5.qq.com可以......