H5页面怎么查看console信息？

平常习惯于用console调试js，而且手机端alert老是不让弹，调试H5页面时，手机端怎么查看console的信息呢？

html5 html javascript

阅读 15.8k

12 个回答

某熊猫桑

用vConsole吧。

设置手机代理，然后在Pc端利用工具Fiddle拦截请求。或者最简单的办法，用alert(JSON.stringify(obj))。在自己PC上搭一个websocket服务，手机上调试时加上websocket调试逻辑，建立websocket连接，将手机端需要console的数据传输到服务端。

Andrea

1.4k41019

发布于
2017-06-29

v-console
fiddler有个rosin插件

microkof

4871827

发布于
2017-06-29

用console.js之类的库

javascriptuser

1.6k33455

发布于
2017-06-29

说一个不是通用的方式，也就是说这种方法虽然可用,但是不能对手机端所有的浏览器都起作用:

1) 在android手机上面下一个 chrome 浏览器

2) 打开电脑上的chrome 浏览器,输入: chrome://inspect

3) 用数据线连接手机,打开开发者模式,然后允许数据线调试

4) 然后就可以在 inspect 页面看到要调试的页面了.

不过你需要有 vpn。。。。

这种方法你可以当做参考

橘南枳北

1.5k61429

发布于
2017-06-30

vconsole简单粗暴

niaogege

2561717

发布于
2017-06-30

更新于
2017-06-30

封装一个插件或者函数，用法就是在js中 print.log()，很实用的。因为很多时候手机端调试的时候需要用到用户本身的 acceee_token信息，所以，还是建议在客户端调试

/*
 *    注意： 覆盖层id : printViewPop 调用这个函数，页面中不要出现相同的id名称
 * 打印数据：    print.log( msg );
 * 清空数据：print.clear();
 * */

(function( $ ){
    var styleCss = '' +
        '.printViewPop{position:fixed; width:35%; max-width:50%; min-height:30px; font-size:14px; color:#fff; z-index:9999; background-color:rgba(0, 0, 0, 0.7); padding:5px 10px; transition:width 0.3s; -webkit-transition:width 0.3s; }' +
        '.printViewPop .clear{position:absolute; right:5px; top:5px; display:block; width:36px; height:24px; line-height:24px; text-align:center; color:#17b202; font-size:12px; z-index:999; padding:2px; }' +
        '.printViewPop em{color:red; margin-left:5px;  }' +
        '.printClose{width:30px; color:rgba(0, 0, 0, 0.7); font-size:0; }' + 
        '.printViewPop p{width:calc(100% - 30px); line-height:22px; padding:5px 0; word-wrap:break-word; position:relative; } ' +
        '.printViewPop p:before{position:absolute; left:0; content:""; width:100%; height:1px; }' +
        '.printViewPop p:before{top:0; background-image:-webkit-linear-gradient(left, #4c4c4c 0, #5e5e5e 50%, #4c4c4c 100%); }' +
        '.printViewPop p:first-of-type:before{background-image:none; }' +
        '';
    var utils = (function(){
        var me = {};
        me.addcss = function(){
            $( '<style>' + styleCss + '</style>' ).appendTo( 'head' );
        };
        
        me.cover = function( options, father ){
            utils.addcss();
            father = father || 'body';
            if( $('#printViewPop').length ){
                $('#printViewPop').remove();
            }
            var defaultCss = {
                top : '5px',
                left : '5px',
            }
            if( options && options.bottom ){
                defaultCss.top = 'auto'
            }
            if( options && options.left ){
                defaultCss.right = 'auto'
            }
            var popCss = $.extend({}, defaultCss, options); 
            var printViewPop = $('<div id="printViewPop" class="printViewPop"><span class="clear">清空</span></div>').appendTo( father ).css( popCss );
            utils.bindevent();
            return printViewPop;
        };
        
        me.bindevent = function(){
            $('#printViewPop').on('click', function(){
                $(this).toggleClass('printClose');
            });
            $('#printViewPop').on('click', '.clear', function(){
                $('#printViewPop').find('p').remove();
            });
        };
        return me;
    })();
    
    window.print = (function( utils ){
        var log = function( msg ){
            var printViewPop = $('#printViewPop' );
            if( !printViewPop.length ){
                printViewPop = utils.cover();
            }
            if( typeof msg == 'object' ){
                if( msg[0] && msg[0] instanceof HTMLElement ){
                    msg = msg[0].className + '<em>类名</em>';
                }else{
                    msg = JSON.stringify( msg );
                }    
            }
            $('<p>' + msg + '</p>').appendTo( printViewPop );
        };
        return {
            log : log
        };
    })( utils );
})( window.jQuery || window.Zepto  );