JS调试方法

JS调试技术

0、在要调试的代码中随处插入alert()函数
1、将消息记录到控制台

对IE、Firefox、Chrome和Safari来说，则可以通过console对象向JavaScript控制台中写入消息，这个对象具有下列方法。
log(message)：将一般消息记录到控制台
info(message)：将信息性消息记录到控制台
error(message)：将错误消息记录到控制台
warn(message)：将警告消息记录到控制台

<span style="font-size:18px;">function sum(num1, num2){
console.log("Entering sum(), arguments are " + num1 + "," + num2);
console.log("Before calculation");
var result = num1 + num2;
console.log("After calculation");
console.log("Exiting sum()");
return result;
} </span>

还有一种方案是使用使用LiveConnect，也就是在JavaScript中运行Java代码。Firefox、Safari和Opera都支持LiveConnect，因此可以操作Java控制台。

一种跨浏览器的log函数实现

<span style="font-size:18px;">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);
}
} </span>

2、将消息记录到当前页面

另一种输出调试消息的方式，就是在页面中开辟一小块区域，用以显示消息。这个区域通常是一个元素，而该元素可以总是出现在页面中，但仅用于调试目的；也可以是一个根据需要动态创建的元素。

<span style="font-size:18px;">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>";
}</span>

3、抛出错误

抛出错误也是一种调试代码的好办法。如果错误消息很具体，基本上就可以把它当作确定错误来源的依据。

<span style="font-size:18px;">function divide(num1, num2){
return num1 / num2;
} </span>

1）使用throw

<span style="font-size:18px;">function divide(num1, num2){
if (typeof num1 != "number" || typeof num2 != "number"){
throw new Error("divide(): Both arguments must be numbers.");
}
return num1 / num2;
}</span>

2）使用assert()函数

// 基本的assert()函数形式。

<span style="font-size:18px;">function assert(condition, message){
if (!condition){
throw new Error(message);
}
}

function divide(num1, num2){
assert(typeof num1 == "number" && typeof num2 == "number",
"divide(): Both arguments must be numbers.");
return num1 / num2;
} </span>

具体内容可参考《JavaScript高级程序设计（第3版）》