Skip to content
Learn Measure Blog Case studies About
On this page
  • How the Lighthouse browser error audit fails
  • How to fix browser errors
  • Resources

Browser errors were logged to the console

May 2, 2019 — Updated Aug 28, 2019
Available in: Español, 한국어, Português, 中文, English
Appears in: Best Practices audits
On this page
  • How the Lighthouse browser error audit fails
  • How to fix browser errors
  • Resources

Most browsers ship with built-in developer tools. These developer tools usually include a console. The console gives you information about the page that's currently running.

Messages logged in the console come from either the web developers who built the page or the browser itself. All console messages have a severity level: Verbose, Info, Warning, or Error. An Error message means there's a problem on your page that you need to resolve.

How the Lighthouse browser error audit fails #

Lighthouse flags all browser errors logged to the console:

Lighthouse audit showing browser errors in the console
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

How to fix browser errors #

Fix each browser error that Lighthouse reports to ensure that your page runs as expected for all your users.

Chrome DevTools includes a couple tools to help you track down the cause of errors:

  • Below the text of each error, the DevTools Console shows the call stack that caused the problematic code to execute.
  • A link at the top-right of each error shows you the code that caused the error.

For example, this screenshot shows a page with two errors:

An example of errors in the Chrome DevTools Console

In the example above, the first error comes from a web developer via a call to console.error(). The second error comes from the browser and indicates that a variable used in one of the page's scripts does not exist.

Below the text of each error, the DevTools Console indicates the call stack in which the error appears. For example, for the first error the Console indicates that an (anonymous) function called the init function, which called the doStuff function. Clicking the pen.js:9 link in the top-right of that error shows you the relevant code.

Reviewing the relevant code for each error in this way can help you identify and resolve possible problems.

If you can't figure out the cause of an error, try entering the error text into a search engine. If you can't find solutions to your problem, try asking a question on Stack Overflow.

If you can't fix an error, consider wrapping it in a try…catch statement to explicitly indicate in the code that you're aware of the issue. You can also use the catch block to handle the error more gracefully.

Resources #

  • Source code for Browser errors were logged to the console audit
  • Console Overview
  • Stack Overflow
  • try…catch
Last updated: Aug 28, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

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.