26.错误处理与调试-CSDN博客

本文链接：https://blog.csdn.net/qq_28683541/article/details/126958074

错误处理与调试

学习要点：

浏览器错误报告
错误处理
错误事件
错误处理策略
调试技术
调试工具

JavaScript在错误处理调试上一直就是软肋，如果脚本出错，给出的提示经常也让人摸不着头脑。ECMAScript第3版为了解决这个问题引入了try...catch和throw语句以及一些错误类型，让开发人员更加适时的处理错误。

一、浏览器错误报告

随着浏览器的不断升级，Javascript代码的调试能力也逐渐变强。IE、Firefox、Safari、Chrome和Opera等浏览器，都具备报告Javascript错误的机制。只不过，浏览器一般面向的是普通用户，默认情况下会隐藏此类信息。

IE：在默认情况下，左下角会出现错误报告，双击这个图标，可以看到错误消息对话框。如果开启禁止脚本调试，那么出错的时候，会弹出错误调试框。设置方法为：工具---->Internet Options选项----->高级----->禁用脚本调试，取消勾选即可。

Firefox：在默认情况下，错误不会通过浏览器给出提示。但在后台的错误控制台可以查看。查看方法为：工具----->[Web开发者]----->Web控制台|错误控制台。除了浏览器自带的，开发人员为Firefox提供了一个强大的插件：Firebug，他不但可以提示错误，还可以调试Javascript和CSS、DOM、网络连接错误等。

Safari：在默认情况下，错误不会通过浏览器给出提示。所以我们需要开启它。查看方法为：显示菜单栏----->编辑------>偏好设置----->高级----->在菜单栏中显示开发----->显示Web检查器|显示错误控制器。

Opera：在默认情况下，错误会被隐藏，打开错误记录的方式：显示菜单栏----->查看----->开发者工具----->错误控制台。

Chrome：在默认情况下，错误会被隐藏。打开错误记录的方法为：工具----->Javascript控制台

二、错误处理

良好的错误处理机制可以及时的提醒用户，知道发生了什么事，而不会惊慌失措。为此，作为开发人员，我们必须理解在处理Javascript错误的时候，都有哪些手段和工具可以利用。

try-catch语句

ECMA262第3版引入了try-catch语句，作为Javascript中处理异常的一种标准方式。

try{ //尝试着执行try包含的代码

window.adcdefg(); //不存在的方法

}catch(e){ //如果有错误，执行catch，e是异常对象

alert('发生错误啦，错误信息为：'+e); //直接打印调用toString()方法

}

在e对象中，ECMA-262还规定了两个属性： message和name，分别打印出信息和名称。

alert('错误名称：'+ e.name);

alert('错误名称：' + e.message);

PS:Opera9之前的版本不支持这个属性。并且IE提供了和message完全相同的description属性、还添加了number属性提示内部错误的数量。irefox提供了fileName(文件名)、lineNumber(错误行号)和stack(栈跟踪信息)。Safari添加了line(行号)、sourceId(内部错误代码)和sourceURL(内部错误URL)。所以，要跨浏览器使用，那么最好只使用通用的message。

finally子句

finally子句作为try-catch的可选语句，不管是否发生异常处理，都会执行，并且不管try或者catch里包含return语句，也不会阻止finally执行。

try{

window.abcdefg();

}catch(e){

alert('发生错误啦，错误信息为：'+e.stack);

}finally{

alert('我都会执行！');

}

PS:finally的作用一般是为了防止出现异常后，无法往下再执行的备用，也就是如果有一些清理操作，那么出现异常后就执行不到清理操作，那么可以把这些清理操作放到finally里即可。

错误类型

执行代码时可能发生的错误有很多种。每种错误都有对应的错误类型，ECMA-262定义了7中错误类型：

Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URLError

其中，Error是基类型(其他六种类型的父类型)，其他类型继承自它，Error类型很少见一般由浏览器抛出的，这个基类型主要用于开发人员抛出自定义错误。

PS：抛出的意思，就是当前错误无法处理，丢给另外一个人，比如丢一个错误对象。

