javascript调试

/**/ /********************debug.js***************************************/

//  兼容FireFox的事件处理模式
function  getEvent() ... {
if(document.all)return window.event;
func=getEvent.caller;
while(func!=null)...{
var arg0=func.arguments[0];
if(arg0)...{
if(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation) return arg0;
}
func=func.caller;
}
return null;
}

/**/ /*
为了兼容那些不使用prototype.js的程序,写的两个函数
如果事先引入过prototype.js, 下面两个Array.prototype 就不需要了
*/

if  ( ! Array.prototype.map) ... {
Array.prototype.map=function(f)...{
for(var i=0,ret=[];i<this.length;i++) ret.push(f(this[i],i))
return ret
}
}
if  ( ! Array.prototype.inject) ... {
Array.prototype.inject=function(ret,f)...{
for(var i=0;i<this.length;i++) ret=f(ret,this[i],i)
return ret
}
}


/**/ /*
格式化数字或者字符为每三位分逗号的格式 123456--->123,345    1234---> 1,234
参数可以是数字或者字符串,返回字符串
*/
function  formatNum(s) ... {
return (""+s).split("").reverse().map(function(x,i)...{return (i%3 || !i)?x:x+","}).reverse().join("")
}
JsDebug = ... {
maxAjaxLogNum:5,      //最多能显示多少条Ajax调试信息
maxJsLogNum:50,       //最多能显示多少条Javascript调试信息
ajaxLog:[],        
jsLog:[],
timeLog:...{},
ajax:function(msg)...{
var self=JsDebug;
self.ajaxLog.unshift(msg)
if (self.ajaxLog.length>self.maxAjaxLogNum) self.ajaxLog.length=self.maxAjaxLogNum
},
debug:function(msg)...{JsDebug.logger(msg,"debug")},
info:function(msg)...{JsDebug.logger(msg,"info")},
msg:function(msg) ...{JsDebug.logger(msg,"info")},
warn:function(msg)...{JsDebug.logger(msg,"warn")},
error:function(msg)...{JsDebug.logger(msg,"error")},
timeStart:function(funcName)...{
var self=JsDebug;
if (typeof(self.timeLog[funcName])) delete self.timeLog[funcName]
self.timeLog[funcName]=new Object()
self.timeLog[funcName].startTimeObj=new Date()
return self.timeLog[funcName].startTimeObj
},
timeEnd:function(funcName)...{
var self=JsDebug;
if (typeof(self.timeLog[funcName])=='undefined' 
|| typeof(self.timeLog[funcName].startTimeObj)=='undefined')  return false
self.timeLog[funcName].endTimeObj=new Date()
self.timeLog[funcName].timeRun=self.timeLog[funcName].endTimeObj-self.timeLog[funcName].startTimeObj
return self.timeLog[funcName].endTimeObj
},
logger:function(msg,type)...{
var self=JsDebug;
self.jsLog.unshift(["<div class="+type+">【"+type+"】<xmp>"+msg+"</xmp><hr></div>",type])
if (self.jsLog.length>self.maxJsLogNum) self.jsLog.length=self.maxJsLogNum
},
output:function(type)...{
var self=JsDebug
var s="<tr><td class=f>$1</td><td class=s>$2</td><td class=e>$3</td><td class=t>$4</td></tr>"
    var arr=[]
if (!type) type=""
switch(type)...{
case "time":
case "":
var obj=self.timeLog
arr.push("<font><a href=javascript:void(0) οnclick=t(this)>显示隐藏性能信息</a><table border width=60%>")
arr.push(s.replace("$1","模块名").replace("$2","开始时间").replace("$3","结束时间").replace("$4","时间(ms)"))
for(var key in obj)...{
var o=obj[key]
var d1=o.startTimeObj
var d2=o.endTimeObj
var t1=""+d1.toLocaleTimeString()+"."+d1.getMilliseconds()
var t2=""+d2.toLocaleTimeString()+"."+d2.getMilliseconds()
arr.push(s.replace("$1",key).replace("$2",t1).replace("$3",t2).replace("$4",formatNum(o.timeRun)))
}
arr.push("</table></font>")
if (type) break;
case "js":
case "":
arr.push("<font><a href=javascript:void(0) οnclick=t(this)>显示隐藏调试信息</a><font>")
var jsDebugMsg=self.jsLog.inject([],function(ret,x)...{ret.push(x[0]);return ret}).join("")
if (jsDebugMsg)...{
    arr.push('<select οnchange="f(this.value)"><option>请选择...</option><option value="debug">调试信息(debug)')
    arr.push('</option><option value="warn">警告信息(warn)</option><option value="error">错误信息(error)')
    arr.push('</option><option value="info">一般信息(info)</option></select><p>')
}
       arr.push(jsDebugMsg) 
    arr.push("</font></font>")
       if (type) break;
case "ajax":
case "":
    arr.push("<font><a href=javascript:void(0) οnclick=t(this)>显示隐藏AJAX信息</a><font>")
arr.push(self.ajaxLog.join(""))
arr.push("</font></font>")
if (type) break;
 default:
break;
}
return arr.join("")
}
}

