JavaScript 日志工具
2007-06-13 11:16
344 查看
前些天,学了一下AJAX,感觉对于JavaScript的控制有些麻烦,尤其是经常使用Alert()语句来输出一些记录,真是很不方便。于是到网上搜索了一些JavaScript的Logging工具,感觉都有些小缺点,不适合自己。于是,自己干脆也写了一个Logging工具,使用起来觉得还不错。这里就介绍给大家看看。
这个工具仅仅是一个js脚本文件。使用起来很方便,只要把这个脚本文件和Html文件放在同一目录下,然后使用在<Head>和</Head>中间加入如下一条语句即可:
<script src="mxjLogger.js" type="text/javascript"></script>
这是一个简单的JavaScript的Logger工具,与Java的Log4j有些相似。 分成5个级别,由低到高分别是:debug info warn error fatal 。默认是显示并且处于debug级别记录激活状态。 快捷键是 Alt + D ,可以调出或隐藏这个工具。滚动时,它不会随滚动条而滚动。
一旦引入这个js脚本,那么一共有5个方法可以在JavaScript中调用,分别是debug() info() warn() error() fatal().
在<script></script>中调用,如下:
也可以直接在方法中调用,如下:
完整的测试文件testLogger.html和脚本文件mxjLogger.js如下:
testLogger.html
mxjLogger.js
效果如下:
存在的问题:
在IE中使用时,要注意母体Html文件引用的DOCTYPE声明如果是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
则在IE下它会随滚动条滚动而消失。
这个工具仅仅是一个js脚本文件。使用起来很方便,只要把这个脚本文件和Html文件放在同一目录下,然后使用在<Head>和</Head>中间加入如下一条语句即可:
<script src="mxjLogger.js" type="text/javascript"></script>
这是一个简单的JavaScript的Logger工具,与Java的Log4j有些相似。 分成5个级别,由低到高分别是:debug info warn error fatal 。默认是显示并且处于debug级别记录激活状态。 快捷键是 Alt + D ,可以调出或隐藏这个工具。滚动时,它不会随滚动条而滚动。
一旦引入这个js脚本,那么一共有5个方法可以在JavaScript中调用,分别是debug() info() warn() error() fatal().
在<script></script>中调用,如下:
部分语句 |
<script src="mxjLogger.js" type="text/javascript"></script> <script type="text/javascript"> debug("欢迎使用 Javamxj 开发的 JavaScript Logger"); debug("我的blog:http://blog.csdn.net/javamxj/") info("当前时间是:" + new Date()); </script> |
也可以直接在方法中调用,如下:
部分语句 |
<button style="color:green" onclick="debug('发送 Debug 信息')" > 发送 Debug 信息 </button> |
完整的测试文件testLogger.html和脚本文件mxjLogger.js如下:
testLogger.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>测试Javascript Logger</title> <script src="mxjLogger.js" type="text/javascript"></script> <script type="text/javascript"> debug("欢迎使用 Javamxj 开发的 JavaScript Logger"); debug("我的blog:http://blog.csdn.net/javamxj/") info("当前时间是:" + new Date()); </script> <style type="text/css"> <!-- button {height:25px;width:150px} --> </style> </head> <body> <h1>欢迎使用 Javamxj 开发的 JavaScript Logger</h1> <p>分为5个级别,点击每个按钮都会显示相应的信息</p> <button style="color:green" onclick="debug('发送 Debug 信息')" > 发送 Debug 信息 </button><p> <button style="color:blue" onclick="info('发送 Info 信息')"> 发送 Info 信息 </button><p> <button style="color:red" onclick="warn('发送 Warning 信息')"> 发送 Warning 信息 </button><p> <button style="color:black" onclick="error('发送 Error 信息')"> 发送 Error 信息 </button><p> <button style="color:#800000" onclick="fatal('发送 Fatal 信息')"> 发送 Fatal 信息 </button><p> </body> <script> document.write(new Array(100).join("<br>")) </script> </html>
mxjLogger.js
/* 这是一个简单的JavaScript的Logger工具,与Java的Log4j有些相似。 分成5个级别,由低到高分别是:debug info warn error fatal 默认是显示并且处于debug级别记录激活状态 快捷键是 Alt + D ,调出这个工具 作者:javamxj 日期:2006年8月8日 版本:1.0 我的blog:http://blog.csdn.net/javamxj/ 我的email:javamxj@gmail.com */ var _logger = true; // 是否激活输出 var log_area; // 记录区域 var n=0; // ------------------------------ // 级别设置及其所对应输出的颜色 // ------------------------------ var levelArray = ["DEBUG","INFO","WARN","ERROR","FATAL"]; var colorArray = ["green","blue","red","black","#800000"]; var arr = new Array(); for (var i=0; i<levelArray.length; i++){ arr[i] = "<OPTION>" + levelArray[i] + "</OPTION>"; } // ------------------------------ // 用document.write写出相关的HTML语句 // ------------------------------ document.write('<div ID = "javamxj_log" style="position:fixed !important;position:absolute; top:310px;width:90%; z-index:2000;display:block;border-style:groove;border-width:thin;">' + '<div style="background-color:#EFE8E0">' + '<input type = "button" name = "clear" value = "清除" onclick = "$(/'status_area/').innerHTML=/'/'" />    '+ '<input type = "button" id="javamxj_run" name = "javamxj_run" value = "停止|隐藏 记录" onclick = "toggleLog()"/>        '+ '级别: <select id="levelSelect" onchange="changeLevel()" >' + arr.join() + "</select></div>" + '<div id = "status_area" name = "status_area" style="height:250px;overflow:auto;opacity:0.8; filter:alpha(opacity=80);"></div>' + '</div>' ); // ------------------------------ // 滚动时固定在原位置 // ------------------------------ document.body.onscroll=function(){ javamxj_log.style.posTop=document.body.scrollTop+document.body.clientHeight-280 } // ------------------------------ // 增加快捷健 "Alt+D" // ------------------------------ document.onkeydown = function(){ var accessElement = document.createElement('span') accessElement.innerHTML = '<button style="position:absolute;top:-100px" onclick="javascript:toggleDiv()" accesskey="d"></button>' document.body.appendChild(accessElement); } // ------------------------------ // 借鉴 protype,将 document.getElementById() 包装成 $() ,方便使用 // ------------------------------ function $(){ var elements=new Array(); for(var i=0;i<arguments.length;i++){ var element=arguments[i]; if(typeof element=='string') element=document.getElementById(element); if(arguments.length==1) return element; elements.push(element); } return elements; } // ------------------------------ // 获得当前时间 // ------------------------------ function getCurrentTime(){ var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds() var timeValue=""+((hours>12)?hours-12:hours); if(timeValue=="0")timeValue=12; timeValue+=((minutes<10)?":0":":")+minutes; timeValue+=((seconds<10)?":0":":")+seconds; timeValue+=(hours>=12)?" (下午)":" (上午)"; return timeValue; } // ------------------------------ // 包装5个不同级别的输出方式 // ------------------------------ function debug(message) { logger(message, 0); } function info(message) { logger(message, 1); } function warn(message) { logger(message, 2); } function error(message) { logger(message, 3); } function fatal(message) { logger(message, 4); } // ------------------------------ // 输出记录 // ------------------------------ function logger( message,num_level) { var color; var level; if (_logger) { color = colorArray[num_level]; level = levelArray[num_level]; display = (num_level >= $("levelSelect").selectedIndex ) ? "block" : "none" ; if(display == "block"){ n=n+1; } bg_Color = ((n % 2) ==0)? "#FFF" : "#F6F6F6"; $("status_area").innerHTML = '<div id=' + num_level + ' style="background-color:' + bg_Color + ';display:' + display + '"><strong style="COLOR: ' + color + '">' + level + ': ' + '</strong>' + getCurrentTime() + ": " + message + '</div>' + $("status_area").innerHTML; } } // ------------------------------ // 改变记录级别 // ------------------------------ function changeLevel(){ selectedLevel = $('levelSelect').selectedIndex; var m=0; var divs = $("status_area").getElementsByTagName("div"); for(i=0;i<divs.length;i++){ divs[i].style.display =(divs[i].id >= selectedLevel)? "block" : "none"; if(divs[i].style.display == "block"){ m=m+1; divs[i].style.backgroundColor =((m % 2) ==0) ? "#FFF" : "#F6F6F6"; } } } // ------------------------------ // 改变记录状态 // ------------------------------ function toggleLog() { var disp=$('status_area').style.display; if ( disp == 'none' ) { $('status_area').style.display = 'block'; $('javamxj_run').value = '停止 | 隐藏 记录'; _logger = true; } else { $('status_area').style.display = 'none'; $('javamxj_run').value= '显示记录'; _logger = false; } } function toggleDiv() { var e = $("javamxj_log"); if (e) { e.style.display = ((e.style.display != 'block') ? 'block' : 'none'); } }
效果如下:
存在的问题:
在IE中使用时,要注意母体Html文件引用的DOCTYPE声明如果是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
则在IE下它会随滚动条滚动而消失。
相关文章推荐
- JavaScript 日志工具
- Javascript 日志工具blackbird
- javascript 日志管理工具log4jse的使用
- javascript日志工具-Lumberjack 介绍
- javascript日志工具-log4js 介绍
- JavaScript面向对象实例——创建日志调试对象来代替alert函数进行调试
- 5个javascript调试工具
- 不可多得的Javascript(AJAX)开发工具 - Aptana
- 使用ADRCI (ADR Command Interpreter) 工具查看Oracle alert警告日志
- Google开源Leak Finder——用于检测内存泄漏的JavaScript工具
- [Web开发] 在线 Javascript 代码格式美化工具
- JavaScript学习日志(一):变量,作用域和内存问题
- 错误日志记录工具elmah。
- 一个高效的JavaScript压缩工具下载集合
- 十款最新的JavaScript开发工具
- 定时提醒写日志的工具和源码
- 一个简单的日志跟踪工具
- javascript工具
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
- javascript工具库代码