技术开发 频道

探求JavaScript开发工具



    3 破牛车
    比起Notepad,使用Editplus,UltraEdit,Editeur等的编辑工具就舒服多了。因为这些编辑工具可高亮显示语言关键字,并用不同的颜色显示对象,常量等不同语义元素,同时这些工具对程序代码结构也有一定的感知,比如当光标在一个代码块中换行时,光标会自动缩进,图 1是EditPlus编辑JavaScript程序的效果图:


图 1 EditPlus编辑JavaScript程序


    此外,这些工具一般都具强大的查寻、替换,块操作等编辑功能,非Notepad能同日而语。所以诸如EditPlus这些虽不完美的破牛车已经把我们从完全人力劳作的噩梦中解救出来。直到现在,大部分的开发者应该还都是使用诸如此类编辑工具,笔者大部分业已完成的JavaScript程序也大多都在Editplus中完成。

    虽然在EditPlus型的编辑工具中,代码结构编排、上下文查找等工作变得轻松了许多,但它依然没有代码诱导的功能,更遑论程序断点跟踪调试了。在这里,alert()函数依然扮演着调试工作的贤才干将。你当然可以随意在需要关注的地方加上alert()语句以查看运行时的信息,这种有如埋地雷的工作并不辛苦,但拆卸和调整的工作却是繁复而费力的,况且如雨点般蹦出来的alert信息也足以将一个正常人搞疯。

    由于alert只能查看单点程序运行的情况,无法记录程序运行的过程信息,所以当程序超过400,500行时,调试工作将变得举步为艰。有鉴于此,笔者曾经仿照Java中Log4J的思想开发了一个内嵌在程序中的调试器。其思想大概是这样的:
1)将JavaScript嵌到html页面,并在页面中提供一个<div id="debugInfo "></div>,使用这个div显示程序运行时的信息。
2)提供一个输出过程性调试信息的方法

1. function appendDebug(info,color) 2. { 3. /*if(appendDebug.arguments.length < 2) 4. { 5. color = "black"; 6. } 7. document.all("debugInfo").innerHTML += "<br><font color="+color+">"+info+"</font>"; 8. */9. }

    在需要调试时,将方法中的代码注释代码打开。
    3)在程序的调试点,调用appendDebug(info)将调试性的过程信息输出,如下面这段示例的代码:

function fun1(param1,param2) { appendDebug("fun1入参param1值为"+ param1,"blue"); appendDebug("fun1入参param2值为"+ param2,"yellow"); }

    这样,程序运行时的过程性信息就可以用不同的颜色记录下来以资调试之用。
    在缺少调试器的时候,这个土制炉灶确实帮了我不少的忙,代码行数近2000行的“下拉框智能诱导控件”和“多功能日历控件”的JavaScript程序就是通过此方法完成调试的。由于目前已有的JavaScript调试工具还不够强大,这个方法依然有指导意义。

0
相关文章