利用chromeconsole修复异常和错误的方法

利用 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的示例：