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

dys

发布于 2018-04-03 17:33:33

8.2K1

在前端开发过程中，经常会使用 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>

效果