这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面总结一下 JS 错误处理与调试的方法
在 web 开发过程中,编写 JavaScript 程序时或多或少会遇到各种各样的错误,有语法错误,逻辑错误。如果是一小段代码,可以通过仔细检查来排除错误,但如果程序稍微复杂点,调试 JS 便成为一个令 Web 开发者很头痛的问题。
方法 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(), 产生了错误,如下图:
同时,浏览器本身的代码调试错误也出现了:
要避免浏览器自己的错误提示很简单,只需要要 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 运行时的提示:
在 Firefox 运行的提示 在 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 运行时的提示:
Firefox 运行时的提示:
通过 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 中的模块,而是浏览器弹出了错误提示框,如下图:
方法 4:使用 Firefox 错误控制台调试:
在 Firefox 菜单栏中选择 "工具"->"错误控制台", 便可以打开它,所有浏览中运行的错误,警告,消息都会传错误控制台,如下:
Firefox 提示的错误信息要比 IE 全面而且准确的多。
方法 5:使用 Firefox 插件 FireBug
Firebug 是 Firefox 下的一款开发类插件,现属于 Firefox 的五星级强力推荐插件之一。它集 HTML 查看和编辑、Javascript 控制台、网络状况监视器于一体,是开发 JavaScript、CSS、HTML 和 Ajax 的得力助手。Firebug 如同一把精巧的瑞士军刀,从各个不同的角度剖析 Web 页面内部的细节层面,给 Web 开发者带来很大的便利。具体如何安装使用 FireBug 可参考这篇文章:http://apps.hi.baidu.com/share/detail/15314208
方法 6:使用 Miscrosoft Script Debugger 调试:
在 IE 菜单栏中打开 "工具"->"Internet 选项",选择 "高级",将 "禁用脚本调试" 复选框的勾去掉。
具体如何使用就不介绍了。
方法 7:使用 IE 下的 JS 调试工具 companion.js
一款像 firefox 中的 firedebug 工具类似的一个工具包,它的特点就是可以有好的提示错误,并且可以在 IE 浏览器下方出现控制台输出. 方便及时调试。
具体可参考这篇文章:http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html
还有其他 JS 调试工具就不一一介绍了,大家也可以介绍多几种比较好的 JS 错误处理方法或 JS 调试工具。
来源: http://www.phperz.com/article/17/0501/284398.html