Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • Lighthouse 浏览器错误审核为何失败
  • 资源

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

May 2, 2019 — 更新日期 Aug 28, 2019
Available in: Español, 한국어, Português, English
Appears in: 最佳做法审核
本页内容
  • Lighthouse 浏览器错误审核为何失败
  • 资源

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

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

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

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

显示控制台中的浏览器错误的 Lighthouse 审核
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

如何解决浏览器错误 #

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

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

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

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

Chrome DevTools 控制台中的错误示例

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

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

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

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

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

资源 #

  • 将浏览器错误记录到控制台审核的源代码
  • 控制台概览
  • 堆栈溢出
  • try…catch
Last updated: Aug 28, 2019 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.