new Array(-5); //抛出RangeError(范围)

错误信息：RangeError：invalid array length(无效的数组长度)

PS：RangeError错误一般在数组超出相应范围时触发

var box = a; //抛出ReferenceError(引用)

错误信息：ReferenceError:a is not defined(a是没有定义的)

PS：ReferenceError通常访问不存在的变量产生这种错误

a$b; //抛出SyntaxError(语法)

错误信息：SyntaxError: missing ; before statement(失踪；语句之前)

PS：SyntaxError通常是语法错误导致的

new 10; //抛出TypeError(类型)

错误信息：TypeError:10 is not a constructor(10 不是一个构造函数)

PS：TypeError通常是类型不匹配导致

PS：EvalError类型表示全局函数eval()的使用方式与定义的不同时抛出，但实际上并不能产生这个错误，所以实际上碰到的可能性不大。

alert(encodeURL('征程'));

利用不同的错误类型，可以更加恰当的给出错误信息或处理。

try{

new 10;

}catch(e){

if(e instanceof TypeError){ //如果时类型错误，那就执行这里

alert('发生了类型错误，错误信息为：'+e.massage);

}else{

alert('发生了未知错误！');

}

善用try-catch

在明明知道某个地方会产生错误，可以通过修改代码来解决这个地方，是不适合用try-catch的。或者是那种不同浏览器兼容性错误导致错误的也不太适合，因为可以通过判断浏览器或者判断这款浏览器是否存在此属性和方法解决。

try{

var box = document.getElementById('box'); //单词大小写错误，导致类型错误

}catch(e){ //这种情况没必要try-catch

alert(e);

}

try{

alert(inner Width);

}catch(e){

alert(document.documentElement.clientWidth); //兼容IE

}

PS：常规错误和这种浏览器兼容错误，我们都不建议使用try-catch。因为常规错误可以修改代码即可解决，浏览器兼容错误可以通过if判断即可。并且try-catch比一般语句消耗资源更多，负担更大。所以，在万不得已，无法修改代码，不能通过普通判断的情况下才去使用try-catch，比如后面的Ajax技术。

抛出错误

使用catch来处理错误信息，如果处理不了，我们就把它抛出丢掉。抛出错误，其实就是在浏览器显示一个错误信息，只不过，错误信息可以自定义，更加精确和具体。

try{

new 10;

}catch(e){

if(e.instanceof TypeError){

throw new TypeError('实例化的类型导致错误！'); //直接中文解释错误信息

}else{

throw new Error('抛出未知错误');

}

PS：IE浏览器只支持Error抛出的错误，其他错误类型不支持。

三、错误事件

error事件是当某个DOM对象产生错误的时候触发。

addEvent(window , 'error' , function(){

alert('发生错误！');

});

new 10; //写在后面

四、错误处理策略

由于JavaScript错误都可以导致网页无法使用，所以合适搞清及为什么发生错误至关重要。这样。我们才能对此采取正确的应对方案。

常见的错误类型

因为JavaScript是松散弱类型语言，很多错误的产生是在运行期间的。一般来说，需要关注3种错误：

类型转换错误
数据类型错误
通信错误

这三种错误一般会在特定的模式下或者没有对值进行充分检查的情况下发生。

类型转换错误

在一些判断比较的时候，比如数组比较，有相等和全等两种：

alert(1=='1'); //true

alert(1==='1'); //false

alert(1==true); //true

alert(1===true); //false

PS：由于这个特性，我们建议在这种会类型转换的判断，强烈推荐使用全等，以保证判断的正确性。

var box = 10; //可以试试0

if(box){ //判断box是number类型即可

alert(box);

}

PS：typeof box == 'number'这里也是用的相等，没有用全等？原因是typeof box本身返回的就是类型的字符串，右边也是字符串，那没必要验证类型，所以相等就够了。

数据类型错误

由于JavaScript是弱类型语言，在使用变量和传递参数之前，不会对它们进行比较来确保数据类型的正确。所以，这样开发人员必须需要靠自己区检测。

function getQueryString(url){ //传递了非字符串导致错误

var pos = url.indexOf("？");

return pos;

}

alert(getQueryString(1));

PS：为了避免这种错误的出现，我们应该使用类型比较。

function getQueryString(url){

if(typeof url == 'string'){ //判断了指定类型，就不会出错了

var pos = url.indexof("?");

return pos;

}

alert(getQueryString(1));

对于传递参数除了限制数字、字符串之外，我们对数组也要进行限制。

function sortArray(arr){

if(arr){ //只判断布尔值远远不够

alert(arr.sort());

}

var box = [3,5,1];

sortArray(box);

PS：只用if(arr)判断布尔值，那么数值、字符串、对象等都会自动转换为true，而这些类型调用sort()方法比如会产生错误，这里提一下：空数组会自动转换成true而非false。

function sortArray(arr){

if(typeof arr.sort == 'function'){ //判断传递过来的arr是否有sort方法

alert(arr.sort()); //就算这个绕过去了

alert(arr.reverse()); //这个就算又绕过去了

}

var box = { //创建一个自定义对象，添加sort方法

sort : function(){}

};

sortArray(box);

PS：这段代码本意就是判断arr是否有sort方法，因为只有数组有sort方法，从而判断arr是数组。但忘记了，自定义对象添加了sort方法就可以绕过这个判断，且arr还不是数组。

function sortArray(arr){

if(arr instanceof Array){ //使用instanceof判断Array最为合适

alert(arr.sort());

}

var box = [3,5,1];

sortArray(box);

通信错误

在使用url进行参数传递时，经常会传递一些中文名为参数或URL地址，在后台处理是会发生转换代码或错误，因为不同的浏览器对传递的参数解释是不同的，所以有必要使用编码进行统一传递。

比如：?user = 征程 & age = 23;

var url = '?user=' + encodeURLComponent('征程') + '&age=23'; //编码

PS：在AJAX章节我们会继续探讨通信错误和编码问题

五、调试错误

在JavaScript初期，浏览器并没有针对JavaScript提供调试工具，所以开发人员就想出了一套自己的调试方式，比如alert()。这个方法可以打印你怀疑的是否得到相应的值，或者放在程序的某处来看看是否能执行，得知之前的代码无误。

var num1 = 1;

var num2 = b;

var result = num1 + num2;

alert(result);

PS：使用alert('')来调试错误比较麻烦，重要裁剪和粘贴alert('')，如果遗忘掉没有删掉用于调试的alert('')特别头疼，所以我们现在需要更好的调试方法。

将消息记录到控制台

IE8、Firefox、Oprea、Chrome和Safari都有JavaScript控制台，可以用来查看JavaScript错误。对于Firefox，需要安装Firebug，其实浏览器直接使用console对象写入消息即可。

方法名	说明
error(message)	将错误消息记录控制台
info(message)	将信息性消息记录到控制台
log(message)	将一般消息记录到控制台
warn(message)	将警告消息记录到控制台

console.error('错误'); //红色带叉

console.info('信息'); //白色带信号号

console.log('日志'); //白色

console.warn('警告'); //黄色带感叹号

PS：这里以Firefox为标准，其他浏览器会稍有差异

var num1 = 1;

console.log(typeof num1); //得到num1的类型

var num2 = 'b';

console.log(typeof num2); //得到num2的类型

var result = num1 + num2;

alert(result); //结果是1b，匪夷所思

PS：我们误把num2赋值成字符串了，其实应该是数值，导致最后的结果是1b。那么传统调试就必须使用alert(typeof num1)来看看是不是数值类型，比较麻烦，因为alert()会阻断后面的执行，看过之后还要删，删完估计一会又忘了，然后又要alert(typeof num1)来加深印象，如果用来console.log的话，所有的调试的变量一目了然，也不需要删除，放着也没有事。

将错误抛出

之前已经将结果错误的抛出，这里不在赘述。

if(typeof num2 != 'number') throw new Error('变量必须是数值');