利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试错误。
如果您可以了解背后的详细信息,页面异常和 JavaScript 错误会非常有用。在页面引发异常或脚本产生错误时,Console 可以提供具体、可靠的信息来帮助您定位和纠正问题。
在控制台中,您可以跟踪异常和引发异常的执行路径,显式或隐式捕捉异常(或忽略它们),甚至设置错误处理程序来自动收集和处理异常数据。
这篇文章主要讲以下几个内容:
- 触发异常时启用 Pause on Exceptions 来调试代码上下文。
- 使用trace 打印当前的 JavaScript 调用堆栈。
- 使用assert() 在您的代码中放置断言和引发异常。
- 使用onerror 记录浏览器中发生的错误。
跟踪异常
发生错误时,请打开 DevTools 控制台 (Ctrl+Shift+J / Cmd+Option+J) 查看 JavaScript 错误消息。每一条消息都有一个指向文件名的链接,文件名带有您可以导航到文件的行号。
异常示例:
视图异常堆叠追踪
导致错误的执行路径并不总是非常明显。完整的 JavaScript 调用堆栈在控制台中会伴随着异常。展开这些控制台消息可以查看堆栈框架和导航到代码中的相应位置:
出现 JavaScript 异常时暂停
下一次引发异常时,请暂停 JavaScript 执行并检查其调用堆栈、范围变量以及您应用的状态。利用 Scripts 面板底部的三态停止按钮,您可以在不同的异常处理模式之间切换:
选择暂停所有异常或仅暂停未捕捉的异常,您也可以集中忽略异常。
打印堆叠追踪
通过将日志消息输出到控制台可更好地了解网页的行为。通过包含关联的堆叠追踪让日志条目的信息更丰富。有多种方式可以实现此目标。
Error.stack
每个 Error 对象都有一个包含堆叠追踪的字符串属性命名的堆栈:
console.trace()
使用可以打印当前 JavaScript 调用跟踪的 console.trace() 调用设置您的代码:
console.assert()
通过将带有错误条件的 console.assert() 作为第一个参数调用,在您的 JavaScript 代码中放置断言。当此表达式评估为 false 时,您将看到一条相应的 Console 记录:
如何检查堆叠追踪来查找触发器
我们来看一下如何使用刚刚学习的工具,并找出错误的真正原因。下面是一个包含两个脚本的简单 HTML 页面:
当用户点击页面时,段落将更改其内部文本,将调用 lib.js 提供的 callLibMethod() 函数。
此函数会输出一个 console.log,然后调用 console.slog,后者不是一种由 Console API 提供的方法。调用应触发一个错误。
在页面运行的时候点击页面时,将触发下面的错误:
点击箭头可以展开错误消息:
控制台会告诉您错误在 lib.js 的第 4 行触发,此脚本在 addEventListener 回调(匿名函数)的 script.js中的第 3 行调用。
这是一个非常简单的示例,不过,即使最复杂的日志跟踪调试也遵循相同的流程。
使用 window.onerror 处理运行时异常
Chrome 会公开 window.onerror 处理程序函数,每当 JavaScript 代码执行中发生错误时都会调用此函数。当 JavaScript 异常每次在窗口上下文中引发并且未被 try/catch 块捕捉时,调用此函数时还会调用异常的消息、引发异常的文件的网址、该文件中的行号,三者按照此顺序作为三个参数传递。
举例来说,使用 AJAX POST 调用设置一个错误处理程序,用于收集未捕捉异常的相关信息并将其报告回服务器,您会发现这样非常实用。这样,您可以记录用户浏览器中发生的所有错误并获得相关通知。
使用 window.onerror 的示例:
本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站
—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)