// 下面几行做一个快速连接，以后调试也不要打那么多字，辛苦啊

$t1 = JsDebug.timeStart
$t2 = JsDebug.timeEnd
$ajax = JsDebug.ajax
$debug = JsDebug.debug
$info = JsDebug.msg
$msg = JsDebug.msg
$warn = JsDebug.warn
$error = JsDebug.error

// 绑定事件，兼容FF.  唉，又是FF,有Prototype.js的同学可以用 Event.observe(...)
function  attachDebugEvent(element,name,func) ... {
    if (element.addEventListener) element.addEventListener(name, func,"false");
   if (element.attachEvent)      element.attachEvent('on' + name, func)
}


/**/ /*
打开调试窗口,可以按F5查看最新的调试信息。
Bug: FF打开新窗口的时候，再次按F5的时候 能取到 opener,但是却取不到opener.JsDebug,
*/

function  openDebugWin() ... {
var html=[]
html.push('<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>')
html.push('调试窗口</title> <meta name="author" content="Go_Rush(haveatry823@126.com)"> <style>')
html.push('*{font-size:14px}p{cursor:pointer}span.url{color:red}xmp{display:inline}hr{height:1px}')
html.push('td{text-align:center;font-size:14px}a{display:block;color:blue;margin:10px;width:120px}a.url{margin:0px}')
html.push('.debug{color:blue}.error{color:red}.info{color:green}.warn{color:saddlebrown}')
html.push('</style><script>function t(o){var e=o.nextSibling;e.style.display=e.style.display=="none"?"":"none"}')
html.push('function f(v){var ds=document.getElementsByTagName("div");for(var i=0;i<ds.length;i++){')
html.push('if (ds[i].className==v || !v){ds[i].style.display="block"}else{ds[i].style.display="none"}}}')
html.push('</'+'script></head><body><script>try{document.write(opener.JsDebug.output())}catch(x){')
  //html.push('alert(opener);alert(opener.JsDebug);')
html.push('alert("程序窗口已经关闭,无法获取调试信息");window.close()}</'+'script></body></html>')

var s=html.join("")
var w=window.open("about:blank","_debugWin")
w.document.open()
w.document.write(s)
w.document.close()
}

/**/ /*
按一下F12就呼出调试窗口(注意：如果已经呼出过F12，就不会再弹出新窗口，而是更新原窗口内容) 
Bug:按多几下F12有时候会出错，不知道为什么，
其实我想可以用window.open("debug.html","_debugWin")的方式来修复这个Bug,不过这样又新
增加了一个debug.html文件，先这样吧，看看还有什么好的解决方法

*/
attachDebugEvent(document, " keyup " , function () ... {if (getEvent().keyCode==123) openDebugWin()} )

/**/ /********************debug.js***************************************/


使用方法举例:  

< script src = " debug.js " ></ script >
< script >
var  url = location.href
$debug(url)
</ script >
< body onload = " $msg('window onload产生的信息') " >

程序中按下面的方式加入代码,然后按F12键就可以看调试窗口的输出信息

javascript调试
    在程序中需要输出调试信息的地方,加入代码  


$debug( " 一些调试信息 " )
$error( " 一些错误信息 " )     // 我最喜欢这样用 try(){...}catch(x){$error(x.message)}
$msg( " 信息 " )      // $info和$msg其实是同一个函数
$warn( " 一些警告信息 " )

javascript性能查看

$t1( " func1 " )   // 开始统计
  func1() 
$t2( " func1 " )   // 结束统计

$t1( " my func " )  // 开始统计
  .......    // 这里是一些比较耗时间的代码
$t2( " my func " )   // 结束统计