JavaScript高级教程 - 第五课

作者： Thau   

一旦你发现一个错误, 就可以清除它。 不幸的是, 发现它们的 出处并不总是很容易 - 你的大部分调试时间只是花在指出错 误的位置。

最可靠的方法之一是在你的代码中加入一些简单的语句打印出 正在发生什么。 假如你在下面的两段程序中发现一个问题：

function getName()
{
    var first_name = prompt("what's your first name?","");
    var last_name = prompt("what's your last name?","");
    var the_name = first_name + " " + last_name;
    
}

function theGreeting()
{
    var the_name = "";
    the_name = getName();

    if (the_name == "Dave Thau")
    {
    alert("Hello, oh greatest one!");
    } else {
    alert("Ahoy palloi!");
    }
}

运行这段程序, 看看你是否能发现出了什么问题（Netscape 3.x 的用户可能会遇到一些错误检查的问题, 这是由于Netscape 3.x 本身的原因, 以下的Javascript例子与此相同）。 如果你在警告 对话框中随意输入一些名字, 你会得到问候：“Ahoy palloi!”。 但是, 如果你在第一个提示对话框中输入“Dave”, 在第二个中 输入“Thau”, 你应该得到“Hello,oh greatest one!”这条 信息。 然而, 你还是只得到“Ahoy palloi!”这条信息。 很明显, 函数中出了错误。 在这个简单的例子程序中, 你或许只是查看 JavaScript代码就能发现错误。 然而, 当你的代码变得越来越复 杂时, 只靠目测来发现错误会变得愈加困难。

如果JavaScript没能捕获你的错误, 你也没有通过查看代码发现 错误, 有时打印出变量会对你有所帮助。 最简单的方法是象下面 这样使用一个alert()：

// theGreeting gets a name using getName, then presents  
    // one or two alert boxes depending on what the name is 
    function getName() 
    { 
      var first_name = prompt("what's your first 
    name?",""); 
      var last_name = prompt("what's your last 
    name?",""); 
      var the_name = first_name + " " + last_name;  
      alert("in getName, the_name is: " + the_name);
    } 
     
    // theGreeting gets a name using getName, then presents  
    // one of two alert boxes depending on what the name is 
    
    function theGreeting() 
    { 
       var the_name = ""; 
       the_name = getName(); 
       alert("after getName, the_name = " + the_name); 
       if (the_name == "Dave Thau") 
       { 
       alert("hello, oh greatest one!"); 
       }else{  
       alert("ahoy palloi!");  
       } 
    }

请注意我们已经在所有重要的地方加入警告语句。 现在试着运行 这段程序。 如果你输入名称“Dave”和“Thau”, 你会注意到第 一个警告显示“in getName, the_name is: Dave Thau,”, 但 是第二个警告显示“after getName, the_name = undefined,”, 这就告诉你在getName()的最后一行事情变得糟糕起来。 不知何 故, the_name只在函数存在前正确, 但是theGreeting没有给变 量the_name正确赋值。 当你写的函数能正确运行, 但返回值出现 问题时, 你最先要做的就是检查你是否的确让其返回了一个值。 很明显, 问题就出在这儿。 getName()函数指出了名称, 但没有 返回它。 所以我们应把语句“return the_name;”加到函数末尾。

把一些警告对话框加入你的代码中是很有帮助的。 不幸的是, 每 隔一行就按一次“OK”也是一种痛苦。

不用警告对话框也能调试代码。 一种选择是把调试信息写到窗体 的一个文本区内。 另一种可能是把调试信息写在另一个窗口上。 这儿有一个把调试信息写在下面文本区的调试代码的例子。

使你的调试经历更舒适的第三个诀窍是这样的：创建不同的调试 等级, 然后设置“调试”变量。 下面就是在此页上运行的 JavaScript代码：

// debug can be either none, alert, or textarea  
    //  depending on the kind of debugging I want to do 
    // var debug = "none"; 
    // function getName gets a first and last name,  
    // concatenates them with a space in between,  
    // and returns the name 
    
    function getName() 
    {  
      var first_name = prompt("what's your first 
    name?",""); 
      var last_name = prompt("what's your last 
    name?",""); 
      var the_name = first_name + " " + last_name;  
      var error_message = "in getName, the_name is: " + the_name;  
      doError("in getName, the_name is: " + the_name); 
    } 
     
    // theGreeting gets a name using getName, then presents  
    // one of two alert boxes depending on what the name is 
    
    function theGreeting() 
    { 
       var the_name = ""; 
       the_name = getName();  
       doError("after getName, the_name = " + the_name); 
       if (the_name == "Dave Thau") 
       { 
        alert("hello, oh greatest one!"); 
       } else {  
        alert("ahoy palloi!"); 
       } 
    } 
     
    // doError is the error handling routine 
    // depending on the type of debug message 
    // it presents either no debug message, an alert 
    // or puts the message in a textarea 
    // 
    function doError(the_message) 
    { 
      if (debug == "alert")  
      { 
        alert(the_message); 
      } else if (debug == "textarea") 
      {  
        window.document.the_form.the_text.value += 
       the_message + "<br>\n";  
      } 
    } 

请注意我已经定义了一个叫“debug”的变量, 它可以是 “none”, “alert”或“textarea”。 于是当我想产生一个错 误信息时, 我把它送给函数doError(), 此函数可能什么也不做, 或者显示一个消息对话框, 或者把消息粘贴到一个文本区中, 这 取决于我怎样设置调试变量。 当你想同时看到多条错误信息时, 你可以设置调试变量为“textarea”。 当你准备把你的代码显示 给全世界时, 你只需要把调试变量设为“none”, 于是错误信息 将不再出现, 这样可以省去发现和清除所有调试语句的麻烦。

通常, 程序员可以创建不同的调试等级, 如“none”, “brief” 和“extreme”。 “brief”将打印一些调试信息, “extreme” 将打印大量调试信息, “none”当然不会打印任何信息。

如果你按此方法建立你的调试系统, 你可以在编码时把调试等级 设为“brief”, 在准备公布你的JavaScript时把调试变量设为 “none”。 如果有不可思议的事情发生, 并且你不知道去哪儿发 现问题, 你可以把调试等级设为“extreme”, 然后流览所有的 调试信息直到发现可疑的地方。

好了, 调试系统就讨论到这儿。 现在让我们看看JavaScript编码 器产生的一般性错误。 >>

JavaScript高级教程
第一页JavaScript高级教程- 第5天
第二页 打印变量
第三页 一般性程序错误
第四页 修正错误
第五页 好的编程实践
第六页 按速度优化JavaScript代码
第七页 下面讲什么？

[第1课][第2课][第3课][第4课][第5课]

来源： Wired Digital Inc.