Javascript调试脚本的经验之谈
作者：
随着用JavaScript编程的深入，你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误，你就会很快知道怎样避免它们，这样你写的代码中的错误将越来越少。
编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练，你仍然要花一些时间调试你的代码。如果你做过家庭作业，或有过JacaScript编程经验，你会知道相当多的时间是花在调试上。这很正常 - 这只是编程者必须做的事之一。实际上，按照大量的研究，程序员平均百分之五十的时间花在解决代码中的错误。
关键是学会怎样有效地调试你的程序。我有一些技巧可以帮助你解决程序为什么没有象应该的那样运行，或者帮你首先避免写有很多错误的代码：
1.用不同方式打印出变量
2.注意一般性错误
3.编码之前先想好
--------------------------------------------------------------------------------
如果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);
}
-----------------------------找到错误--------------------------------------------------
1.一般性程序错误
多数错误只是无聊的语法错误。记住关闭那些引号，大括号和小括号会花费很长时间，不过幸运的是 JavaScript自动错误检测器能捕获大部分此类错误。虽然JavaScript错误检测器随着日渐复杂的流览器而不断完善，但是一些错误仍会溜走。下面是一些需要留意的常见错误：
2.混淆变量名或函数名
大写和复数变量和函数名产生的错误令人烦恼地经常出现，有时JavaScript错误检测器不能捕获它们。通过建立和坚持使用一种对变量和函数的命名协定，会大大减少这些麻烦的数量。例如，我全部用小写字母定义变量，并用下划线代替空格（my_variable,the_data, an_example_variable），用内置符号表示函数 (addThreeNumbers(), writeError()等)。我避免使用任何复数，因为我总是忘记那些变量是不是复数。
3.偶然地使用了保留字
一些字不能作为变量名，因为它们已经被JavaScript使用。例如，不能定义一个叫 “if”的变量，因为它实际上是JavaScript的一部分 - 如果使用“if”，你会遇到各种麻烦。当你因为使用命名为“if”的变量而变得疯狂时，一个叫做“document”的变量是很诱人的。不幸的是，“document”是一个JavaScript对象。另一个经常遇到的问题是把变量命名为“name”（窗体元素有“names”属性）。把变量命名为“name”不会总出问题，只是有时 - 这会更使人迷惑 - 这就是避免使用“name”变量的原因。
不幸的是，不同的流览器有不同的保留字，所以没有办法知道该回避哪些字。最安全的办法是避免使用已经成为JavaScript一部分的字和HTML使用的字。如果你因为变量遇到问题，并且不能发现哪儿错了，试着把变量改个名字。如果成功了，你或许就避开了保留字。
4.记住在逻辑判断时应该用两个等号
一些流览器能捕获这种错误，有些却不能。这是一种非常常见的错误，但是如果流览器不能替你指出来，你就很难发现。下面是一个这种错误的例子：
var the_name = prompt("what's your name?", "");
if (the_name = "the monkey")
{
alert("hello monkey!");
} else {
alert("hello stranger.");
}
这段代码将产生“hello monkey!”警告对话框 - 不管你在提示里敲的是什么 - 这不是我们希望的。原因是在if-then语句中只有一个等号，这句话告诉JavaScript你想让一件事等于另一件。假设你在提示中敲的是 “robbie the robot”。最开始，变量the_name的值是“robbie the robot”，但是随后if语句告诉JavaScript你想把the_name设为“the monkey.”。于是JavaScript很高兴地执行你的命令，送一个“true”消息给if-then语句，结果警告对话框每次都出现“hello monkey!”。这种阴险的错误会使你发疯，所以注意使用两个等号。
5.偶然给变量加上了引号，或忘了给字符串加引号
我不时遇到这个问题。JavaScript区分变量和字符串的唯一方法是：字符串有引号，变量没有。下面有一个明显的错误：
var the_name = 'koko the gorilla';
alert("the_name is very happy");
虽然the_name是一个变量，但是程序还会产生一个提示“the_name is very happy,”的警告对话框。这是因为一旦JavaScript看见引号包围着某些东西就不再考虑它，所以当你把the_name放在引号里，你就阻止了 JavaScript从内存中查找它。下面是一个不太明显的此类错误的扩展：
function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
setTimeout("alert(the_message);", 3000);
}
这里的问题是你告诉JavaScript三秒后执行alert(the_message)。但是，三秒后the_message将不再存在，因为你已经退出了函数。这个问题可以这样解决：
function wakeMeIn3()
{
var the_message = "Wake up!";
setTimeout("alert('" + the_message+ "');", 3000);
}
把the_message放在引号外面，命令“alert('Wakeup!');”由 setTimeout预定好，就可以得到你想要的。这只是一些可能在你的代码中作祟的很难调试的错误。一旦发现了它们，就有不同的或好或差的方法来改正错误。你很幸运，因为你能从我的经验和错误中获益。
-------------------------------清除错误------------------------------------
找到错误，有时侯虽然很难，却只是第一步。然后你必须清除错误。下面是一些在清除错误时应该做的一些事：
首先拷贝你的程序
有些错误很难清除。实际上，有时在根除错误时，你会破坏整个程序 - 一个小错误使你疯狂。在开始调试前保存你的程序是确保错误不会利用你的最好方法。
一次修正一个错误
如果你知道有好几个错误，应该修正一个，检验其结果，再开始下一个。一次修正许多错误而不检验你的工作只会招致更多的错误。
警惕迷惑性错误
有时你知道存在一个错误，但不真正知道为什么。假设有一个变量“index”，由于某种原因 “index”总比你期望的小1。你可以做下面两件事中的一件：在那儿坐一会儿，解决它为什么变小了，或只是耸耸肩；在使用“index”之前加1,然后继续进行。后一种方法称为迷惑编程。当你开始思考“究竟是怎么了 - 为什么index是2而不是3呢？好吧...我现在先让它正常工作，以后再修改错误。”时，你正在把一块护创膏布贴到一处潜在的硬伤上。
迷惑编程可能在短期内有用，但是你可以看到长期的厄运 - 如果你没有完全理解你的代码到可以真正清除错误的程度，那个错误将会回来困扰你。它或者以另一种你不能解决的怪异错误的方式回来，或者当下一个可怜的被诅咒的灵魂读你的代码时，他会发现你的代码非常难以理解。
寻找小错误
有时侯，对程序员来说，剪切和粘贴代码的能力是一种很坏的事。通常，你会在一个函数中写一些 JavaScript代码，然后把它们剪切和粘贴到另一个函数中。如果第一个函数有问题，那么现在两个函数都有问题。我并不是说你不应该剪切和粘贴代码。但是错误会以某种方式繁殖，如果你发现了一个错误，你就应该寻找与其相似的其它错误。（或者在制作它的若干版本之前确切知道会发生什么。）变量名拼写错误在一段JavaScript代码中会突然多次出现 - 在一个地方把the_name错拼成teh_name，你就有机会在其它地方发现这个错误。
如果所有其它的方法都失败了
如果你正坐在那儿盯着一个错误，并且不能指出是怎么回事（或者根本没有发现错误，但是因为程序不能正确运行，你知道存在错误），你最好从计算机前走开。去读一本书，在角落散散步，或者拿一杯可口的饮料 - 做些事，任何事，但不要去想程序或问题。这种技术在某种情况下叫做“酝酿”，效果非常好。在你稍做休息和放松后，再试着找出错误。你会得到一幅比较清晰的景象。“酝酿”起作用是因为它使你从思维混乱中解脱出来。如果沿着一条错路走太远，你有时会发现无法转身。这种情况下最好开辟一条新路。我知道这会令人发火，但确实有效。真的！
如果上面的方法还不成功...
请求别人的帮助。有时你的思想会形成定式，只有换一种眼光才能洞察问题之所在。在结构化编程环境中，程序员们定期地互相复查别人的代码。这可以适当地叫做“代码复查”，不仅可以帮助消除错误，还可以得到更好的代码。不要怕把你的 JavaScript代码给别人看,它会使你成为更好的JavaScript程序员。
但是消除错误的绝对最好的办法是...
一开始就创建没有错误的代码。
-------------------------------创建没有错误的代码---------------------------------------
编好程序的关键是程序是写给人的，不是写给计算机的。如果你能明白其他人或许会阅读你的 JavaScript，你就会写更清晰的代码。代码越清晰，你就越不容易犯错误。机灵的代码是可爱的，但就是这种机灵的代码会产生错误。最好的经验法则是 KISS，即Keep It Simple,Sweetie（保持简单，可爱）。另一个有帮助的技术是在写代码之前作注释。这迫使你在动手之前先想好。一旦写好了注释，你就可以在其下面写代码。
下面是一个用这种方法写函数的例子：
第一步：写注释
第二步：填充代码
这种先写注释的策略不仅迫使你在写代码前思考，而且使编码的过程看起来容易些 - 通过把任务分成小的，易于编码的各个部分，你的问题看起来就不太象珠穆朗玛峰，而象一群令人愉悦的起伏的小山。
最后... 总以分号结束你的每一条语句。
虽然并不是严格必需，你应该养成以分号结束每一条语句的习惯，这样可以避免这行后面再有代码。忘了加分号，下一行好的代码会突然产生错误。把变量初始化为“var”，除非你有更好的理由不这样做。用“var”把变量局域化可以减少一个函数与另一个不相关函数相混淆的机会。
好了，既然你已经知道了如何编码，下面就让我们学习怎样使
你的JavaScript快速运行。>>
---------------------------------------------------------
按速度优化JavaScript代码
1.限制循环内的工作量
2.定制if-then-else语句，按最可能到最不可能的顺序
3.最小化重复执行的表达式
关键是学会怎样有效地调试你的程序。我有一些技巧可以帮助你解决程序为什么没有象应该的那样运行，或者帮你首先避免写有很多错误的代码：
1.用不同方式打印出变量
2.注意一般性错误
3.编码之前先想好
--------------------------------------------------------------------------------
如果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);
}
-----------------------------找到错误--------------------------------------------------
1.一般性程序错误
多数错误只是无聊的语法错误。记住关闭那些引号，大括号和小括号会花费很长时间，不过幸运的是 JavaScript自动错误检测器能捕获大部分此类错误。虽然JavaScript错误检测器随着日渐复杂的流览器而不断完善，但是一些错误仍会溜走。下面是一些需要留意的常见错误：
2.混淆变量名或函数名
大写和复数变量和函数名产生的错误令人烦恼地经常出现，有时JavaScript错误检测器不能捕获它们。通过建立和坚持使用一种对变量和函数的命名协定，会大大减少这些麻烦的数量。例如，我全部用小写字母定义变量，并用下划线代替空格（my_variable,the_data, an_example_variable），用内置符号表示函数 (addThreeNumbers(), writeError()等)。我避免使用任何复数，因为我总是忘记那些变量是不是复数。
3.偶然地使用了保留字
一些字不能作为变量名，因为它们已经被JavaScript使用。例如，不能定义一个叫 “if”的变量，因为它实际上是JavaScript的一部分 - 如果使用“if”，你会遇到各种麻烦。当你因为使用命名为“if”的变量而变得疯狂时，一个叫做“document”的变量是很诱人的。不幸的是，“document”是一个JavaScript对象。另一个经常遇到的问题是把变量命名为“name”（窗体元素有“names”属性）。把变量命名为“name”不会总出问题，只是有时 - 这会更使人迷惑 - 这就是避免使用“name”变量的原因。
不幸的是，不同的流览器有不同的保留字，所以没有办法知道该回避哪些字。最安全的办法是避免使用已经成为JavaScript一部分的字和HTML使用的字。如果你因为变量遇到问题，并且不能发现哪儿错了，试着把变量改个名字。如果成功了，你或许就避开了保留字。
4.记住在逻辑判断时应该用两个等号
一些流览器能捕获这种错误，有些却不能。这是一种非常常见的错误，但是如果流览器不能替你指出来，你就很难发现。下面是一个这种错误的例子：
var the_name = prompt("what's your name?", "");
if (the_name = "the monkey")
{
alert("hello monkey!");
} else {
alert("hello stranger.");
}
这段代码将产生“hello monkey!”警告对话框 - 不管你在提示里敲的是什么 - 这不是我们希望的。原因是在if-then语句中只有一个等号，这句话告诉JavaScript你想让一件事等于另一件。假设你在提示中敲的是 “robbie the robot”。最开始，变量the_name的值是“robbie the robot”，但是随后if语句告诉JavaScript你想把the_name设为“the monkey.”。于是JavaScript很高兴地执行你的命令，送一个“true”消息给if-then语句，结果警告对话框每次都出现“hello monkey!”。这种阴险的错误会使你发疯，所以注意使用两个等号。
5.偶然给变量加上了引号，或忘了给字符串加引号
我不时遇到这个问题。JavaScript区分变量和字符串的唯一方法是：字符串有引号，变量没有。下面有一个明显的错误：
var the_name = 'koko the gorilla';
alert("the_name is very happy");
虽然the_name是一个变量，但是程序还会产生一个提示“the_name is very happy,”的警告对话框。这是因为一旦JavaScript看见引号包围着某些东西就不再考虑它，所以当你把the_name放在引号里，你就阻止了 JavaScript从内存中查找它。下面是一个不太明显的此类错误的扩展：
function wakeMeIn3()
{
var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
setTimeout("alert(the_message);", 3000);
}
这里的问题是你告诉JavaScript三秒后执行alert(the_message)。但是，三秒后the_message将不再存在，因为你已经退出了函数。这个问题可以这样解决：
function wakeMeIn3()
{
var the_message = "Wake up!";
setTimeout("alert('" + the_message+ "');", 3000);
}
把the_message放在引号外面，命令“alert('Wakeup!');”由 setTimeout预定好，就可以得到你想要的。这只是一些可能在你的代码中作祟的很难调试的错误。一旦发现了它们，就有不同的或好或差的方法来改正错误。你很幸运，因为你能从我的经验和错误中获益。
-------------------------------清除错误------------------------------------
找到错误，有时侯虽然很难，却只是第一步。然后你必须清除错误。下面是一些在清除错误时应该做的一些事：
首先拷贝你的程序
有些错误很难清除。实际上，有时在根除错误时，你会破坏整个程序 - 一个小错误使你疯狂。在开始调试前保存你的程序是确保错误不会利用你的最好方法。
一次修正一个错误
如果你知道有好几个错误，应该修正一个，检验其结果，再开始下一个。一次修正许多错误而不检验你的工作只会招致更多的错误。
警惕迷惑性错误
有时你知道存在一个错误，但不真正知道为什么。假设有一个变量“index”，由于某种原因 “index”总比你期望的小1。你可以做下面两件事中的一件：在那儿坐一会儿，解决它为什么变小了，或只是耸耸肩；在使用“index”之前加1,然后继续进行。后一种方法称为迷惑编程。当你开始思考“究竟是怎么了 - 为什么index是2而不是3呢？好吧...我现在先让它正常工作，以后再修改错误。”时，你正在把一块护创膏布贴到一处潜在的硬伤上。
迷惑编程可能在短期内有用，但是你可以看到长期的厄运 - 如果你没有完全理解你的代码到可以真正清除错误的程度，那个错误将会回来困扰你。它或者以另一种你不能解决的怪异错误的方式回来，或者当下一个可怜的被诅咒的灵魂读你的代码时，他会发现你的代码非常难以理解。
寻找小错误
有时侯，对程序员来说，剪切和粘贴代码的能力是一种很坏的事。通常，你会在一个函数中写一些 JavaScript代码，然后把它们剪切和粘贴到另一个函数中。如果第一个函数有问题，那么现在两个函数都有问题。我并不是说你不应该剪切和粘贴代码。但是错误会以某种方式繁殖，如果你发现了一个错误，你就应该寻找与其相似的其它错误。（或者在制作它的若干版本之前确切知道会发生什么。）变量名拼写错误在一段JavaScript代码中会突然多次出现 - 在一个地方把the_name错拼成teh_name，你就有机会在其它地方发现这个错误。
如果所有其它的方法都失败了
如果你正坐在那儿盯着一个错误，并且不能指出是怎么回事（或者根本没有发现错误，但是因为程序不能正确运行，你知道存在错误），你最好从计算机前走开。去读一本书，在角落散散步，或者拿一杯可口的饮料 - 做些事，任何事，但不要去想程序或问题。这种技术在某种情况下叫做“酝酿”，效果非常好。在你稍做休息和放松后，再试着找出错误。你会得到一幅比较清晰的景象。“酝酿”起作用是因为它使你从思维混乱中解脱出来。如果沿着一条错路走太远，你有时会发现无法转身。这种情况下最好开辟一条新路。我知道这会令人发火，但确实有效。真的！
如果上面的方法还不成功...
请求别人的帮助。有时你的思想会形成定式，只有换一种眼光才能洞察问题之所在。在结构化编程环境中，程序员们定期地互相复查别人的代码。这可以适当地叫做“代码复查”，不仅可以帮助消除错误，还可以得到更好的代码。不要怕把你的 JavaScript代码给别人看,它会使你成为更好的JavaScript程序员。
但是消除错误的绝对最好的办法是...
一开始就创建没有错误的代码。
-------------------------------创建没有错误的代码---------------------------------------
编好程序的关键是程序是写给人的，不是写给计算机的。如果你能明白其他人或许会阅读你的 JavaScript，你就会写更清晰的代码。代码越清晰，你就越不容易犯错误。机灵的代码是可爱的，但就是这种机灵的代码会产生错误。最好的经验法则是 KISS，即Keep It Simple,Sweetie（保持简单，可爱）。另一个有帮助的技术是在写代码之前作注释。这迫使你在动手之前先想好。一旦写好了注释，你就可以在其下面写代码。
下面是一个用这种方法写函数的例子：
第一步：写注释
第二步：填充代码
这种先写注释的策略不仅迫使你在写代码前思考，而且使编码的过程看起来容易些 - 通过把任务分成小的，易于编码的各个部分，你的问题看起来就不太象珠穆朗玛峰，而象一群令人愉悦的起伏的小山。
最后... 总以分号结束你的每一条语句。
虽然并不是严格必需，你应该养成以分号结束每一条语句的习惯，这样可以避免这行后面再有代码。忘了加分号，下一行好的代码会突然产生错误。把变量初始化为“var”，除非你有更好的理由不这样做。用“var”把变量局域化可以减少一个函数与另一个不相关函数相混淆的机会。
好了，既然你已经知道了如何编码，下面就让我们学习怎样使
你的JavaScript快速运行。>>
---------------------------------------------------------
按速度优化JavaScript代码
1.限制循环内的工作量
2.定制if-then-else语句，按最可能到最不可能的顺序
3.最小化重复执行的表达式
您可能感兴趣的文章:
- Javascript调试工具（下载）
- javascript脚本调试方法小结
- 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
- js调试工具 Javascript Debug Toolkit 2.0.0版本发布
- ie 调试javascript的工具
- Javascript 调试利器 Firebug使用详解六
- 调试JavaScript/VBScript脚本程序（IE篇）
- Aptana调试javascript图解教程
- 两个JavaScript jsFiddle JSBin在线调试器
- JavaScript 错误处理与调试经验总结
- javascript 在firebug调试时用console.log的方法
- 调试Javascript代码(浏览器F12及VS中debugger关键字)
- 10个基于浏览器的JavaScript调试工具分享
- 利用浏览器的Javascript控制台调试PHP程序
- 禁用JavaScript控制台调试的方法
- JS高级调试技巧：捕获和分析 JavaScript Error详解
- JavaScript调试技巧之console.log()详解
- javascript调试之DOM断点调试法使用技巧分享
- 使用Chrome调试JavaScript的断点设置和调试技巧
- 谷歌浏览器调试JavaScript小技巧
- JavaScript如何调试有哪些建议和技巧附五款有用的调试工具