美文网首页大前端
移动H5调试神器vConsole

移动H5调试神器vConsole

作者: 天問_专注于大前端技术 | 来源:发表于2021-11-05 22:28 被阅读0次

    在做移动H5时,经常需要真机调试,但是手机端没有像Chrome控制台那样的开发者工具,对于networkconsole日志没办法查看,所以便有了今天的开发神器——vConsole

    H5+vConsole

    vConsole介绍

    vConsole是一个第三方插件工具,封装了浏览器的一系列调试信息,如:log日志SystemNetworkElementStorageCookie这是都是开发中时常要查看使用的信息。

    安装使用

    • npm 安装
    npm i -D vconsole
    
    • npm 使用
    import VConsole from 'vconsole';
    
    const vConsole = new VConsole();
    // or init with options
    const vConsole = new VConsole({ maxLogNumber: 1000 });
    
    // call `console` methods as usual
    console.log('Hello world');
    
    // remove it when you finish debugging
    vConsole.destroy();
    
    • CDN使用
    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script>
        // VConsole will be exported to `window.VConsole` by default.
        var vConsole = new window.VConsole();
    </script> 
    

    手机端展现

    vConsole

    自从有了vConsole,移动H5开发调试SoEasy。


    欢迎访问:天问博客

    相关文章

      网友评论

        本文标题:移动H5调试神器vConsole

        本文链接:https://www.haomeiwen.com/subject/kildzltx.html