/***********本人原创，欢迎转载，转载请保留本人信息*************/
作者：王力猛 (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级别信息。
|