您的位置: 首页  >  文章  >  log4javascript

log4javascript

分类: 文章 • 2025-03-05 19:42:22

1.1.快速入门

所周知 log4j的日志系统很好用 但是那是java的 于是有人推出了js的日志系统 log4javascript 使用起来也相当的简单,下载地址

https://sourceforge.net/projects/log4javascript/files/latest/download

引入js文件

<script type="text/javascript" src="js\log4javascript-1.4.6\js\log4javascript.js"></script>

快速入门案例

<script type="text/javascript">

var log = log4javascript.getDefaultLogger();

//因为log4javaScript不能准确定位,这里以title为标志用于定位页面 便于搜索

var pageName=document.title;

log.trace(pageName,"我在这里加入了trace信息");

log.debug(pageName,"我在这里加入了debug信息");

log.info(pageName,"我在这里加入了info信息");

log.warn(pageName,"我在这里加入了warn信息");

log.error(pageName,"我在这里加入了error信息");

log.fatal(pageName,"我在这里加入了fatal信息");

</script>

页面显示如下

log4javascript

 

关闭日志

var log4javascript_disabled = true;

 

 

1.2.使用步骤

1.获取一个logger

使用log4javascript的静态方法getLogger(String name)来获取一个带名称的日志对象，或是使用getDefaultLogger()来获取一个默认的使用弹出窗口作为日志输出的appender；

 

2.设置一个appender

我们可以对同一个logger设置多个appender，这和log4j是一样的。我们在使用getLogger(String name)获取一个logger后，必须给他设置一个appender才可以，否则所有的调试信息都是看不到的。像我们上面就是直接new了一个弹出窗口的appender的new log4javascript.PopUpAppender();当然为了方便，你也可以直接使用getDefaultLogger()了；

var logger = log4javascript.getLogger('test');

var popUpAppender = new log4javascript.PopUpAppender();

logger.addAppender(popUpAppender);

 

3.设置layout的格式

var appender = new log4javascript.InPageAppender();

appender.layout.pattern = '%d{yyyy-MM-dd HH:mm:ss,SSS} [%c] %-5p - %m{1}%n';

logger.addAppender(appender);

 

4.打印调试信息

然后我们就可以使用获取的logger来调试了。我们可以使用上面提到的所有方法，比如info(String msg)、debug(String msg)、warn(String msg)等等，另外还有一个trace(String msg)，不过这个方法只有在FF下有效果，可以打印轨迹信息，在IE下是无效的！

 

1.3.定义服务类

1.定义log4js服务类，用于初始化log4javascript相关参数

log4jsService.js

//启用javascript 日志功能

var logger = log4javascript.getLogger("main");

log4javascript.setEnabled(true);

 

var appender = new log4javascript.InPageAppender();

appender.layout.pattern = '%d{yyyy-MM-dd HH:mm:ss,SSS} [%c] %-5p - %m{1}%n';

logger.addAppender(appender);

 

//点击Ctrl键时显示/隐藏日志控制台

document.onkeydown = function (evt) {

    var VK_F9 = 120;

    //兼容IE和Firefox获得keyBoardEvent对象

    var evt = (evt) ? evt : ((window.event) ? window.event : "");

    //兼容IE和Firefox获得keyBoardEvent对象的键值

    var key = evt.keyCode ? evt.keyCode : evt.which;

 

    if (evt.ctrlKey) {

        if (appender.visible) {

            appender.hide();

            appender.visible = false;

            log4javascript.setEnabled(false);

        } else {

            log4javascript.setEnabled(true);

            appender.show();

            appender.visible = true;

        }

    }

};

 

2.引入log4javascript.js和log4js

<script src="js/log4javascript-1.4.2/log4javascript.js"></script>

<script src="js/common/log4jsService.js"></script>

 

3.记录日志

<input id="Button1" type="button" value="button" />

$(function () {

$("#Button1").click(function () {

   logger.debug("This is a debugging message from the log4javascript in-page page");

   logger.info("info info");

   logger.error("error info");

 });

});

4.显示日志

log4javascript

相关推荐