前段时间写一个JavaScript的程序，根据用户鼠标的操作进行控件的拖放。感觉用 alter 或 断点跟踪调试的方法太难受了。就仿照MFC的TRACE功能写了如下的小代码(trace.js)。
拥有的功能如下： trace(str) : 在调试窗口输出信息； traceObj(obj): 在调试窗口输出对象所有不为空的属性； tracefmt(...): 按照用户定义的格式进行输出 traceHTML(): 输出当前函数所在页面的HTML页面调试窗口： 支持调试信息拷贝到剪贴板和清空调试信息 使用例子如下：<input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace"> 请将后面的代码分别保存成 trace.js 和 trace.html, sample.html//--------------------------trace.js------------------------------- var tracewin = null; var tracenum=1; function trace(str){ if(tracewin==null || tracewin.closed) { tracewin = window.open('trace.html','tracewindow', 'height=400;width=100;top=600;left=800;resizable=yes'); } if(tracewin){ tracewin.traceStr(tracenum+":"+str); tracenum++; }}
function traceObj(obj){ //return; var strObj='obj:'+obj+'/n/r'; for(prop in obj) { if(obj[prop]) strObj += ('/t'+prop +'='+obj[prop]+';/n/r'); } trace(strObj); return strObj;}
function format(){ var i, msg = "", argNum = 0, startPos; var args = format.arguments; var numArgs = args.length; if(numArgs) { theStr = args[argNum++]; startPos = 0; endPos = theStr.indexOf("%s",startPos); if(endPos == -1) endPos = theStr.length; while(startPos < theStr.length) { msg += theStr.substring(startPos,endPos); if (argNum < numArgs) msg += args[argNum++]; startPos = endPos+2; endPos = theStr.indexOf("%s",startPos); if (endPos == -1) endPos = theStr.length; } if (!msg) msg = args[0]; } return msg;}
function tracefmt(){ var i, msg = "", argNum = 0, startPos; var args = tracefmt.arguments; var numArgs = args.length; if(numArgs) { theStr = args[argNum++]; startPos = 0; endPos = theStr.indexOf("%s",startPos); if(endPos == -1) endPos = theStr.length; while(startPos < theStr.length) { msg += theStr.substring(startPos,endPos); if (argNum < numArgs) msg += args[argNum++]; startPos = endPos+2; endPos = theStr.indexOf("%s",startPos); if (endPos == -1) endPos = theStr.length; } if (!msg) msg = args[0]; } trace(msg);}
function traceHTML(){ var parObj = document.body; while(parObj && parObj.tagName != 'HTML'){ parObj = parObj.parentElement; } trace(parObj.outerHTML);}
function getTime(){ var now= new Date(); var strTime= now.toLocaleTimeString()+':'+ (now00); return strTime;}function traceTime(info){ var strInfo = getTime()+':'+ info; trace(strInfo);}
//--------------------------trace.html-------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script language="JavaScript"> function traceStr(str){ var oOption = document.createElement("OPTION"); form1.traceList.options.add(oOption); oOption.innerText = str; oOption.selected=true; //form1.btnClose.focus(); } function traceInfoClick(){ var nIndex=form1.traceList.selectedIndex; if(nIndex!=-1) { form1.txtComments.value=form1.traceList.options[nIndex].innerText; form1.btnCopy.disabled=false; } else { form1.txtComments.value=''; form1.btnCopy.disabled=true; } } function CopyData() { var nIndex=form1.traceList.selectedIndex; if(nIndex!=-1) { strSelect = form1.traceList.options[nIndex].innerText; window.clipboardData.setData('text',strSelect.substr(strSelect.indexOf(':')+1)); } } function ClearData() { form1.traceList.innerHTML=""; } </script><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>JavaScript Tracer;</title></head><body><form name="form1"> <center> <select name="traceList" style="width:80%;height:40%" size="2" οnclick="traceInfoClick()"> </select><br/> <TEXTAREA style="width:80%;overflow:scroll" name="txtComments" rows="10"> </TEXTAREA> </center> <p align="right"> <input type="button" value="Clear" name="btnClear" οnclick="ClearData()"/> <input type="button" value="Copy" name="btnCopy" οnclick="CopyData()" disabled="disabled"/> <input type="button" value="Close" name="btnClose" οnclick="window.close()" align="right" /> </p> </form></body></html>
//--------------------------Sample.html-----------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> TestJavScriptTrace </title><script language="JavaScript" src="trace.js"></script></head>
<body><input type ="text"name ="val1" size="30" value = "11111"><br/><input type ="text"name ="val2" size="30" value = "22222"><br/><input type ="text" name ="result" size="30" value = "33333"><br/><input type ="button" onclick = "tracefmt('%s add %s = %s', val1.value, val2.value, result.value)" value = "TestTrace"></body></html>
