JavaScript调试的小工具(jsTrace)

关注

原创最新推荐文章于 2026-04-05 03:01:00 发布 5.1k 阅读 AI 写同款· GEO 优化 ›

深入浅出JavaScript 堆栈跟踪（Stack Trace）：你的调试“导航仪” 堆栈跟踪（Stack Trace）的核心是调用栈（Call Stack），它是 JavaScript 引擎用来管理函数调用顺序的一种数据结构。当一个函数被调用时，它会被压入调用栈的顶部。当函数执行完毕后，它会从栈顶弹出。如果函数内部调用了其他函数，新函数会继续压入栈顶。a();a → b → c，执行完c后依次弹出，最终栈为空。堆栈跟踪是 JavaScript 开发者不可或缺的“导航仪”。它不仅是调试工具，更是错误分析、性能优化和系统监控的核心能力。通过。阅读详情

前段时间写一个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"
      onclick="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"
      onclick="ClearData()"/>
    <input type="button" value="Copy" name="btnCopy"
      onclick="CopyData()" disabled="disabled"/>
    <input type="button" value="Close" name="btnClose"
      onclick="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>