前端开发 \ JavaScript \ 说说如何使用 JavaScript 进行代码调试

说说如何使用 JavaScript 进行代码调试

总点击29
简介:1把消息记录到控制台 IE8、Firefox、Chrome和Safari中可以使用console对象向JavaScript控制台写入消息,它有这些方法:

1 把消息记录到控制台

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

error(message):错误性消息。

info(message):信息性消息。

log(message):一般性消息。

warn(message):警告性消息。

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;

}

这个错误消息包含了函数的名称以及导致错误的真正原因,所以如果抛出了这个错误,我们就能立即知道错误的来源以及问题的性质。

大型的应用程序,可以使用下面的这个 assert() 函数抛出自定义错误:

<script type="text/javascript">

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;

}

divide(1,"tt");

</script>

意见反馈 常见问题 官方微信 返回顶部