MLogger
一个浮在页面上的日志查看工具
功能简介
一个浮在页面上的console面板,资源保证按需加载最大化保证性能。
1.查看移动web页面上的console信息,自己可以在代码里面任意使用console,然后在手机端呼起该log便可以查看自己所打印的信息。
2.查看移动web页面的ajax请求信息,包括返回数据,请求参数等等,类似与fiddler的抓包。
功能清单
项目分为3个资源文件
1.inline的js 这个js需要在页面的所有js之前引入(因为会拦截console方法和ajax方法).
2.非inline的js 这个js可以放在cdn上面,在初始化的时候配置进去即可。
2.非inline的css 这个css可以放在cdn上面,在初始化的时候配置进去即可。
呼出方法
功能配置
init的option
{
logExtJs : js文件存放的地址如果是本地就填绝对路径cdn就填写cdn的url
logExtCss : css文件存放的地址如果是本地就填绝对路径cdn就填写cdn的url
triggerLog : 换出log面板的方法,默认是按照图上方法呼出,用户也可以自定义方法,按照
triggerLog = function(callback) {
....
callback();
}
即可
beforeInit:log创建前调用的方法
myEvent: 自定义事件监听
widgetList: 使用系统组件哪些配置,默认是['dom', 'location', 'env', 'cgi', 'resource', 'codeEx', 'localStorage']
myWidget: 自定义组件,按照
myWidget = [{
'getHtml': function() {}
}];
返回组件的html字符串即可
myButton: 自定义按钮,按照
myButton = [{
'getHtml': function() {}
}];
返回按钮的html字符串即可
}
功能截图
快速上手
<script src="log_inline.js"></script>
<script type="text/javascript">
var opt = {
'logExtJs': 'log_ext.js',
'logExtCss': 'log.css'
};
window.MLogger.init(opt);
console.log(1);
console.log({a:1,b: {x:'ccc'}});
</script>