JavaScript代码调试方法实例小结

2023-09-01 21:39:04 165

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

1把消息记录到控制台

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

error(message)：错误性消息。
info(message)：信息性消息。
log(message)：一般性消息。
warn(message)：警告性消息。

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

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

/**
*跨浏览器，向控制台写入消息
*@parammessage
*/
functionlog(message){
if(typeofconsole=="object"){
console.log(message);
}elseif(typeofopera=="object"){
opera.postError(message);
}elseif(typeofjava=="object"&&typeofjava.lang=="object"){
java.lang.System.out.println(message);
}
}

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

functionsum(num1,num2){
log("Enteringsum(),argumentsare"+num1+","+num2);
log("Beforecalculation");
varresult=num1+num2;
log("Aftercalculation");
log("Exitingsum()");
returnresult;
}

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

2把消息记录到当前页面

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

functionlog(message){
varconsole=document.getElementById("debuginfo");
if(console==null){
console=document.createElement("div");
console.id="debuginfo";
console.style.background="#dedede";
console.style.border="1pxsolidsilver";
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+=""+message+"";
}

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

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

3抛出错误

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

functiondivide(num1,num2){
returnnum1/num2;
}

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

functiondivide(num1,num2){
if(typeofnum1!="number"||typeofnum2!="number"){
thrownewError("divide():两个参数都必须是数值")
}
returnnum1/num2;
}

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

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


functionassert(condition,message){
if(!condition){
thrownewError(message);
}
}
functiondivide(num1,num2){
assert(typeofnum1=="number"&&typeofnum2=="number","divide():Bothargumentsmustbenumbers.");
returnnum1/num2;
}
divide(1,"tt");

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript错误与调试技巧总结》、《JavaScript传值操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript代码调试方法实例小结

热门推荐

随机推荐