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层次选择器选择元素使用介绍
Apr 18 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
JS实现li标签的删除
Apr 12 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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
13个PHP函数超实用
2015/10/21 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python设计模式之代理模式实例
2014/04/26 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python中的Numpy矩阵操作
2018/08/12 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python 自定义对象的打印方法
2019/01/12 Python
Python内存管理实例分析
2019/07/10 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python bytes string相互转换过程解析
2020/03/05 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Python 中Operator模块的使用
2021/01/30 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
2014年保育员个人工作总结
2014/12/02 职场文书
大学开学感言
2015/08/01 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技