微信前端团队提供的日志工具 vConsole

时间:2022-05-07
本文章向大家介绍微信前端团队提供的日志工具 vConsole,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在前端开发过程中,经常会使用 console.log/info 等方法来输出日志信息,电脑浏览器中可以方便的在控制台中查看 现在移动端的web开发越来越多,而在移动设备中进行开发调试时,console.log 这类的日志信息就不太容易查看了 vConsole 就是用来解决这个问题,可以让我们在移动设备中非常方便的查看console日志信息 vConsole 是由微信的前端研发团队提供,小巧好用 DEMO http://wechatfe.github.io/vconsole/demo.html(建议复制到微信打开)

示例页面 右下角的悬浮按钮用来打开控制台

控制台中显示日志 使用 (1)下载 vconsole 项目地址 https://github.com/WechatFE/vConsole (1)页面中引用 vconsole.min.js (2)JS代码中正常使用 console.log/info/debug/warn/error 即可 示例代码

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vconsole.min.js"></script>
    <script>
    window.onload = function (){
        console.log('hello world');
    }

    function testInfo(){
        alert('info');
        console.info('test info');
    }
    </script>
</head>

<body>
<h1>vConsole test</h1>

<button onclick="testInfo()">INFO</button>
</body>

效果