简陋的Javascript脚本调试工具

wallimn

浏览: 5161209 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

脚本 JavaScript prototype CSS Office

　　现在“富客户端”是炒得比较火的一个概念。所谓的富客户端一般需要写大量的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级别信息。

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

分享到：

Hibernate中UUID的生成算法 | 页面树形控件dhtmlxTree、mztreeview及xtre ...

2006-12-09 10:22
浏览 1739
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论