前些天,学了一下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>中调用,如下:
部分语句
|
<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如下:
<!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>
/*
这是一个简单的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下它会随滚动条滚动而消失。
分享到:
相关推荐
对数 一个可配置的 JavaScript 日志工具!
操作步骤: 1:打开calc.htm 2: Alt+D打开调试窗口 博文链接:https://fuhao9611.iteye.com/blog/72374
Log4Jse是一个非常简洁、可定制的Javascript日志输出管理工具,类似Log4J,但是比它简单很多,可以实现自定义日志输出级别、自定义日志输出方式等功能。 示例代码: // Usage: var mylog = Logger.get("app"); mylog...
如果利用系统日志的“另存为”功能手工备份,则比较麻烦,而且输出的日志难以实现格式化输出,微软的resource kit工具包中有一个免费的查看本地或远程日志的小工具dumpel.exe,利用它可以把日志存为文本文件以备后需...
log4javascript演示 博文链接:https://lxy19791111.iteye.com/blog/263165
// Usage: var mylog = Logger.get("app"); mylog.log("Hello my app!!"); var viewlog = Logger.get("view"); viewlog.warn("where am I?...viewlog.error("I don't want work!...// Above will pop an window, and ...
fastify框架的logger日志工具
日志分析器基于 Javascript 和 HTML 的日志分析器工具
csdn上传的是一个老版本,有兴趣的朋友请去项目发布地址下载最新...Kingfishers是一个用javascript语言编写的,能够代替alert,在浏览器中连续输出客户端javascript脚本运行日志的工具,主要用于客户端脚本的分析和查错。
Kingfishers是一个用javascript语言编写的,能够代替alert, 在浏览器中连续输出客户端javascript脚本运行日志的工具。 主要用于客户端脚本的分析和查错。
前端日志工具库,简单的api,可以通过配置不同的 level 和 appender 来输出日志
Java原生日志工具Logger参考.docx
非侵入式日志分析/调试/分析工具 演示版 待定 入门 如果您想立即使用调试 使用cli命令安装 $ npm install -g debuguy $ debuguy --help $ debuguy --version # parse javascript sources and replace debuguy ...
开发工具:eclipse、tomcat、navicat、mysql8.0 开发技术:Java、html、css、JavaScript、jsp、springmvc。 功能实现:OB列表、菜单管理、菜单主页面、充值列表、出资列表、登录页面、分配角色、富有日志、角色管理...
其中包括了许多性能相关的主题,如开源工具、缓存、移动网络和应用、自动化、用户体验优化、HTML5、JavaScript、CSS3、指标、ROI和网络协议。本书的视野并不仅仅局限于常规的前端性能优化主题,还涉及了网络环境甚至...
有关详细信息,请参见:javascript捆绑包与es5兼容。 以下文档部分可用:笔记: 版本0.6.0删除了一些先前不推荐使用的方法,请查看更改日志以了解哪些内容与angular-cli 6.0.0+结合使用的构建可能会失败,有关变通...
源映射 介绍 考虑到发布环境不附加sourcemap... sourcemap文件命名为各压缩替代工具的替代规则: javascript文件名.map ,需要直接放置在指定路径下 安装 npm install sourcemapping - g Usage: sourcemapping [ opt