无线端接口调试--重写console.log

来源:互联网 发布:电阻串联和并联的算法 编辑:程序博客网 时间:2024/06/05 01:02

1.无线端返回对象的时候,在手机上很难看到完整的数据alert对象的时候出来的往往是【object】。
2.通过原生js重写console.log()方法使数据可以在任意终端更方便的展示出来,无线端调试神器。
具体方法代码如下:

(function(){var selfScript = document.scripts[document.scripts.length - 1];var href = window.location.href;var logElem;var logElemClassName = selfScript.getAttribute('data-class') || 'm-log';var showlog = true;// selfScript.getAttribute('data-showlog') || false;var match = href.match(/[?|&]showlog=([^&]+)/i);if(match){    showlog = match[1].toLowerCase() === 'true' || Number(match[1]) === 1;}/** * 重写console.log方法,便于在移动端查看log日志。 */var console = window.console || {};var oldLog = console.log;var slice = [].slice;console.log = function(){    var args = slice.call(arguments);    oldLog && oldLog.apply(console, args);    if(!showlog) return;    var msg = '';    for(var i = 0, obj, len = args.length; i < len; i++){        obj = args[i];        if(typeof obj !== 'string' && typeof obj !== 'number'){            try{                obj = JSON.stringify(obj);            }catch(e){ };        }        if(typeof obj === 'string'){            obj = obj.replace(/</g, '&lt;').replace(/>/g, '&gt;');        }        if(i == 0) msg = obj;        else msg += ' ' + obj;    }    var elem = logElem || (logElem = createLogElem());    elem.innerHTML += '> ' + msg + '<br/>';    elem.scrollTop = elem.scrollHeight - elem.clientHeight;};window.addEventListener('error', function(error){    var errorStr = error.error ? error.error.toString() : error.toString();    console.log( errorStr+ ' ' + error.filename + ' ' + error.lineno);});function createLogElem(){    var elem = document.createElement('div');    elem.className = logElemClassName;    var css = '.' + logElemClassName + '{position:fixed;top:0;left:0;width:100%;max-height:305px;-webkit-box-sizing:border-box;box-sizing:border-box;font:12px Courier New;background-color:rgba(0,0,0,0.2);word-wrap:break-word;word-break:break-all;overflow-y:scroll;padding:5px;z-index:100000}';    css += '.' + logElemClassName + ':before{content:"锕€";position:fixed;top:0;right:0;height:20px;overflow:hidden;padding:8px 5px;-webkit-box-sizing:border-box;box-sizing:border-box;font:12px Arial;-webkit-transform-origin:50% 50%;}';    css += '.' + logElemClassName + '.minimize{height:20px;}';    css += '.' + logElemClassName + '.minimize:before{-webkit-transform:rotate(180deg);}';    appendStyle(css);    document.documentElement.appendChild(elem);    //minimize    elem.rect = elem.getBoundingClientRect();    elem.minimize = false;    elem.addEventListener('click', function(e){        var x = e.pageX, y = e.pageY, rect = elem.rect;        if(x >= rect.left + rect.width - 20 &&            x <= rect.left + rect.width &&           y >= rect.top &&            y <= rect.top + 20){            elem.minimize = !elem.minimize;            elem.className = logElemClassName + (elem.minimize ? ' minimize' : '');        }    });    return elem;}function appendStyle(css){    var style = document.createElement('style');    style.type = 'text/css';    document.getElementsByTagName("head")[0].appendChild(style);    style.appendChild(document.createTextNode(css));}})();

调用方法十分简单引入js即可
这里有一个小demo:
这里写图片描述

结果如下图:
这里写图片描述
使用该方法就可以愉快的在无线端看到接口返回的数据了!