在一般情况下我们代码报错啥的都会觉得 下图
然后现在来说下经常用的异常
1.try catch
这个是比较常见的异常捕获方式通常都是
try,catch的几个特点:
- 无法捕捉到语法错误,只能捕捉运行时错误;
- 可以拿到出错的信息,堆栈,出错的文件、行号、列号;
- 需要借助工具把所有的function块以及文件块加入try,catch,可以在这个阶段打入更多的静态信息。
2.window.onerror
除了try catch还有window.onerror, onerror提供了全局监听异常的功能:
window.onerror的几个特点:
- 可以捕捉语法错误,也可以捕捉运行时错误;
- 可以拿到出错的信息,堆栈,出错的文件、行号、列号;
- 只要在当前页面执行的js脚本出错都会捕捉到,例如:浏览器插件的javascript、或者flash抛出的异常等。
- 跨域的资源需要特殊头部支持。
3.sourceMap
部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度。然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真。这时就需要SourceMap来还原真实的出错位置了。
Source Map是一个JSON文件,其中包含了代码转换前后的位置信息。给定一个转换之后的压缩代码的位置,就可以通过Source Map获取转换之前的代码位置,反过来也一样。
Source Map真正神奇之处在于mappings属性,它记录了位置是如何对应的。JavaScript Source Map 详解里面已经有很好的解释了,就不多说了
如果要在chrome里面使用的话需要一些简单的配置