JavaScript 错误处理与调试经验总结


Posted in Javascript onAugust 10, 2010

下面总结一下JS错误处理与调试的方法
方法1:用alert() 和document.write()方法监视变量值。
alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击“确定”按钮,而document.write()则在输出值后继续运行代码。调试JS时可以根据具体情况来选择这种方法。
例如下面代码:将数组a中以1开头的数据添加到数组b中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
var a=["123","456","789","111"]; 
function AlertMessage() 
{ 
var b=new Array("1111"); 
for(var i=0;i<a.length;i++) 
{ 
if(a[i].indexOf("1")!=0) 
{ 
alert(a[i]); 
b.push(a[i]); 
} 
} 
} 
</script> 
</head> 
<body > 
<input type="button" value="点我" onclick="AlertMessage()"/> 
</body> 
</html>

如果加入的值比较多,则可以使用document.writer()方法,避免反复点击确定按钮。
方法2:用onerror事件找到错误:
当页面出现异常时,error事件会在window对象上触发,它能够在一定程序上告诉开发者出现了错误,并帮助开发者找到错误所在,如下例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思,出错了!"); 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html>

代码运行body标记的onload事件时调用了一个不存在的函数NonExist(),产生了错误,如下图:

JavaScript 错误处理与调试经验总结
同时,浏览器本身的代码调试错误也出现了: JavaScript 错误处理与调试经验总结

要避免浏览器自己的错误提示很简单,只需要要onerror事件的处理函数最后返回ture便可,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
window.onerror=function() 
{ 
alert("不好意思,出错了!"); 
return true;//屏蔽系统事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html>

但这样处理对于解决错误并没有任何的帮助。其实onerror还提供了3个参数来确定错误的性质,代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
window.onerror=function(message,url,line) 
{ 
alert("不好意思,出错了:\n错误提示:"+message+"\nUrl:"+url+"\n行号:"+line); 
return true;//屏蔽系统事件 
} 
</script> 
</head> 
<body onload="NonExist()" > 
</body> 
</html>

IE运行时的提示:

JavaScript 错误处理与调试经验总结
Firefox运行的提示
JavaScript 错误处理与调试经验总结 
在IE浏览器中发生error事件时,正常的代码会继续执行,所有的变量和数据都保存下来,并可以通过onerror事件处理函数访问。而在Firefox中,正常的代码执行都会结束,同时所有的错误发生之前的变量和数据都会被销毁.
方法3:用try….catch语句找到错误

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
try 
{ 
alert("这个是try...catch的例子"); 
alert(hello); 
} 
catch(exception) 
{ 
var error=""; 
for(var i in exception) 
{ 
error+=i+":"+exception[i]+"\n"; 
} 
alert(error); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

IE运行时的提示:
JavaScript 错误处理与调试经验总结 
Firefox运行时的提示:
JavaScript 错误处理与调试经验总结 
通过try…..catch可以很轻松的找到错误的问题,不过可惜的是该语句并不能很好地处理语句错误。如下例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript"> 
try 
{ 
alert("这个是try...catch的例子")); 
} 
catch(exception) 
{ 
var error=""; 
for(var i in exception) 
{ 
error+=i+":"+exception[i]+"\n"; 
} 
alert(error); 
} 
</script> 
</head> 
<body> 
</body> 
</html>

try语句里面出现了括号不匹配的错误,而整个代码并没有运行catch中的模块,而是浏览器弹出了错误提示框,如下图:

JavaScript 错误处理与调试经验总结

 

方法4:使用Firefox错误控制台调试:

Firefox菜单栏中选择“工具”->“错误控制台”,便可以打开它,所有浏览中运行的错误,警告,消息都会传错误控制台,如下:

JavaScript 错误处理与调试经验总结 

 

Firefox提示的错误信息要比IE全面而且准确的多。

方法5:使用Firefox插件FireBug

FirebugFirefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScriptCSSHTMLAjax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。具体如何安装使用FireBug可参考这篇文章:http://apps.hi.baidu.com/share/detail/15314208

方法6:使用Miscrosoft Script Debugger调试:

IE菜单栏中打开“工具”->Internet选项“,选择”高级“,将”禁用脚本调试“复选框的勾去掉。

JavaScript 错误处理与调试经验总结 

 

JavaScript 错误处理与调试经验总结 

 

具体如何使用就不介绍了。

方法7:使用IE下的JS调试工具companion.js

一款像firefox中的firedebug工具类似的一个工具包,它的特点就是可以有好的提示错误,并且可以在IE浏览器下方出现控制台输出.方便及时调试。

具体可参考这篇文章:http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

还有其他JS调试工具就不一一介绍了,大家也可以介绍多几种比较好的JS错误处理方法或JS调试工具。

Javascript 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 #Javascript
javascript中的prototype属性实例分析说明
Aug 09 #Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 #Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 #Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 #Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 #Javascript
You might like
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php注册登录系统简化版
2020/12/28 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
python 实现插入排序算法
2012/06/05 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python队列的定义与使用方法示例
2017/06/24 Python
django中send_mail功能实现详解
2018/02/06 Python
python 字典套字典或列表的示例
2019/12/16 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
师范应届生教师求职信
2013/11/05 职场文书
银行演讲稿范文
2014/01/03 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
批评与自我批评总结
2014/10/17 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Python实现排序方法常见的四种
2021/07/15 Python