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 相关文章推荐
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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递归算法的详细示例分析
2013/02/19 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python中with用法讲解
2020/02/07 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
网络工程师的自我评价
2013/10/02 职场文书
行政总监岗位职责
2013/12/05 职场文书
教师年度考核评语
2014/04/28 职场文书
道德演讲稿
2014/05/21 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
幽默导游词开场白
2015/05/29 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
PO模式在selenium自动化测试框架的优势
2022/03/20 Python