Chrome浏览器使用Console调试(三)

     异常和错误处理

      Chrome DevTools提供了在javascript中抛出异常和调试错误信息帮助你来修正web页面.

      页面异常和js错误实际上相当有用--你能获取它们背后的详细信息.当一个页面抛出异常或者一个脚本产生错误时,控制台提供了详细的,可依赖的信息帮你定位和纠正问题.

      在控制台你可以追踪异常和追踪执行路径,明确地或者隐含地捕获它们(或者忽略它们),甚至设置错误处理自动收集和处理异常数据

      追踪异常

      当问题出现时,打开DevTools的console(Ctrl+Shift+J /Cmd+Option+J)查看js错误信息.每一条信息有一个链接,你可以查看到它在这个文件中的所在的行

      一个异常的例子:

 

      查看异常栈追踪

      引导错误的执行路径不是总是明显.完整的Js调用栈在控制台会伴随着异常.展开这些控制台信息可以看到堆栈帧,并且可以在代码里查看到相应的位置.

      

 

     在js异常上暂停

在你的应用中,下一步一个异常就要被抛出来了,此时暂停Js执行,检查它的调用栈,作用域变量,状态等.在脚本面板的底部有一个暂停按钮

 使你可以切换不同的异常模式,可以选择一个暂停的异常或者未捕获的异常或者你忽略异常的(直译)

 

      打印堆栈跟踪

通过打印日志信息到console上能够更好的理解你的页面的表现行为.让日志信息包含相关的堆栈跟踪让其更有用.有几种方式来做:

       Error.stack

       每一个错误对象有一个字符串属性名字叫做stack,它包含了堆栈跟踪

      

 

        console.trace()

        在你的代码里写入console.trace()调用打印当前js调用栈. 

 

          console.assert()

         在代码里放置断言,将错误条件作为第一个参数放进console.assert().当这个表达式执行为false,你会看到相对应的控制台记录:

         

 

         如何检测对战跟踪找到触发点

         让我们使用你学到的工具来找一个错误的真正原因.看下面的HTML页面包含两个scripts

 

  

          用户在页面上点击时,P段落会改变它的内部文本信息,调用由lib.js提供的callLibMethod()方法

方法打印一个console.log,之后调用console.slog,这不是console提供的API,这会产生一个错误.

当页面运行,并且在页面进行了点击,错误就会被触发

 

           点击箭头能够展开错误信息:

 

 

           控制台会显示错误在lib.js的第四行,它是由script.js中的addEventListener方法中的回调方法调用的,该方法在第三行.

          这是一个非常简单的例子,但即便是最复杂的日志跟踪调试也是相同的步骤.

         使用window.onerror处理运行时异常

         Chrome暴露了window.onerror的处理方法,在js代码执行时,在任何时候出现error,都会被调用.在window的上下文中

无论何时一个js异常被抛出来,并且没有被try/catch代码块捕获.这个异常信息

按顺序传递 异常信息,被抛出来有文件的URL,文件中的代码所在行三个参数进去.

          你会发现设置一个error的处理器用来收集未捕获的异常信息很有用,比如用一个ajax post的调用给后台服务报告它.

使用这种方式,你能够在用户浏览器中记录出现的错误日志,并且能够被它们提醒.

        使用window.onerror的例子: