将浏览器错误记录到控制台

大多数浏览器都附带内置的开发人员工具。这些工具通常都有控制台。控制台可以提当前运行页面的信息。

控制台中记录的消息来自构建页面的 Web 开发人员或浏览器。所有控制台消息都有一个严重性级别：Verbose、Info、Warning 或 Error。Error 消息表示页面中有需要解决的问题。

# Lighthouse 浏览器错误审核为何失败

Lighthouse 会标记记录到控制台的所有浏览器错误：

# 如何解决浏览器错误

解决 Lighthouse 报告的每个浏览器错误，确保页面对所有用户按预期运行。

Chrome DevTools 提供了一些可帮助您跟踪错误原因的工具：

• 在每个错误的文本下方，DevTools 控制台会显示导致有问题的代码执行的调用堆栈。
• 每个错误右上角的链接会显示导致错误的代码。

例如，下面的截屏显示了一个有两个错误的页面：

在上述示例中，第一个错误来自 Web 开发人员对 console.error() 的调用。第二个错误来自浏览器，指示页面脚本之一使用的一个变量不存在。

在每个错误的文本下方，DevTools 控制台会指示出现错误的调用堆栈。例如，对于第一个错误，控制台指示一个 (anonymous) 函数调用了 init 函数，而后者则调用了 doStuff 函数。单击 pen.js:9 链接可显示相关代码。

这样，您就可以查看每个错误的相关代码，从而识别和解决可能存在的问题。

如果您无法确定错误的原因，请尝试将错误文本输入搜索引擎。如果找不到问题的解决方案，请尝试在 Stack Overflow 上提问。

如果无法解决错误，请考虑将其包装在 try…catch 语句中，从而在代码中明确指出您已意识到此问题。要更好地处理错误，您还可以使用 catch 块。

# 资源

• 将浏览器错误记录到控制台审核的源代码
• 控制台概览
• 堆栈溢出
• try…catch