修复控制台中报告的 JavaScript 错误

本文将引导你完成六个演示页，以演示如何解决控制台中报告的 JavaScript 错误。

控制台的第一次体验可能是脚本中的错误。

在新窗口或选项卡中打开 控制台工具中报告的演示网页 JavaScript 错误 。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

单击活动栏中的“控制台”按钮。 在 DevTools 中， 控制台 提供了有关错误的详细信息：

控制台中的许多错误消息在“Web”按钮上显示“搜索此消息”，显示为放大镜。 有关详细信息，请参阅 在 Web 中搜索控制台错误消息字符串。

此错误消息中的信息表明错误位于文件的第 16 error.html 行。

单击error.html:16控制台中错误消息右侧的链接。 “源”工具将打开并突出显示代码行，并显示以下错误：

脚本尝试获取文档中的第一个 h2 元素，并在其周围绘制红色边框。 但不存在任何 h2 元素，因此脚本失败。

控制台还会报告网络错误。

在新窗口或选项卡中打开 控制台中报告的演示网页“网络错误 ”。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

表显示 loading，但网页上没有任何更改，因为永远不会检索数据。 在 控制台中，发生了以下两个错误：

一个网络错误，以 HTTP 方法开头 GET ，后跟 URI。

错误 Uncaught (in promise) TypeError: data.forEach is not a function 。

单击发生错误的网页和代码行的链接，打开“源”工具。 也就是说，单击network-error.html:40控制台中的链接：

“ 源” 工具随即打开。 突出显示有问题的代码行，后跟 (errorx) 按钮。

单击 “错误 (x) ”按钮。 此时会显示消息 Failed to load resource: the server responded with a status of 404 () 。

此错误会通知你找不到请求的 URL。

打开 网络 工具，如下所示：打开 控制台，然后单击与错误关联的 URI。

未加载资源后，控制台会显示错误的 HTTP 状态代码：

网络工具显示有关失败请求的详细信息：

检查 网络 工具中的标头以获取更多见解：

问题出在哪里？ 两个斜杠字符 (//) 出现在请求的 URI 后面 repos。

打开 “源” 工具并检查第 26 行。 尾部斜杠字符 (/) 出现在基 URI 的末尾。 “源”工具显示包含错误的代码行：

接下来，当 控制台中没有错误时，我们将查看生成的页面。

在新窗口或选项卡中打开“ 修复了控制台”中报告的 “网络错误”演示网页。

没有任何错误的示例从 GitHub 加载信息并显示它：

使用防御性编码技术来避免以前的用户体验。 确保代码捕获错误并在 控制台中显示每个错误，如下所示：

在新窗口或选项卡中 ，在控制台和 UI 中打开“网络错误报告 ”演示网页。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

示例网页演示了以下做法：

向用户提供一个 UI，以指示出现问题。

在 控制台中，提供有关代码中的 网络 错误的有用信息。

该示例捕获并报告错误：

演示中的以下代码使用 handleErrors 方法（特别是 throw Error 行）捕获并报告错误：

除了上一 throw Error 部分中的示例，还可以在 控制台中创建不同的错误和跟踪问题。

若要在 控制台中显示两条创建的错误消息，请执行以下操作：

在新窗口或选项卡中打开“ 在控制台中创建错误报告和断言 ”演示页。

右键单击网页中的任意位置，然后选择“ 检查”。 或者，按 F12。 DevTools 将在网页旁边打开。

控制台中显示错误消息：

演示页使用以下代码：