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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
jQuery each函数源码分析
May 25 Javascript
js实现无缝滚动图
Feb 22 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
在Vue中使用antv的示例代码
Jun 29 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 批量删除 sql语句
2009/06/05 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python assert语句的简单使用示例
2019/07/28 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
2015年试用期工作总结
2014/12/12 职场文书
毕业设计致谢词
2015/05/14 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书