JavaScript错误处理-阿里云开发者社区

开发者社区> webmirror> 正文

JavaScript错误处理

简介: 我们在编写js过程中,难免会遇到一些代码错误问题需要找出来;有时怕因为js问题导致用户体验差,这里给出一些常见错误及解决方法
+关注继续查看

我们在编写js过程中,难免会遇到一些代码错误问题需要找出来;有时怕因为js问题导致用户体验差,这里给出一些常见错误及解决方法

错误分类

语法错误

也称为解析错误,发生在传统编程语言编译时,在JavaScript中发生在解释时,这些错误是由代码中的意外字符直接引起的,然后就不能直接编译/解释

eg:在一行代码因缺少右括号,产生了语法错误

发生语法错误时,就不能继续执行代码;在JavaScript中,只有在同一个线程中的代码会受语法错误的影响;在其他线程中的代码和其他外部引用的文件中的代码,如果不依赖于包含错误的代码,则可以继续执行

运行时错误

也称为异常(exception,在编译期/解释器后);此时,问题并不出在代码的语法上,而是尝试完成的一个操作,在某些情况下是非法的

eg:window.openMyFile();

因不存在openMyFile()方法,浏览器会返回一个异常;异常只影响发生的线程,其他JavaScript线程即可继续正常的执行

另外ECMA-262定义了7种错误类型:

1.Error 错误

2.EvalError 全局错误

3.RangeError 引用错误

4.ReferenceError 参数错误

5.SyntaxError 语法错误

6.TypeError 类型错误

7.URIError 编码错误

其中Error是基类型,其他类型继承自它。Error类型很少见,一般由浏览器抛出。EvalError类型表示全局函数eval()的使用方式与定义不同时抛出,但实际上并不能产生这个错误,所以实际上碰到的可能性不大。在使用encodeURI()和decodeURI()时,如果URI格式不正确时,会导致URIError错误。但因为URI的兼容性非常强,导致这种错误几乎见不到

处理错误

浏览器自身具有报错的功能。以IE为例,出错时会弹出错误调试框。但这需要开启脚本调试,设置方法为:工具->Internet Options选项->高级->禁用脚本调试,取消勾选即可。其它浏览器大同小异

onerror事件处理函数

它是第一个用来协助JavaScript处理错误的机制;页面上出现异常时,error事件便在window对象上触发

<script type="text/javascript">
    window.onerror = function() {
        alert("发生错误!");
    }
</script>
<body onload="fuction1()"></body>         

在上述代码中,在页面载入时尝试调用不存在的函数,此时会引发一个异常,弹出“发生错误”的错误信息;但浏览器的错误信息也显示出来了,如何在浏览器上隐藏它呢,只需onerror方法返回一个true即可

window.onerror = function() {
    alert(“发生错误!”);
    return true;
}       

取出错误信息

onerror处理函数提供了三种信息来确定错误确切的性质:

1.错误信息——对于给定错误,浏览器会显示同样的信息;

2.URL——在哪个文件中发生了错误;行号——给定URL中发生错误的行号

window.onerror = function(sMessage, sUrl, sLine) {
    alert("发生错误!\n" + sMessage + "\nURL:" + sUrl + "\nLine Number:" + sLine);
    return true;
}      

图像载入错误

window对象并非唯一支持onerror事件处理函数的对象,它对图像对象也提供支持;当一个图像由于文件不存在等原因未能成功载入时,error事件便在这个图像上触发

