Большинство браузеров поставляются со встроенными инструментами разработчика. Эти инструменты разработчика обычно включают в себя консоль . Консоль предоставляет вам информацию о странице, которая работает в данный момент.
Сообщения, регистрируемые в консоли, исходят либо от веб-разработчиков, создавших страницу, либо от самого браузера. Все сообщения консоли имеют уровень серьезности: Verbose
, Info
, Warning
или Error
. Сообщение Error
означает, что на вашей странице возникла проблема, которую необходимо устранить.
Как не удается выполнить аудит ошибок браузера Lighthouse
Lighthouse отмечает все ошибки браузера, регистрируемые в консоли:
![Аудит Lighthouse, показывающий ошибки браузера в консоли](https://cdn.statically.io/img/developer.chrome.google.cn/static/docs/lighthouse/best-practices/errors-in-console/image/lighthouse-audit-showing-b4a861a271e52.png?hl=ru)
Как исправить ошибки браузера
Исправьте каждую ошибку браузера, о которой сообщает Lighthouse, чтобы ваша страница работала должным образом для ��сех ваших пользователей.
Chrome DevTools включает в себя несколько инструментов, которые помогут вам отследить причины ошибок:
- Под текстом каждой ошибки консоль DevTools показывает стек вызовов , вызвавший выполнение проблемного кода.
- Ссылка в правом верхнем углу каждой ошибки показывает код, вызвавший ошибку.
Например, на этом снимке экрана показана страница с двумя ошибками:
![Пример ошибок в консоли Chrome DevTools](https://cdn.statically.io/img/developer.chrome.google.cn/static/docs/lighthouse/best-practices/errors-in-console/image/an-example-errors-the-c-d48e7c6d104cf.png?hl=ru)
В этом примере первая ошибка исходит от веб-разработчика при вызове console.error()
. Вторая ошибка исходит от браузера и указывает на то, что переменная, используемая в одном из скриптов страницы, не существует.
Под текстом каждой ошибки консоль DevTools указывает стек вызовов, в котором появляется ошибка. Например, для первой ошибки консоль указывает, что (anonymous)
функция вызывает функцию init
, которая вызывает функцию doStuff
. Щелкнув ссылку pen.js:9
в правом верхнем углу этой ошибки, вы увидите соответствующий код.
Просмотр соответствующего кода для каждой ошибки таким образом может помочь вам выявить и устранить возможные проблемы.
Если вы не можете выяснить причину ошибки, попробуйте ввести текст ошибки в поисковик. Если вы не можете найти решение своей проблемы, попробуйте задать вопрос на Stack Overflow .
Если вы не можете исправить ошибку, подумайте о том, чтобы обернуть ее в оператор try…catch
, чтобы явно указать в коде, что вы знаете о проблеме. Вы также можете использовать блок catch
для более изящной обработки ошибки.