在前端开发过程中,经常会使用console.log/info 等方法来输出日志信息,电脑浏览器中可以方便的在控制台中查看

现在移动端的web开发越来越多,而在移动设备中进行开发调试时,console.log 这类的日志信息就不太容易查看了

vConsole 就是用来解决这个问题,可以让我们在移动设备中非常方便的查看console日志信息

vConsole 是由微信的前端研发团队提供,小巧好用

DEMO

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


示例页面

右下角的悬浮按钮用来打开控制台

微信前端团队提供的日志工具 vConsole_java_02
控制台中显示日志

使用

(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>


效果

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


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