JavaScript代码调试方法实例小结

本文实例讲述了JavaScript代码调试方法。分享给大家供大家参考，具体如下：

1 把消息记录到控制台

IE8、Firefox、Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息，它有这些方法：

Opera 10.5 之前的版本，是使用 opera.postError() 方法把消息写入控制台的。

可以使用下面的这个函数作为统一写入控制台的接口：

/** * 跨浏览器，向控制台写入消息 * @param message */function log(message) {  if (typeof console == "object") {    console.log(message);  } else if (typeof opera == "object") {    opera.postError(message);  } else if (typeof java == "object" && typeof java.lang == "object") {    java.lang.System.out.println(message);  }}

可以在浏览器中安全地使用这个函数：

function sum(num1, num2) {  log("Entering sum(), arguments are " + num1 + "," + num2);  log("Before calculation");  var result = num1 + num2;  log("After calculation");  log("Exiting sum()");  return result;}

注意：在发布之前，务必移除所有的消息。这可以在部署之前，通过编写特定的代码步骤，实现自动清理。不要使用 alert()，因为弹出的警告框会阻止程序的执行；而且在测试异步操作对时间的影响时，使用警告框也会影响测试结果。

2 把消息记录到当前页面

可以在页面中开辟出一小块区域，用于显示消息：

function log(message) {  var console = document.getElementById("debuginfo");  if (console == null) {    console = document.createElement("div");    console.id = "debuginfo";    console.style.background = "#dedede";    console.style.border = "1px solid silver";    console.style.padding = "5px";    console.style.width = "400px";    console.style.position = "absolute";    console.style.right = "0px";    console.style.top = "0px";    document.body.appendChild(console);  }  console.innerHTML += "<p>" + message + "</p>";}

这种技术在不支持 JavaScript 控制台的 IE7 以及早期版本中，特别有用。

注意：在发布之前，也要移除把错误消息输出到页面中的代码。

3 抛出错误

如果错误消息很具体，那么就可以直接把它当做确定错误来源的依据，比如下面的这个函数：

function divide(num1, num2){  return num1/num2;}

这个函数如果其中的一个参数不是数值，那么就会返回 NaN。所以可以在计算前先进行检测：

function divide(num1, num2){  if(typeof num1 !="number" || typeof num2 !="number"){    throw new Error("divide(): 两个参数都必须是数值")  }  return num1/num2;}