控制台记录了浏览器错误

大多数浏览器都内置了开发者工具。这些开发者工具通常包含一个控制台。控制台会为您提供当前正在运行的页面的相关信息。

控制台中记录的消息来自构建页面的 Web 开发者,或浏览器本身。所有控制台消息都有严重级别:VerboseInfoWarningErrorError 消息表示您的网页存在问题,您需要解决。

Lighthouse 浏览器错误审核如何失败

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

显示控制台中的浏览器错误的 Lighthouse 审核日志

如何修复浏览器错误

请修正 Lighthouse 报告的每个浏览器错误,以确保您的网页能按预期面向所有用户运行。

Chrome 开发者工具包含几种工具,可帮助您查明错误原因:

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

例如,以下屏幕截图显示了一个包含两个错误的网页:

Chrome 开发者工具控制台中的错误示例

在此示例中,第一个错误来自 Web 开发者对 console.error() 的调用。第二个错误来自浏览器,表示网页其中一个脚本中使用的变量不存在。

在每个错误的文本下方,开发者工具控制台会指示出现错误的调用堆栈。例如,对于第一个错误,控制台会指示 (anonymous) 函数调用了 init 函数,而该函数调用了 doStuff 函数。点击该错误右上角的 pen.js:9 链接可向您显示相关代码。

以这种方式查看每个错误的相关代码有助于您发现和解决可能的问题。

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

如果您无法修复某个错误,不妨考虑将其封装在 try…catch 语句中,以在代码中明确指出您知道该问题。您还可以使用 catch 代码块更妥善地处理错误。

资源