异常和错误处理
Chrome DevTools提供了在javascript中抛出异常和调试错误信息帮助你来修正web页面.
页面异常和js错误实际上相当有用--你能获取它们背后的详细信息.当一个页面抛出异常或者一个脚本产生错误时,控制台提供了详细的,可依赖的信息帮你定位和纠正问题.
在控制台你可以追踪异常和追踪执行路径,明确地或者隐含地捕获它们(或者忽略它们),甚至设置错误处理自动收集和处理异常数据
追踪异常
当问题出现时,打开DevTools的console(Ctrl+Shift+J /Cmd+Option+J)查看js错误信息.每一条信息有一个链接,你可以查看到它在这个文件中的所在的行
一个异常的例子:
![](https://i-blog.csdnimg.cn/blog_migrate/b6e0673cba909ce342c75ea16ac31591.jpeg)
查看异常栈追踪
引导错误的执行路径不是总是明显.
完整的Js调用栈在控制台会伴随着异常.
展开这些控制台信息可以看到堆栈帧,
并且可以在代码里查看到相应的位置.
![](https://i-blog.csdnimg.cn/blog_migrate/1639b40da9287ad20e53f25b317f19bd.jpeg)
在js异常上暂停
在你的应用中,下一步一个异常就要被抛出来了,此时暂停Js执行,检查它的调用栈,作用域变量,状态等.在脚本面板的底部有一个暂停按钮
使你可以切换不同的异常模式,可以选择一个暂停的异常或者未捕获的异常或者你忽略异常的(直译)
![](https://i-blog.csdnimg.cn/blog_migrate/871b648e251c5f5a8e73eb43fe127d5b.png)
使你可以切换不同的异常模式,可以选择一个暂停的异常或者未捕获的异常或者你忽略异常的(直译)
![](https://i-blog.csdnimg.cn/blog_migrate/5fcc63a2ce3a06f1b1e37d55f8cb0cdc.jpeg)
打印堆栈跟踪
通过打印日志信息到console上能够更好的理解你的页面的表现行为.让日志信息包含相关的堆栈跟踪让其更有用.有几种方式来做:
Error.stack
每一个错误对象有一个字符串属性名字叫做stack,它包含了堆栈跟踪
![](https://i-blog.csdnimg.cn/blog_migrate/3cf6a0c9eac44a5d251ee502cde107ba.jpeg)
console.trace()
在你的代码里写入console.trace()调用打印当前js调用栈.
![](https://i-blog.csdnimg.cn/blog_migrate/c6f3ec83671145e4d4b6cd4794e3ab74.jpeg)
console.assert()
在代码里放置断言,将错误条件作为第一个参数放进console.assert().当这个表达式执行为false,你会看到相对应的控制台记录:
![](https://i-blog.csdnimg.cn/blog_migrate/cd59dd0b4366726604ed20668540ad71.jpeg)
如何检测对战跟踪找到触发点
让我们使用你学到的工具来找一个错误的真正原因.看下面的HTML页面包含两个scripts
![](https://i-blog.csdnimg.cn/blog_migrate/637d168998e50879a12f838afb3a6fc1.png)
用户在页面上点击时,P段落会改变它的内部文本信息,调用由lib.js提供的callLibMethod()方法
方法打印一个console.log,之后调用console.slog,这不是console提供的API,这会产生一个错误.
当页面运行,并且在页面进行了点击,错误就会被触发
![](https://i-blog.csdnimg.cn/blog_migrate/52e8acd2d857c32fd7ee51ddfa9c5414.png)
点击箭头能够展开错误信息:
![](https://i-blog.csdnimg.cn/blog_migrate/7afc8f7b5b7177e8162444d8c43d4f10.png)
控制台会显示错误在lib.js的第四行,它是由script.js中的addEventListener方法中的回调方法调用的,该方法在第三行.
这是一个非常简单的例子,但即便是最复杂的日志跟踪调试也是相同的步骤.
使用window.onerror处理运行时异常
Chrome暴露了window.onerror的处理方法,在js代码执行时,在任何时候出现error,都会被调用.在window的上下文中
无论何时一个js异常被抛出来,并且没有被try/catch代码块捕获.这个异常信息
按顺序传递 异常信息,被抛出来有文件的URL,
文件中的代码所在行三个参数进去.
你会发现设置一个error的处理器用来
收集未捕获的异常信息很有用,比如
用一个ajax post的调用给后台服务报告它.
使用这种方式,你能够在用户浏览器中记录
出现的错误日志,并且能够被它们提醒.
使用window.onerror的例子:
![](https://i-blog.csdnimg.cn/blog_migrate/70442133e50e3019136ca8556360e4de.jpeg)