JavaScript调试的小工具(jsTrace)

最新推荐文章于 2023-10-01 15:08:54 发布

fishjam

最新推荐文章于 2023-10-01 15:08:54 发布

阅读量4.8k

点赞数

分类专栏： Script 文章标签： javascript 工具 function input button html

本文链接：https://blog.csdn.net/fishjam/article/details/1490971

版权

Script 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前段时间写一个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 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()+':'+ (now%1000);
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>

fishjam

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript调试的小工具(jsTrace)

前段时间写一个JavaScript的程序，根据用户鼠标的操作进行控件的拖放。感觉用 alter 或断点跟踪调试的方法太难受了。就仿照MFC的TRACE功能写了如下的小代码(trace.js)。拥有的功能如下： trace(str) : 在调试窗口输出信息； traceObj(obj): 在调试窗口输出对象所有不为空的属性； tracefmt(...): 按照用户定义的格式进行输出 t
复制链接

扫一扫

专栏目录