在程序开发中难免会遇到一些错误,在成千上万的代码中去寻找错误非常明显相当于大海捞针。为此,每种计算机编程语言都要它独特的一套错误处理与调试机制。当然,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选项->高级->禁用脚本调试。取消勾选就可以。其他浏览器大同小异。

良好的错误处理机制能够及时提醒用户,知道发生了什么,而不会惊慌失措,为此,作为开发者,必须理解在处理JavaScript错误的时候,都有哪些手段和工具能够利用。

try-catch语句。

样例:

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

能够通过改动代码解决或浏览器兼容错误。不建议使用try-catch,由于它比一般语句消耗资源很多其它,负担更大。所以在万不得已,无法改动代码,不能通过普通推断的情况下才去使用try-catch。

finally子句

样例:

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

finally的作用通常是为了防止出现异常后。无法往下再运行的备用。

抛出错误

使用catch来处理错误信息。假设处理不了,我们就把它抛出丢掉。

样例:

try {
     new 10;
} catch (e) {
if (e instanceof TypeError) {
throw new TypeError('实例化的类型导致错误! '); //直接中文解释错误信息
} else {
<span style="white-space:pre"> </span>throw new Error('抛出未知错误! ');
}
}

调试错误:



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

将消息记录到控制台

样例:

1、

console.error('错误!

');    //红色带叉
console.info('信息。'); //白色带信息号
console.log('日志!'); //白色
console.warn('警告。'); //黄色带感叹号

2、

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、单步调试:五个button

又一次执行:又一次单步调试

断继:正常运行代码

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

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

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

3、监控

4、控制台

小结:

错误处理与调试在之前VB,C++,C#,VB.NET中都有一定的学习和了解。

但知识点却非常分散。

在JavaScript中对其有了一个宏观和细节上全面的把控,对其有了更深的印象。

知识是要一遍遍学习的。从陌生到熟悉再到精通,是一个循序渐进的过程。错误处理与调试机制学习了这么久,再往后就能够灵活地将它应用于各个项目和系统。





JS 错误处理与调试的更多相关文章

  1. js错误处理和调试

    1.重点关注函数和可能导致函数执行失败的因素. 2.抛出错误和使用try-catch的时机:一般来说在应用程序架构较低的层次中经常会抛出错误.这个层次并不会影响当前执行的代码. 错误也得不到真正的处理 ...

  2. 第一百二十三节,JavaScript错误处理与调试

    JavaScript错误处理与调试 学习要点: 1.浏览器错误报告 2.错误处理 3.错误事件 4.错误处理策略 5.调试技术 6.调试工具 JavaScript在错误处理调试上一直是它的软肋,如果脚 ...

  3. Node.js在Chrome进行调试

    在开发node.js环境时候,调试是一件很疼苦的事情,不过随着时代不断发展,先如今已经有很多种node环境代码调试方式,今天我就笔记一下我使用的方式 node-inspector: node-insp ...

  4. 在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure

    [题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...

  5. angular js 自定义js错误处理(Angularjs js error handler)

    使用AngularJS的时候,对JS错误如何自定义处理?(比如用Google Analytics记录angularjs使用中出现的js错误) AngularJS自带一个错误处理service:$exc ...

  6. 17. javacript高级程序设计-错误处理与调试

    1. 错误处理与调试 l 在可能发生错误的地方使用try-catch方法,可以对错误进行及时的相应 l 使用window.onerror事件处理程序,这种方式可以接受try-catch不能处理的所有错 ...

  7. win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

  8. 捕获JS 错误日志

    最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url,  ...

  9. JQuery validate 在IE兼容模式下出现 js错误(成员找不到)的修正:

    JQuery validate 在IE兼容模式下 下出现 js错误(成员找不到)的修正: // Add novalidate tag if HTML5. //this.attr( "nova ...

随机推荐

  1. 【SPOJ Query on a tree 】 (树链剖分)

    http://acm.hust.edu.cn/vjudge/problem/13013 题意: 有一棵N个节点的树(1<=N<=10000),N-1条边,边的编号为1~N-1,每条边有一个 ...

  2. 【BZOJ 1901】【ZJU 2112】Dynamic Rankings

    http://www.lydsy.com/JudgeOnline/problem.php?id=1901 重新用整体二分写了一下. 整体二分的思想详见论文. 貌似带修区间k大和静态区间k大都是\(O( ...

  3. JZYZOJ1536 [haoi2014]走出金字塔

    http://172.20.6.3/Problem_Show.asp?id=1536 确实不难,找规律的题,开始想复杂了,分了好多情况.开始为省几个变量加了一大堆max,min,abs代码一下子复杂太 ...

  4. BZOJ 2342 [Shoi2011]双倍回文(manacher+并查集)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2342 [题目大意] 记Wr为W串的倒置,求最长的形如WWrWWr的串的长度. [题解] ...

  5. 【分块】【树套树】bzoj2141 排队

    考虑暴力更新的情况,设swap的是L,R位置的数.swap之后的逆序对数应该等于:之前的逆序对数+[L+1,R-1]中比 L位置的数 大的数的个数-[L+1,R-1]中比 L位置的数 小的数的个数-[ ...

  6. 【枚举+贪心】POJ2718-Smallest Difference

    [题目大意] 按升序输出几个不同的数字,任意组成两个数字,输出最小的差值. [思路] 虽然是在穷竭搜索的章节里找到的题目,但是我觉得不需要穷竭搜索,枚举一下就可以了,0MS.分为一下三种情况: (1) ...

  7. [转]currentStyle和getComputedStyle的兼容写法

    currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...

  8. Matlab中如何读取.dat文件

    处理movielens1M数据集 中间有个双冒号,直接用load的只读取第一列,这时候我们可以用dlmread(中间是l不是i),如下图,只需要提取1 3 5列就好了.

  9. [译]SQL数据库迁移:从低版到高版本

    我见过太多的数据库管理员花大量的时间在数据库迁移上,即便在客户的实际环境亦是如此.由于微软频繁的发布新版,基于业务和客户的要求,应用服务不得不同时升级.当然,还有许多用户仍在使用SQL Server ...

  10. Openshift中Configmap的使用

    先基于外部镜像构建一个deployment ericdeMacBook-Pro:nginx ericnie$ oc --allow-missing-images --name=nginx-demo - ...