JavaScript调试工具

分享于 

8分钟阅读

Web开发

  繁體

示例图像- javascript_debugging_tool.png

免责声明

作者不接受任何效果。否定或者否定的责任,这个代码可以能对你,你的计算机,你的狗。 用你自己的风险。 ( 似曾相识我也喜欢的disclaimer。)

快速而肮脏的旅行

所以你不喜欢阅读你在网上看到的所有文章,或者你没有时间? 然后下载源文件,打开你喜欢的浏览器上的" debugDemo.htm"文件。

Background

尽管内部工作要求你成为高级web开发人员,但你只需要对HTML和JavaScript有基本知识。

介绍

好吧,你现在可能考虑: 在上,我有一个 Fire Bug 扩展插件,我得到了Fire FoxIE的WebDev栏,甚至Opera 插件还有一个具体的JavaScript控制台。 为什么我要关心一个用于JavaScript调试的工具"。 那么请让我来说服你 !

调试工具的需要

尽管浏览器拥有自己的JavaScript控制台,但是经常看到人们仍然使用那些著名 通知("我在这里" ! 他们的HTML代码全部代码。 在大多数开发环境中,建议你提供一个消防 Bug 类似扩展来提高调试功能。 但是,有时需要处理没有这种调试功能的浏览器,或者你不能安装扩展。 在你的网页上,随着时间的推移,你可能还需要一个地方来写变量值,而在你的页面上发生的。 在代码上可能还需要更健壮的异常处理,以帮助调试系统,即使它们已经部署在服务器上。 ,了,我们来看看代码 !

调试工具

调试工具由( 和一个内部css文件) 文件组成,必须包含在HTML页面中,如下面的示例 below 所示:

<html><head><title>Debug Demo</title><scripttype="text/javascript"src="DebugHelper.js"></script>...
 </head>

通过打开窗口,你将看到一个浮动弹出窗口,你将发现你发送到这些类方法的所有信息: Message()Warn() 或者 Exception()。 你还将在代码发生异常时看到错误消息。 工具允许你对希望显示的信息类型。默认名称和窗口样式进行大量控制。

//debug helper class to control popup windowsvar DebugHelper = function()
{
 this.Active = true;
 this.OpenWindowOnFirstMessage = true;
 this.ShowCallee = true;
 this.ShowInputArguments = true;
 this.ShowCaller = true; // may not work on all browsers, since it is // deprecatedthis.ShowCallStack = true; // may work on few browsers [Gecko], since // it is not a W3C recommendationthis.ShowException = true;
 this.ShowURL = true;
 this.ShowLastModified = true;
 this.ShowReferrer = true;
 this.VerboseMode = false;
 //reference to the popup windowthis.DebugWindow = null;
 this.CssStyleFile = new String("debugHelper.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 explorerthis.WindowName = new String("JavascriptDebugWindow");
 this.WindowTitle = new String("Javascript Debug Window");
}

尽管调试工具具有如这里多的配置,但通常不需要将它的更改为默认值。

使用调试工具

由于一个代码值得thousand文章的话,让我们从它开始:

<body><buttononclick="ShowMe('showWindow');">Show the debug window</button><buttononclick="ShowMe('message');">Show me a message</button><buttononclick="ShowMe('warn');">Show me a warning</button><buttononclick="ShowMe('exception');">Show me a exception</button><buttononclick="ShowMe('throwError');">Throw a Error()</button><buttononclick="ShowMe('hideWindow');">Hide the debug window</button><scripttype="text/javascript">function ShowMe(type)
 {
 try {
 switch(type)
 {
 case"showWindow":
 debugHelper.ShowWindow();
 break;
 case"hideWindow":
 debugHelper.HideWindow();
 break;
 case"message":
 debugHelper.Message("message");
 break;
 case"warn":
 debugHelper.Warn("warn");
 break;
 case"exception":
 debugHelper.Exception("exception");
 break;
 case"throwError":
 throw Error("throwing error");
 break;
 }
 }
 catch(ex)
 {
 debugHelper.Exception(ex, document.URL, document.lastModified,
 document.referrer, arguments);
 }
 }
 </script>...</body>

我们的演示页面是一个简单的阅读,你必须注意一些好的编码实践。 只要维护以下代码框架,函数 ShowMe() 就可以是你创建的任何它的他函数:

function NameOfYorFunction(anyParameters)
{
 try {
 //your code here }
 catch(ex)
 {
 debugHelper.Exception(ex, document.URL, document.lastModified, 
 document.referrer, arguments);
 }
}

使代码保持在 尝试/捕捉 block 将保证代码安全,并且捕获任何不希望的脚本行为。 通过禁用调试工具,你可以在不更改代码的情况下安全地部署你的系统。

我的代码已经部署,这里调试工具可以帮助我?

尽管我看不到可以能使用这里代码的所有可以能情况,但我的常见答案是,它可以能是。 如果你添加 尝试/捕捉 在代码中,你将从自动异常写入中获益,如果调用消息方法,则可以调试系统。 但是,如何在不干扰其他系统用户的情况下打开调试? 这个问题有一个窍门。 在JS文件中禁用 debugHelper,在浏览器上打开系统,然后键入" javascript: debugHelper.Active = true; debugHelper.ShowWindow(); "在浏览器地址文本框中。 现在只要通过系统。 这里更改只会影响你,当你关闭浏览器时,debugHelper将返回到它的禁用状态。 很简单啊?

安全性有保障吗?

如果你认为谁可以在你的系统上激活调试,是的,你是对的。 这里调试技术不适用于敏感或者 private 数据。 尽管JavaScript没有缩进以保存任何类型的敏感数据,但是总是值得提供这个技巧。

结束语

这就是JavaScript调试工具的结果 ! 我希望你和我一样喜欢它。

引用

网络上的一些资源:

  • 学校的( 1999 )。。 05/26/2006. 上的最后一次访问
  • 美国的W3C ( 1994 )。万维网联盟联盟。 05/26/2006. 上的最后一次访问

历史记录

  • 09-29-2006:
    • 原始文章。
  • 09-29-2006:
    • 将" ex.message"添加到 catch block,因为某些浏览器不会覆盖 toString() 方法以自动显示 message 属性。
  • ::
    • 添加了捕获语法错误和页面加载错误的功能。 在源代码中添加了另一个示例HTML页面。
  • 01-13-2007:
    • 为异常添加了额外的信息: 调用方,被调用方,参数,lineNumber [Moz],数字 [IE],调用堆栈 [Moz] 和错误类型。 更改行为以便 try/catch 块可以将字符串或者异常传递给 debugHelper。 将默认行为更改为所有已经启用。

JAVA  Javascript  tool  DEB  debug  调试  
相关文章