平常习惯于用console调试js,而且手机端alert老是不让弹,调试H5页面时,手机端怎么查看console的信息呢?
设置手机代理,然后在Pc端利用工具Fiddle拦截请求。或者最简单的办法,用alert(JSON.stringify(obj))。在自己PC上搭一个websocket服务,手机上调试时加上websocket调试逻辑,建立websocket连接,将手机端需要console的数据传输到服务端。
说一个不是通用的方式,也就是说这种方法虽然可用,但是不能对手机端所有的浏览器都起作用:
1) 在android手机上面下一个 chrome 浏览器
2) 打开电脑上的chrome 浏览器,输入: chrome://inspect
3) 用数据线连接手机,打开开发者模式,然后允许数据线调试
4) 然后就可以在 inspect 页面看到要调试的页面了.
不过你需要有 vpn。。。。
这种方法你可以当做参考
封装一个插件或者函数 ,用法就是在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 );
还是喜欢用spy-debugger
https://github.com/wuchangmin...
可以直接在pc打开一个控制台、调试手机页面
手机会显示被选中的元素、也可以查看console、还有network、node全局安装、一键启动
27 回答12.8k 阅读
8 回答3.4k 阅读✓ 已解决
6 回答1.1k 阅读✓ 已解决
5 回答5.2k 阅读✓ 已解决
4 回答1.5k 阅读✓ 已解决
3 回答1.7k 阅读
4 回答2.3k 阅读✓ 已解决
用vConsole吧。