javascript错误处理与调试

    本文主要介绍javascript中一些常见的错误,以及一些用于调试和处理错误的基础,以帮助我们提高javascript代码的质量.

 

先说下javascript中常见的7种错误:

 

1.变量未定义

下面的语句将隐式的创建一个新的变量abc,并将值123赋给该变量:

<span style="font-size:24px;">abc = 123;</span>

严格的讲,应该显式的定义该变量:

<span style="font-size:24px;">var abc = 123;</span>

(实际上,是否使用var关键字与变量的作用域有关,因此最好在定义变量时都加上var关键字)

但是,如果使用一个未定义的变量,将产生错误.例如,如果变量abc事先没有显式或隐式的定义,下面语句将产生错误:

<span style="font-size:24px;">alert(abc);</span>

2.大小写敏感

大小写错误是最常见的错误之一,但有时是很难发现的.例如,找出下面语句的三处错误:

<span style="font-size:24px;">var myName ="Paul";
If(myName=="paul") {
    alert(myName.toUppercase());
}<span style="font-family: 宋体; background-color: rgb(255, 255, 255);"> </span></span>

3.不匹配的大括号

4.不匹配的小括号

(上面两个错误类似的,当语句过长时就会发生,当然这些也是很容易发现的.)

 

5.连接字符串时缺少加号(+)

这种错误当语句短时发现很容易,但是长了就会非常麻烦,而且不同的浏览器报错提醒是不一样的.对于IE浏览器,提示"Error:Expected(缺少对象)",而对Firefox浏览器,则提示"Missing;before statement(在下列语句中缺少;)".

 

6.赋值而不是相等

看下面的代码:

var myNumber = 99;
if (myNumber=101) {
    alert("myNumber is 101");
}
else {
    alert("myNumber is"+myNumber);
}

看完上述代码,你是不是想else的字句中的alert()方法将会执行,并提示我们"myNumber is 99"?但事实并非如此.if语句判断中错误的将两个等号(==)写成了一个(=),将比较运算符(==)写成了赋值运算符(=).这是一个非常典型的错误.javascriptvb不同,对于vb,赋值操作和比较运算都是一个等号.这个错误不会产生错误信息,从而非常容易被忽视.我们要记住的是,当程序的逻辑出现混乱和异常时,可以检查下是不是这里出了问题.

补充:

//相等和全等
alert(1 =='1');                        //true,相等对的是值,类型不用比较
alert(1 ==='1');                        //false,全等还需要比较类型
 
alert(1 ==true);                //true,1会隐式转换为布尔值,true== true
alert(1 ===true);                //false,1本身是数值,true本身是布尔值

PS:在类型不相等的情况下,建议使用全等 ===

 

 

7.将方法误认为属性,或者将属性误认为方法

这里常犯的就是在使用方法时忘记在方法名后带一对圆括号,或者在使用属性时,在属性名后带上多余的圆括号.例如,下面的代码:

var nowDate = new Date;
alert(nowDate.getDay);

第一行中,使用了Date对象的构造函数,该构造函数式Date对象的一个简单方法,但是,方法名后却没有一对圆括号;第二行中,调用了Date对象的getDay()方法,却忘记一

对圆括号.

正确代码如下:

var nowDate = new Date();
alert(nowDate.getDay());

错误处理

1.try...catch语句

try...catch语句总是成对出现的

try-catch的意义

1.可以通过修改代码来排错的,不需要使用try-catch

2.浏览器兼容性问题,可以通过判断浏览器或者判断是否支持某个属性或方法来判断,不需要try-catch

 

比如,无法修改代码的情况下,可能会发生错误,这个时候用try-catch,网络中断了

 

try {
alert(innerWidth);                        //W3C
}catch (e) {
alert(document.documentElement.clientWidth);                        //IE
}

PS:这样的确能实现兼容性问题,但逻辑上是不正确的.因为innerWidth不支持的浏览器,可能不一定是IE.

 

//抛出错误,说明我们自己无法解决,就需要把错误报出

 

try {
new10;
} catch (e) {
if (einstanceof TypeError) {
thrownew TypeError('类型错误:实例化new的时候,可能产生了错误!');
} else{
//alert(e);                        //这种行为叫做处理错误,浏览器不抱错了,因为处理掉了,屏蔽了错误显示
thrownew Error('未知错误!');
}
}
 
new10;                        //浏览器自己抛出了错误
 
addEvent(window, 'error',function () {
alert('程序发生错误了!');
});
 

脚本调试器

计算机生成了可选文字: IE:在默认情况卜,左下角会出现错误报告,双击这个图标,可以看到错误消息对话框。如果开启禁止脚本调试,那么出错的时候,会弹出错误调试框。设置方法为:工具一>IntemetOPtions选项一>高级一>禁用脚本调试,取消勾选即可。Firefox:在默认情况卜,错误不会通过浏览器给出提示。但在后台的错误控制台可以查看。查看方法为:工具一>[Web开发者]一>Web控制台}错误控制台。除了浏览器自带的,开发人员为Firefox提供了一个强大的插件:Firebug。它不但可以提示错误,还可以调试JavascriPt和CSS、DOM、网络链接错误等。Safari:在默认情况下,错误不会通过浏览器给出提示。所以,我们需要开启它。查看方法为:显示菜单栏一>编辑一>偏好设置一>高级一>在菜单栏中显示开发一>显示web检查器}显示错误控制器。Opera:在默认情况卜,错误会被隐藏起来。打开错误记录的方式为:显示菜单栏一>查看一>开发者_!:具一>错误控制台。Chrome:在默认情况卜,错误会被隐藏起来。打开错误记录的方法为:工具一习avascriPt控制台。


评论 57
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值