JavaScript编程

JavaScript调试工具

Firebug

Firebug是一个功能强大的Firefox扩展，包含许多开发和调试工具，包括JavaScript调试器和性能分析工具。

Venkman JavaScript调试器

适用于Mozilla浏览器（如Netscape 7.x、Firefox和Mozilla Suite 1.x）的Venkman JavaScript调试器。

• Venkman简介
• 使用断点：Using Breakpoints in Venkman

Internet Explorer调试

• Microsoft Script Debugger：适用于旧版Internet Explorer的脚本调试器（Windows 98及NT时代），现已被开发者工具取代。
• Internet Explorer开发者工具栏：按 F12 调出，提供类似Firebug的功能。
• Visual Web Developer Express：微软免费提供的集成开发环境，带有JavaScript调试器。

Safari调试

Safari内置了强大的开发工具，包括Web检查器、错误控制台和禁用功能工具。

• Web检查器：快速查看页面结构、调试JavaScript、优化性能。
• 启用调试：打开“开发”菜单，选择 Show Web Inspector，进入 Scripts 面板启用调试功能。

其他调试工具

• JTF（JavaScript单元测试平台）：一个协作网站，用于创建跨浏览器测试案例。
• jsUnit：一个JavaScript测试框架。

内置调试工具

大多数现代浏览器都提供内置调试工具，可以通过快捷键打开：

• Firefox: Ctrl + Shift + K 打开错误控制台。
• Opera (9.5+): 菜单 → 工具 → 高级 → 开发者工具。
• Chrome: Ctrl + Shift + J 打开开发者工具的控制台标签。
• Internet Explorer: 按 F12。
• Safari: Cmd + Alt + C 打开WebKit检查器。

常见错误

1. 代码拼写错误：检查是否有拼写或格式错误。
2. 括号配对：确保每个 ( 都有对应的 )，每个 { 都有对应的 }。
3. 数组和对象中的尾随逗号：尾随逗号会在IE中引发错误，但在Gecko浏览器中不会：

   var obj = {
     foo: "bar",
     color: "red", // 尾随逗号，IE中出错
   };
   

4. 大小写敏感：JavaScript区分大小写。
5. 避免使用保留字：变量名、函数名不要使用JavaScript保留字。
6. 正确转义字符串中的引号：

   alert('He\'s eating food');
   

7. 正确解析数字：parseInt 时指定基数，防止错误解析：

   var n = parseInt('09', 10); // 正确解析为10进制
   

8. 浏览器兼容性问题：不同浏览器可能支持不同的函数、属性和对象。

调试方法

1. 变量追踪：可以使用 alert() 调试变量，或在开发者工具中逐步执行代码。
2. 浏览器问题：某些问题可能是浏览器的Bug而非脚本错误。
3. 对象检测：使用对象检测代替浏览器检测，确保兼容性：

   if (document.getElementById) {
     el = document.getElementById(id);
   } else if (document.all) {
     el = document.all[id];
   }
   

延伸阅读

• Ben Bucksch的《JavaScript调试》