JavaScript代码调试方法实例小结
编程学习 2021-07-04 15:49www.dzhlxh.cn编程入门
这篇文章主要介绍了JavaScript代码调试方法,结合实例形式总结分析了JavaScript错误信息的处理与代码调试相关操作技巧,需要的朋友可以参考下
本文实例讲述了JavaScript代码调试方法。分享给大家供大家参考，具体如下：
1 把消息记录到控制台
IE8、Firefox、Chrome 和 Safari 中可以使用 console 对象向 JavaScript 控制台写入消息，它有这些方法：
- error(message)：错误性消息。
- info(message)：信息性消息。
- log(message)：一般性消息。
- warn(message)：警告性消息。
Opera 10.5 之前的版本，是使用 opera.postError() 方法把消息写入控制台的。
可以使用狼蚁网站SEO优化的这个函数作为统一写入控制台的接口：
/**
* 跨浏览器，向控制台写入消息
* @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 抛出错误
如果错误消息很具体，那么就可以直接把它当做确定错误来源的依据，比如狼蚁网站SEO优化的这个函数：
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;
}
这个错误消息包含了函数的名称以及导致错误的真正原因，所以如果抛出了这个错误，我们就能立即知道错误的来源以及问题的性质。
大型的应用程序，可以使用狼蚁网站SEO优化的这个 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>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。