轻量级的Javascript脚本调试工具

来源：互联网发布：淘宝卖家给买家的评语编辑：程序博客网时间：2024/05/08 10:19

/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：wallimn
电邮：wallimn@sohu.com
博客：http://wallimn.bokee.com
　　　http://blog.csdn.net/wallimn
时间：2006-11-15
/***********本人原创，欢迎转载，转载请保留本人信息*************/

　　现在“富客户端”是炒得比较火的一个概念。所谓的富客户端一般需要写大量的javascript/vbscript代码，脚本语言是比较难调试的，虽然可以使用OFFICE中带的脚本调试程序、DOTNET或其它的专业工具来调试，可总是些不方便。
　　写过VC程序的人相信比较熟悉TRACE、afxDump等几个函数，这几个函数可以在工具窗口实时的输出一些调试信息，可以很方便的发现一些运行时错误。有人使用纯脚本的方式实现了类似的跟踪调试功能，经过使用发现确实可以给开发带来比较大的方便。代码是以CodeProject网站上找到的，原理很简单，使用很方便。调试信息分为Message、Warn及Exception几种，以不同的颜色显示，很直观。
　　下面把相应代码及使用帮助贴出来，感兴趣的网友可以拷贝粘贴后使用。
　　主要是两个文件：
/***************************************************************************/
　　一、脚本文件(文件名：debuggingTools.js)
/***************************************************************************/
//debug helper class to control popup windows
var DebugHelper = function()
{
    this.Active = true;
    this.ShowException = true;
    this.ShowURL = true;
    this.ShowLastModified = false;
    this.ShowReferrer = false;
    this.VerboseMode = false;
    //reference to the popup window
    this.DebugWindow = null;
    this.CssStyleFile = new String("debugWindow.css");
    this.WindowStyle = new String("left=0,top=0,width=300,height=300,scrollbars=yes,status=no,resizable=yes");
    //no spaces to run correctly on internet explorer
    this.WindowName = new String("JavascriptDebugWindow");
    this.WindowTitle = new String("Javascript Debug Window");
}

//method to show the debug window
DebugHelper.prototype.ShowWindow = function()
{
try
{
     if( this.Active )
     {
      this.DebugWindow = window.open("", this.WindowName, this.WindowStyle);
        this.DebugWindow.opener = window;
        //open the document for writing
        this.DebugWindow.document.open();
        this.DebugWindow.document.write(
          "<html><head><title>" + this.WindowTitle + "</title>" +
          "<link rel='stylesheet' type='text/css' href='" + this.CssStyleFile + "' />" +
          "</head><body><div id='renderSurface' style='width: 100%; height: 100%;' /></body></html>/n"
         );
         this.DebugWindow.document.close();
     }
}
catch(ex)
{
  //ignore exception
}
}

//if the debug window exists, then write to it
DebugHelper.prototype.$Write = function(cssClass, message, url, lastModified, referrer)
{
try
{
  if( this.Active )
  {
   if( this.DebugWindow && ! this.DebugWindow.closed )
   {
       var msg = message;

       if( this.ShowURL && url != null )
           msg += " at " + url;

       if( this.ShowLastModified && lastModified != null )
           msg += " last modified in " + lastModified;

if( this.ShowReferrer && referrer != null )
msg += " referrer " + referrer;

      this.DebugWindow.document.getElementById("renderSurface").innerHTML = "<span class='" + cssClass + "'>" + msg + "</span>" + this.DebugWindow.document.getElementById("renderSurface").innerHTML;
    }
  }
}
catch(ex)
{
  //ignore exception
}
}

//write a message to debug window
DebugHelper.prototype.Message = function(message, url, lastModified, referrer)
{
try
{
this.$Write("debugMessage", message, url, lastModified, referrer);
}
catch(ex)
{
//ignore exception
}
}

//same as debug, plus another style applyied
DebugHelper.prototype.Warn = function(message, url, lastModified, referrer)
{
try
{
this.$Write("debugWarn", message, url, lastModified, referrer);
}
catch(ex)
{
//ignore exception
}
}

//same as debug, plus a strong style applyied
DebugHelper.prototype.Exception = function(message, url, lastModified, referrer)
{
try
{
     if( this.ShowException )
     {
         this.$Write("debugException", message, url, lastModified, referrer);
    }
}
catch(ex)
{
  //ignore exception
}
}

//if the debug window exists, then close it
DebugHelper.prototype.HideWindow = function()
{
try
{
     if( this.DebugWindow && !this.DebugWindow.closed )
     {
      this.DebugWindow.close();
         this.DebugWindow = null;
     }
}
catch(ex)
{
  //ignore exception
}
}

//create a global debug object
var debugHelper = new DebugHelper();
//you should show the window right here to get loading errors or sintax errors of other pages
//debugHelper.ShowWindow();

//catch generic errors also
function WindowOnError(msg, url, line)
{
if( debugHelper )
{
debugHelper.Exception(msg, line + " at " + url);
}
}
window.onerror = WindowOnError;
/***************************************************************************/
　　二、样式表(文件名：debugWindow.css)
/***************************************************************************/
body
{
background-color: #ffffff;
font-family: "Courier New", Courier, monospace;
}
span.debugMessage
{
border-bottom:1px dotted #cccccc;
color: #000000;
display: block;
margin: 1px;
}
span.debugWarn
{
border-bottom:1px dotted #aaaa00;
color: #0000aa;
display: block;
}
span.debugException
{
border-bottom:1px dotted #ff0000;
color: #aa0000;
display: block;
font-weight: bold;
}
/***************************************************************************/
　　三、使用示例
/***************************************************************************/
　　使用很简单了，在网页上包含上面的脚本文件，使用下面几个函数就可以了。
debugHelper.ShowWindow();//显示调试窗口
debugHelper.HideWindow();//隐藏调试窗口
debugHelper.Message("信息");//显示message级别信息
debugHelper.Warn("信息");//显示warn级别信息。
debugHelper.Exception("信息");//显示Exception级别信息。