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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 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
根德YB400的电路分析
2021/03/02 无线电
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
详解vue中axios的封装
2018/07/18 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python集合类型用法分析
2015/04/08 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python 实现单通道转3通道
2019/12/03 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python3跳出一个循环的实例操作
2020/08/18 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
写给学生的新学期寄语
2014/01/18 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
永不妥协观后感
2015/06/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript