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版）》