Skip to content
一个浮在页面上的日志查看工具
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 50bd3d9 Mar 29, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
log fix Dec 22, 2016
README.md Update README.md Mar 29, 2017

README.md

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>
You can’t perform that action at this time.