<img src=”amigo.jpg” onerror=”alert(‘载入图片时发生错误')”/>      

上例直接在HTML中分配onerror事件处理函数。当然也可以通过脚本来分配事件处理函数,在设置图像的src特性前,必须等待页面完全载入

<script type="text/javascript">
    function handleLoad() {
        document.images[0].onerror = function() {
            alert("载入图片时发生错误!");
        };
        document.images[0].src = "amigo.jpg";
    }
</script>
<img/>

注意:与window对象的onerror事件处理函数不同,image的onerror事件可接收任何的额外信息的参数

处理语法错误

onerror还能处理语法错误。但有一点必须注意,事件处理函数必须是页面中第一个出现的代码,因为如果语法错误出现在设置事件处理函数之前出现,事件处理函数就没有用了

注意:语法错误会完全停止代码的执行

说明:使用onerror事件处理函数的主要的问题是,它是BOM的一部分,所以,没有任何标准能控制它的行为。因此,不同的浏览器使用这个事件处理错误的方式有明显的不同

eg:在IE中发生error事件时,正常的代码会继续执行,所有的变量和数据都保留下来,并可通过onerror事件处理函数访问。在Mozilla中,正常的代码执行都会结束,同时所有的错误发生之前的变量和数据都被销毁

try…catch语句

try 语句测试代码块的错误

catch 语句处理错误

throw 语句创建自定义错误

ECMPScript第三版,引入了try…catch语句

try {                                           //尝试着执行 try 包含的代码  
     window.abcdefg();                          //不存在的方法  
} catch (e) {                                   //如果有错误,执行 catch,e 是异常对象  
     alert('发生错误啦,错误信息为:' + e);    //直接打印调用 toString()方法  
}  

ECMAScript标准在try…catch语句中只能有一个catch语句,因为JavaScript是弱类型的语言,没办法指明catch子句中异常的特定类型。不管错误是什么类型,都由同一个catch语句处理。一般不建议使用try-catch,因为它比一般语句消耗资源更多,负担更大。所以在万不得已,无法修改代码,不能通过普通判断的情况下才去使用try-catch

finally子句

try {  
     window.abcdefg();  
} catch (e) {  
     alert('发生错误啦,错误信息为:' + e.stack);  
} finally {                                            //总是会被执行  
     alert('我都会执行!');  
}         

finally用于包含无论是否有异常发生都要执行的代码,这对关闭打开的链接和释放资源很有用,一般是为了防止出现异常后,无法往下再执行的备用

嵌套try…catch语句

用来处理catch子句中的错误问题

try {
    eval("a ++ b");
} catch(oException) {
    alert("发生错误!");
    try {
      var aError = new Array(1000000000000000000000000000000000000000);
} catch(exception) {
      alert("在catch子句中发生错误!");
}
} finally{
       alert("已完成")
}

抛出异常的throw语句

使用catch来处理错误信息,如果处理不了,我们就把它抛出丢掉;把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息

在ECMAScript第三版引入,用于有目的的抛出异常,抛出的错误对象可为字符串、数字、布尔值或实际的对象,也可以抛出Error对象(其构造函数只有一个,即错误信息)。eg1: throw new Error(“错误产生!”);

function addTwoNumber(a, b) {
    if (arguments.length < 2) {
        throw new Error("需要传入两个数字!");
    }
}
try {
    result = addTwoNumber(90);
} catch(oException) {
    if (oException instanceof SyntaxError) {
        alert("SyntaxError:" + oException.message);
    } else if (oException instanceof Error){
        alert(oException.message);
    }
} 

Error对象

发生错误时,JavaScript有个Error基类用于抛出。它有两个特性:

1.name——表示错误类型的字符串

2.message——实际的错误信息

Error对象的name对应于它的类,可以是如下值之一:

EvalError:错误发生在eval()函数中;

RangeError:数字值超出JavaScript可表示的范围;

ReferenceError:使用了非法的引用;

SyntaxError:在eval()函数调用中发生了语法错误,其他的愈发错误由浏览器报告,无法通过try…catch处理

TypeError:变量的类型不是预期所需的;

URIError:在encodeURI或decodeURI函数发生了错误

判断错误类型

可采取如下两种方法来判断错误类型,第一种根据异常的name属性判断

try {
    eval("a ++ b");
} catch(oException) {
    if (oException.name = "SyntaxError") {
    alert("发生SyntaxError!");
} else {
    alert("发生其他错误!");
}
} 

第二种采用instanceof操作符

try {
    eval("a ++ b");
} catch(oException) {
    if (oException instanceof SyntaxError) {
        alert("发生SyntaxError!");
    } else {
        alert("发生其他错误!");
    }
} 

调试错误:

在JavaScript初期,浏览器并没有针对JavaScript提供调试工具,所以开发人员就想出了一套自己的调试方法,比如alert()。但使用alert()来调试错误比较麻烦,需要重复剪切和粘贴,如果遗忘掉没有删掉用于调试的alert()将特别头疼,现在我们有更好的调试方法

将消息记录到控制台

console.error('错误!');    //红色带叉  
console.info('信息!');     //白色带信息号  
console.log('日志!');     //白色  
console.warn('警告!');    //黄色带感叹号         
var num1 = 1;  
console.log(typeof num1);    //得到 num1 的类型  
var num2 = 'b';  
console.log(typeof num2);   //得到 num2 的类型  
var result = num1 + num2;  
alert(result);              //结果是 1b,匪夷所思         

与alert()比较:因为alert()会阻断后面代码的执行,看过之后还要删,删完估计一会儿又忘了。如果用了congsole.log的话,所有要调试的变量一目了然,也不需要删除,放着也没事

调试工具

浏览器都自带了自己的调试工具,而开发人员只习惯了Firefox一种,所以很多情况下,在Firefox开发调试,然后去其他浏览器做兼容。其实Firebug工具提供了一种Web版的调试工具:Firebug lite

调试步骤

1、设置断点

2、单步调试:五个按钮

重新运行:重新单步调试

断继:正常执行代码

单步进入:一步一步执行流程

单步跳过:跳到下一个函数块

单步退出:跳出执行到内部的函数

3、监控

4、控制台

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript框架设计》——1.6 无冲突处理
本节书摘来自异步社区《JavaScript框架设计》一书中的第1章,第1.6节,作者:司徒正美 更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.6 无冲突处理 无冲突处理也叫多库共存。不得不说,$是最重要的函数名,这么多框架都爱用它做自己的命名空间。
1249 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10090 0
Fundebug:JavaScript插件支持错误采样
Fundebug的付费套餐主要是根据错误事件数制定的,这是因为每一个发送到我们服务器的事件,都会消耗一定的CPU、内存、磁盘以及带宽资源,尤其当错误事件数非常大时,会对我们的计算资源造成很大压力。 如果您希望采样收集错误,比如“只收集30%的错误”,可以将sampleRate属性设为0.3。
502 0
前端常见bug系列4: JavaScript中忘记类型转换所导致的条件判断错误举例
### 一、忘记类型转换的小数比较错误 举个例子,我们要进行一个字符串型的小数的比较:`'8.8'>'8.7'`,结果自然是true。 那么`'8.8'>'8.10'`呢?结果仍然是true,但愿你没有将它误以为是`8.8>8.10`。 ### 二、忘记类型转换的版本号比较错误 类似上面的问题,在进行版本号比较时,一样存在。比如,我们这么比较`'8.8.1'>'8.10.
1617 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
《面向对象的思考过程(原书第4版)》一3.2 错误处理
首次编写一个类时总想让它完美无缺。但在大多数情况下,事情却往往不是我们想象的那样。开发人员不预先处理错误,会将程序置于危险之中。 假如想在代码中加入识别错误和处理错误的能力,有好几种方式。在《Java Primer Plus》(9781571690623?)一书的第223页,Tyma、Torok和Downing指出在程序中有三种基本的解决方案来处理发现的问题:修复问题、通过压制来忽略问题,或以合适的方式退出运行时。
1305 0
+关注
webmirror
Good good study, day day up
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载