chrome console的使用：异常和错误的处理

本文内容来自：chrome console的使用：异常和错误的处理 – Break易站

利用 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易站)