JS本身是动态语言，因此人们普遍认为它是一种最难于调试的编程语言。脚本出错时，由于没有上下文信息，让人摸不着头脑，ECMAScript 第 3 版致力于解决这个问题，专门引入了try-catch和throw等语句以及一些错误类型，意在让开发人员能够适当地处理错误，提升开发效率
浏览器错误提示
- IE
发生JS错误时，浏览器左下角会出现一个黄色的图标，双击这个图标，就会看到一个包含错误消息的对话框，其中还包含诸如行号、字符数、错误代码及文件名等相关信息
- Firefox & Chrome & Opera
发生JS错误时，浏览器不会给出提示，你必须进入到控制台，查看错误信息。控制台显示错误消息、引发错误的 URL 和错误所在的行号等信息。单击文件名即可以只读方式打开发生错误的脚本，发生错误的代码行会突出显示
- Safari
Safari在默认情况下都会隐藏全部JS错误信息，你必须启用开发者菜单才能查看这些信息
错误处理 - 自带语法
- try-catch语句
try
{
// 可能会导致错误的代码
// try块中的任何代码发生了错误，就会立即退出代码执行过程，然后接着执行捕获
// 此时catch块会接收到一个包含错误信息的对象
// throw语句抛出错误信息
throw new Error(’error message’)
}
catch(error)
{
// 在错误发生时怎么处理
console.log(error.message) // message是所以浏览器都支持的属性，推荐使用
// 不同浏览器增加了不同的error属性
- IE 添加了与 message 属性完全相同的 description 属性，还添加了保存 着内部错误数量的number属性
- Firefox添加了fileName、lineNumber和stack(包含栈跟踪信息) 属性
- Safari添加line(表示行号)、sourceId(表示内部错误代码)和sourceURL属性
}
- finally
try
{
// 可能会导致错误的代码
}
catch(error)
{
// 错误处理语句
}
finally
{
// 必定执行语句，不受try & catch操作的影响，最终结果以它为准
}
- window.onerror()
// 当JS监控到错误发生的时候触发该方法
注：只要发生错误，无论是不是浏览器生成的，都会触发error事件，并执行这个事件处理
程序。然后，浏览器默认的机制发挥作用，像往常一样显示出错误消息。像下面这样在
事件处理程序中返回false,可以阻止浏览器报告错误的默认行为。
window.onerror = function(message, source, lineno, colno, error) {
console.log(’...’);
return false;
}
错误处理 - 单元测试框架
几个常见的前端单元测试框架，这边简单介绍Jest，其它也有许多优秀的框架这边就不做过多概述了
其它优秀框架：Mocha/Jasmine/AVA/Tape等
- Jest（会专门整理一篇文章）
优点
- 较好的支持React（facebook开发）
- 基于 Jasmine 至今已经做了大量修改添加了很多特性
- 开箱即用配置少，API简单
- 支持断言和仿真，支持快照测试
- 在隔离环境下测试
- 互动模式选择要测试的模块
- 优雅的测试覆盖率报告，基于Istanbul
- 智能并行测试，全局环境支持
- 拥有功能强大的模拟库
- Typescript兼容
举个简单的例子
- 新建一个js文件，测试
function total(a,b){
return a+b;
}
- 再次新建一个js文件，并引入我们刚才创建js文件
const total = require(’./total’);
// test()函数来描述一个测试用例
test(’testName’, () => {
expect(total(1, 2)).toBe(3); // toBe("通过条件")
});
- 配置脚本，执行npm run test，显示测试成果
通过则显示成功结果，不通过则显示当前返回结果和预期返回结果
错误类型
- Error
基础错误类型，其它错误类型都继承于该类型
- EvalError
EvalError 类型的错误会在使用 eval()函数而发生异常时被抛出 new eval(); //抛出EvalError eval = foo; //抛出EvalError
- RangeError
RangeError 类型的错误会在数值超出相应范围时触发
- ReferenceError
访问不存在的变量时，就会发生这种错误
- SyntaxError
当我们把语法错误的 JavaScript 字符串传入 eval()函数时，就会导致此类错误
- TypeError
在变量中保存着意外的类型时，或者在访问不存在的 方法时，都会导致这种错误。错误的原因虽然多种多样，但归根结底还是由于在执行特定于类型的操作 时，变量的类型并不符合要求所致。
- URIError
在使用 encodeURI()或 decodeURI()，而 URI 格式不正确时，就会导致 URIError 错误
总结
没有人的代码是完美无缺的，在编码过程中错误是相对难以避免的，那么当问题出现的时候我们怎么去比较好的发现它，并解决它就成了一个首当其冲的问题了。从原生代码层次我们可以通过try-catch和window.onerror和单元测试框架来使得我们代码更具鲁棒性，提升开发效率
参考资料
参考资料：JavaScript高级程序设计