无线端接口调试--重写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, '<').replace(/>/g, '>'); } 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:
结果如下图:
使用该方法就可以愉快的在无线端看到接口返回的数据了!
阅读全文
1 0
- 无线端接口调试--重写console.log
- 调试利器--console.log
- 使用Console.log调试
- 【学习笔记】无线端接口测试
- 调试js中console.log
- js调试之console.log()
- console.log 调试强大应用
- 重写console.log 实现自己的逻辑
- android /Cordova LOG 、console 调试调试打印log
- console.log火狐下的调试
- js调试小技巧之console.log()
- JavaScript调试技巧之console.log()详解
- JavaScript调试技巧之console.log()详解
- JavaScript调试技巧之console.log()详解
- JavaScript调试技巧之console.log()详解
- js调试console.log使用总结图解
- JavaScript调试技巧之console.log()详解
- 几个常用的console.log调试命令
- Shell 命令教程(二) 进程,磁盘等操作
- 添加和删除外键约束
- 七参数计算工具教程
- 截取字符串的三种方法
- Team them up! UVA
- 无线端接口调试--重写console.log
- es进行聚合操作时提示Fielddata is disabled on text fields by default
- Java-泛型知识点整理
- 阿里云机器学习平台的思考
- 欢迎使用CSDN-markdown编辑器
- getJSON已经执行方法,但是报404
- JS获取URL中参数值(QueryString)的4种方法
- Java 随机生成中文姓名,手机号,邮编,住址
- 前端代码标准最佳实践:CSS