H5前端日志系统,超实用。生产环境排查原因神器。
发布在H5开发2018年1月17日view:1235HTML5
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

平时开发,我们会用chrome的控制台.console.log,还有断点等功能,非常实用。 但是一旦页面发布到生产出现问题后,前端就傻眼了,无法跟踪日志,无法定位问题。

以下就是实际开发过程中为了针对生产无法调试而做的日志系统。

/**
 * <ul>
 * <li>Created by aijf on 2018/1/5.</li>
 * <li>
 * 功能描述: 页面显示日志,日志可以关闭隐藏;可以使用min直接拷贝到index页面
 * </li>
 * <li>修改说明:
 * 1、2018/1/5 新建
 * </li>
 * </ul>
 */
var logIsShow = true;// 生产环境改为false
var logClickNum = 0;// 隐藏情况下,触发点要添加logH5.toggleLogAll()   logClickNum 每点击5次可查看日志,再次点击隐藏
function LoggerH5Zts(logName,showKey){
    logName = logName ? logName : "log";
    function outObj(obj) {
        var temp = "";
        for(var i in obj){
            temp += (i + ":" + obj[i] + "|");
        }
        return temp;
    };
    function outArray(array) {
        var temp = "";
        for(var i=0;i < array.length; i++){
            if(array[i] instanceof Object){
                temp += outObj(array[i]) + ";";
            }else{
                temp += array[i] + ";";
            }
        }
        return temp;
    }

    var logSpanShow = document.createElement("span");
    logSpanShow.id = "logSpanShow";
    logSpanShow.setAttribute("onclick",logName + ".toggleLog()");
    logSpanShow.style = "position:fixed;width:50px;height:20px;text-align:center;"+
            "top:100px;right:0px;background-color:#e32c00;z-index:9999;display:none;";
    logSpanShow.innerHTML = "log";
    document.body.appendChild(logSpanShow);

    var logSpanClear = document.createElement("logSpanClear");
    logSpanClear.id = "logSpanClear";
    logSpanClear.setAttribute("onclick",logName + ".clearLog()");
    logSpanClear.style = "position:fixed;width:50px;height:20px;text-align:center;"+
            "top:125px;right:0px;background-color:#e32c00;z-index:9999;display:none;";
    logSpanClear.innerHTML = "clear";
    document.body.appendChild(logSpanClear);

    var logDiv = document.createElement("div");
    logDiv.id = "logDiv";
    logDiv.style = "overflow-y:scroll;background-color:grey;width:100%;height:60%;position:fixed;z-index:9990;top:45px;left:0px;-webkit-overflow-scrolling:touch;";
    logDiv.innerHTML = "<div id='log' style='padding:5px;width:100%;'>log show:<br/></div>";
    document.body.appendChild(logDiv);

    if(logIsShow){
        logSpanShow.style.display = "";
        logSpanClear.style.display = "";
    }
    logDiv.style.display = "none";


    this.info = function (text) {
        if(text instanceof Array){
            text = outArray(text);
        }else if(text instanceof Object){
            text = outObj(text);
        }
        var timeText = "[";
        var myDate = new Date();
        timeText += myDate.getHours();       //获取当前小时数(0-23)
        timeText += ":" + myDate.getMinutes();     //获取当前分钟数(0-59)
        timeText += ":" + myDate.getSeconds();     //获取当前秒数(0-59)
        timeText += " " + myDate.getMilliseconds();    //获取当前毫秒数(0-999)
        timeText += "] ";
        var showKeyTemp = this.model ? "[" + this.model +"]" : "";
        document.getElementById("log").innerHTML += timeText + showKeyTemp + text + "<br/>";
    };
    this.toggleLog = function () {
        var logDiv = document.getElementById("logDiv");
        if(logDiv.style.display == "none"){
            logDiv.style.display = "";
        }else{
            logDiv.style.display = "none";
        }
    };
    this.clearLog = function () {
        document.getElementById("log").innerHTML = "";
    };
    // 设置触发方式
    this.toggleLogAll = function () {
        logClickNum++;
        if(logClickNum % 5 == 0){// 显示日志
            logSpanShow.style.display = "";
            logSpanClear.style.display = "";
        }else{
            logSpanShow.style.display = "none";
            logSpanClear.style.display = "none";
        }
    }
}
window.logH5 = new LoggerH5Zts("logH5");
// logH5.info("log will show.")

页面引用该段代码,注意 1. window.logH5 = new LoggerH5Zts("logH5"); 中window.*必须和参数一致 2. 上生产时var logIsShow = false;// 生产环境改为false,此时日志隐藏,如何显示日志: 页面设置触发点(某个图片或文字,用户不会点击),添加onclick="logH5.toggleLogAll()"
当我们点击logClickNum % 5 == 0 时日志显示,其它情况隐藏,即点击5次出现,再点击就隐藏了。

评论
发表评论
暂无评论
WRITTEN BY
爱在心中
java出身,做过管理后台,做过android开发,做过产品狗,目前专注移动前端开发,主要技术angularjs,requirejs,gulp,vue,webpack
TA的新浪微博
PUBLISHED IN
H5开发

strong text

我的收藏