Ошибки консоли браузера

Обновлено: 21.11.2024

Консоль браузера аналогична веб-консоли, но применяется ко всему браузеру, а не к одной вкладке содержимого.

Поэтому он регистрирует ту же информацию, что и веб-консоль, — сетевые запросы, JavaScript, CSS, ошибки и предупреждения безопасности, а также сообщения, явно зарегистрированные с помощью кода JavaScript. Однако эта информация регистрируется не для одной вкладки контента, а для всех вкладок контента, дополнений и собственного кода браузера.

Если вы также хотите использовать другие инструменты веб-разработчика из обычной панели инструментов для Интернета с надстройкой или кодом браузера, рассмотрите возможность использования панели инструментов браузера.

Аналогичным образом вы можете выполнять выражения JavaScript с помощью консоли браузера. Но в то время как веб-консоль выполняет код в области окна страницы, консоль браузера выполняет их в области окна браузера Chrome. Это означает, что вы можете взаимодействовать со всеми вкладками браузера, используя глобальный параметр gBrowser, и даже с XUL, используемым для указания пользовательского интерфейса браузера.

Примечание. Командная строка консоли браузера (для выполнения выражений JavaScript) по умолчанию отключена. Чтобы включить его, установите для параметра devtools.chrome.enabled значение true в about:config или установите параметр «Включить наборы инструментов для отладки браузера Chrome и надстроек» (Firefox 40 и более поздние версии) в настройках инструмента разработчика.

Открытие консоли браузера

Вы можете открыть консоль браузера одним из двух способов:

из меню: выберите «Консоль браузера» в подменю «Веб-разработчик» в меню Firefox (или в меню «Инструменты», если у вас отображается строка меню или вы используете macOS).
с клавиатуры: нажмите Ctrl + Shift + J (или Cmd + Shift + J на Mac).

Вы также можете запустить консоль браузера, запустив Firefox из командной строки и передав аргумент -jsconsole:

Консоль браузера выглядит следующим образом:

Вы можете видеть, что консоль браузера выглядит и ведет себя очень похоже на веб-консоль:

большую часть окна занимает панель с сообщениями.
верхняя панель инструментов позволяет фильтровать отображаемые сообщения.
внизу интерпретатор командной строки позволяет вам оценивать выражения JavaScript.

Начиная с Firefox 68, консоль браузера позволяет отображать или скрывать сообщения из процесса обработки контента (т. е. сообщения из скриптов на всех открытых страницах), установив или сняв флажок «Показать сообщения контента». На следующем изображении показана консоль браузера, сфокусированная на той же странице, что и выше, после установки флажка «Показать сообщения о содержании».

Ведение журнала консоли браузера

Консоль браузера регистрирует те же типы сообщений, что и веб-консоль:

Однако он отображает такие сообщения от:

веб-контент, размещенный на всех вкладках браузера
собственный код браузера
дополнения

Сообщения от дополнений

В консоли браузера отображаются сообщения, зарегистрированные всеми надстройками Firefox.

Консоль.jsm

Чтобы использовать консольный API из традиционной или самозагружаемой надстройки, получите его из модуля консоли.

Один экспортированный символ из Console.jsm — это console . Ниже приведен пример доступа к нему, который добавляет сообщение в консоль браузера.

HUDService

Существует также служба HUDService, обеспечивающая доступ к консоли просмотра. Модуль доступен в Mozilla DXR. Мы видим, что можем получить доступ не только к консоли браузера, но и к веб-консоли.

Вот пример того, как очистить содержимое консоли браузера:

Если вы хотите получить доступ к содержимому документа консоли браузера, это можно сделать с помощью HUDService. В этом примере делается так, что когда вы наводите указатель мыши на кнопку «Очистить», консоль браузера очищается:

Доступны бонусные функции

Для надстроек Add-on SDK консольный API доступен автоматически. Вот пример надстройки, которая просто регистрирует ошибку, когда пользователь щелкает виджет:

Если вы создадите это как файл XPI, затем откроете консоль браузера, затем откроете файл XPI в Firefox и установите его, вы увидите виджет с надписью "Ошибка!" на панели дополнений:

Нажмите значок. Вы увидите такой вывод в консоли браузера:

Только для надстроек на основе Add-on SDK сообщение начинается с имени надстройки ("log-error"), что упрощает поиск всех сообщений от этой надстройки с помощью " Фильтр вывода" окно поиска. По умолчанию в консоль записываются только сообщения об ошибках, хотя это можно изменить в настройках браузера.

Командная строка консоли браузера

Командная строка консоли браузера по умолчанию отключена. Чтобы включить его, установите для параметра devtools.chrome.enabled значение true в about:config или установите параметр «Включить отладку Chrome» в настройках инструмента разработчика.

Как и веб-консоль, интерпретатор командной строки позволяет вам оценивать выражения JavaScript в режиме реального времени. Как и интерпретатор командной строки веб-консоли, эта командная строка поддерживает автозаполнение, историю и различные сочетания клавиш и вспомогательные команды. Если результатом команды является объект, вы можете щелкнуть объект, чтобы просмотреть сведения о нем.

Но в то время как веб-консоль выполняет код в области окна содержимого, к которому она прикреплена, консоль браузера выполняет код в области хромированного окна браузера. Вы можете подтвердить это, оценив window :

Это означает, что вы можете управлять браузером: открывать, закрывать вкладки и окна и изменять размещаемый в них контент, а также изменять пользовательский интерфейс браузера, создавая, изменяя и удаляя элементы XUL.

Управление браузером

Интерпретатор командной строки получает доступ к объекту tabbrowser через глобальный элемент gBrowser, что позволяет вам управлять браузером через командную строку. Попробуйте запустить этот код в командной строке консоли браузера (помните, что для отправки нескольких строк в консоль браузера используйте Shift + Enter ):

Он добавляет прослушиватель к событию загрузки текущей выбранной вкладки, которое поглощает новую страницу, а затем загружает новую страницу.

Примечание. Вы можете перезапустить браузер с помощью команды Ctrl + Alt + R (Windows, Linux) или Cmd + Alt + R (Mac). Эта команда перезапускает браузер с теми же вкладками, что и до перезапуска.

Изменение пользовательского интерфейса браузера

Поскольку глобальный объект окна — это окно браузера Chrome, вы также можете изменить пользовательский интерфейс браузера. В Windows следующий код добавит новый элемент в главное меню браузера:

В macOS этот аналогичный код добавит новый элемент в меню "Инструменты":

Yoast SEO все больше и больше полагается на JavaScript. Это позволяет плагину взаимодействовать с вашим администратором WordPress в режиме реального времени, например, для редактора сниппетов, SEO-анализа и анализа читабельности. Наличие отзывов о вашем контенте в режиме реального времени обеспечивает гораздо более плавную работу в Интернете. Итак, вы действительно хотите, чтобы это было на JavaScript!

Не знаете, почему вам следует перейти на Yoast SEO Premium? Просмотрите эту таблицу функций, чтобы быстро сравнить обе версии.

Ошибки JavaScript

К сожалению, не все в саду радужно. У JavaScript есть небольшой недостаток. Недостатком JavaScript является то, что одна ошибка может остановить работу всех скриптов на странице. Да, это означает, что другой плагин может сломать JavaScript Yoast SEO, и наоборот.

Как проверить общие ошибки JavaScript?

Если вы подозреваете, что проблема на вашем веб-сайте вызвана ошибкой JavaScript, есть простой способ это проверить. И он встроен в ваш браузер!

В зависимости от вашего браузера его название немного отличается, но вслед за Chrome и FireFox мы будем называть его «Консоль». У каждого браузера свой способ доступа к консоли, поэтому для получения подробных инструкций выберите свой браузер.

Как распознать ошибки JavaScript?

Хорошо, вы открыли консоль. Здорово! Теперь давайте посмотрим, есть ли ошибки JavaScript.

Используйте вкладку, с которой вы открыли консоль, чтобы перейти на страницу, которую хотите проверить, или, если вы уже находитесь на этой странице, перезагрузите ее.

Если ошибок нет, вы должны увидеть что-то вроде этого:

Если на странице есть ошибки, вы увидите красную линию. Например так:

Вы можете развернуть сообщение об ошибке в консоли, нажав черную стрелку. Затем он покажет что-то вроде этого:

Если вы обнаружили ошибку JavaScript, сделайте скриншот расширенной версии ошибки, чтобы приложить ее к отчету об ошибке.

В этой статье представлены шесть демонстрационных страниц, демонстрирующих устранение ошибок JavaScript, о которых сообщается в консоли.

Исправить ошибки JavaScript

Первое знакомство с консолью, скорее всего, будет связано с ошибками в сценариях.

Демонстрационная страница: сообщение об ошибке JavaScript в инструменте консоли

Откройте сообщение об ошибке JavaScript демонстрационной веб-страницы в инструменте консоли в новом окне или вкладке.

Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите «Проверить». Или нажмите F12. DevTools открывается рядом с веб-страницей.

В правом верхнем углу DevTools кнопка "Открыть консоль для просмотра ошибок" отображает ошибку, связанную с веб-страницей.

Нажмите кнопку Открыть консоль для просмотра ошибок в правом верхнем углу. В DevTools консоль предоставляет дополнительную информацию об ошибке:

Многие сообщения об ошибках в консоли имеют кнопку «Найти это сообщение в Интернете», которая отображается в виде увеличительного стекла. Эта функция появилась в Microsoft Edge версии 94. (Дополнительную информацию см. в разделе Поиск сообщений об ошибках в Интернете из консоли.)

Информация в этом сообщении об ошибке предполагает, что ошибка находится в строке 16 файла error.html.

Нажмите ссылку error.html:16 справа от сообщения об ошибке в консоли. Инструмент Sources откроется и выделит строку кода с ошибкой:

Сценарий пытается получить первый элемент h2 в документе и обвести его красной рамкой. Но элемента h2 не существует, поэтому скрипт не работает.

Поиск и устранение проблем с сетью

Консоль также сообщает о сетевых ошибках.

Демонстрационная страница: в консоли сообщается об ошибке сети

Откройте демонстрационную веб-страницу Ошибка сети, указанная в консоли, в новом окне или вкладке.

В таблице отображается загрузка , но на веб-странице ничего не меняется, поскольку данные никогда не извлекаются. В консоли произошли следующие две ошибки:

Неперехваченная (в промисе) ошибка типа: data.forEach не является ошибкой функции.

Нажмите ссылку на веб-страницу и строку кода, где возникает ошибка, чтобы открыть инструмент "Источники". То есть щелкните ссылку network-error.html:40 в консоли:

Откроется инструмент Источники. Проблемная строка кода будет выделена, а за ней появится кнопка ошибки ( x ).

Нажмите кнопку ошибки ( x ). Появляется сообщение Не удалось загрузить ресурс: сервер ответил со статусом 404 ().

Эта ошибка информирует вас о том, что запрошенный URL не найден.

Откройте инструмент "Сеть" следующим образом: откройте консоль и щелкните URI, связанный с ошибкой.

Инструмент "Сеть" отображает дополнительную информацию о неудачном запросе:

Просмотрите заголовки в инструменте "Сеть", чтобы получить больше информации:

В чем проблема? Два символа косой черты ( // ) встречаются в запрошенном URI после слова repos .

Откройте инструмент "Источники" и просмотрите строку 26. В конце базового URI стоит косая черта (/). Инструмент Sources отображает строку кода с ошибкой:

Просмотр результирующей страницы при отсутствии ошибок в консоли

Далее мы посмотрим на результирующую страницу, когда в консоли нет ошибок.

Демонстрационная страница: исправлена сетевая ошибка, сообщаемая в консоли

Открыть демонстрационную веб-страницу. Исправлена сетевая ошибка, сообщаемая в консоли в новом окне или вкладке.

Пример без ошибок загружает информацию с GitHub и отображает ее:

Демонстрационная страница: отчеты о сетевых ошибках в консоли и пользовательском интерфейсе

Используйте методы защитного кодирования, чтобы избежать предыдущего пользовательского опыта. Убедитесь, что ваш код перехватывает ошибки и отображает каждую ошибку в консоли следующим образом:

Откройте демонстрационную веб-страницу Отчеты об ошибках сети в консоли и пользовательском интерфейсе в новом окне или вкладке.

Пример веб-страницы демонстрирует эти методы:

Предоставьте пользователю пользовательский интерфейс, указывающий, что что-то пошло не так.

В консоли предоставьте полезную информацию о сетевой ошибке из вашего кода.

Пример перехватывает и сообщает об ошибках:

Следующий код в демонстрации перехватывает и сообщает об ошибках, используя метод handleErrors, в частности строку throw Error:

Создать ошибки и трассировки в консоли

Помимо примера с генерацией ошибки в предыдущем разделе, вы также можете создавать различные ошибки и отслеживать проблемы в консоли.

Демонстрационная страница: создание отчетов об ошибках и утверждений в консоли

Чтобы отобразить два созданных сообщения об ошибках в консоли:

Откройте демонстрационную страницу Создание отчетов об ошибках и утверждений в консоли в новом окне или вкладке.

В консоли появляются сообщения об ошибках:

На демонстрационной странице используется следующий код:

Есть три функции, которые последовательно запрашивают друг друга:

Каждая функция отправляет другой аргумент имени. В функции Third() вы проверяете, существует ли аргумент имени, и если нет, вы регистрируете ошибку, что имя не определено. Если имя определено, вы используете метод assert(), чтобы проверить, содержит ли аргумент имени менее восьми букв.

Вы запрашиваете функцию first() три раза со следующими параметрами:

Нет аргумента, запускающего метод console.error() в функции Third().

Термин Console в качестве параметра функции first() не вызывает ошибки, поскольку существует аргумент имени, который короче восьми букв.

Фраза Microsoft Edge Canary в качестве параметра функции first() приводит к тому, что метод console.assert() сообщает об ошибке, поскольку длина параметра превышает восемь букв.

В демонстрации используется метод console.assert() для создания условных отчетов об ошибках. Следующие два примера дают одинаковый результат, но в одном из них требуется дополнительный оператор if<>:

Вторая и третья строки кода выполняют один и тот же тест. Поскольку утверждение должно записывать отрицательный результат:

Вы проверяете x в случае if.
Вы проверяете x >= 40 для утверждения.

Демонстрационная страница: создание трассировок в консоли

Если вы не уверены, какая функция запрашивает другую функцию, используйте метод console.trace(), чтобы отслеживать, какие функции запрашиваются для перехода к текущей функции.

Чтобы отобразить трассировку в консоли:

Откройте демонстрационную страницу Создание трасс в консоли в новом окне или вкладке.

На странице используется этот код:

Результатом является трассировка, показывающая, что здесь() называется there() , а затем везде() , а во втором примере отображается, что она называется везде() .

Большинство браузеров поставляются со встроенными инструментами разработчика. Эти инструменты разработчика обычно включают консоль. Консоль предоставляет информацию о текущей странице.

Сообщения, зарегистрированные в консоли, исходят либо от веб-разработчиков, создавших страницу, либо от самого браузера. Все консольные сообщения имеют уровень серьезности: Verbose , Info , Warning или Error . Сообщение об ошибке означает, что на вашей странице возникла проблема, которую необходимо решить.

Lighthouse помечает все ошибки браузера, зарегистрированные в консоли:

Каждый аудит соответствия рекомендациям имеет одинаковый вес в рейтинге Lighthouse Best Practices Score. Подробнее читайте в рейтинге лучших практик.

Исправьте каждую ошибку браузера, о которой сообщает Lighthouse, чтобы убедиться, что ваша страница работает должным образом для всех ваших пользователей.

Chrome DevTools включает несколько инструментов, которые помогут вам отследить причину ошибок:

Под текстом каждой ошибки консоль DevTools показывает стек вызовов, вызвавший выполнение проблемного кода.
Ссылка в правом верхнем углу каждой ошибки показывает код, вызвавший ошибку.

Например, на этом снимке экрана показана страница с двумя ошибками:

В приведенном выше примере первая ошибка исходит от веб-разработчика через вызов console.error() . Вторая ошибка исходит от браузера и указывает на то, что переменная, используемая в одном из скриптов страницы, не существует.

Под текстом каждой ошибки консоль DevTools указывает стек вызовов, в котором появляется ошибка. Например, для первой ошибки Консоль указывает, что (анонимная) функция вызвала функцию инициализации, которая вызвала функцию doStuff. Если щелкнуть ссылку pen.js:9 в правом верхнем углу этой ошибки, вы увидите соответствующий код.

Просмотр соответствующего кода для каждой ошибки таким образом может помочь вам выявить и устранить возможные проблемы.

Если вы не можете понять причину ошибки, попробуйте ввести текст ошибки в поисковую систему. Если вы не можете найти решение своей проблемы, попробуйте задать вопрос на Stack Overflow.

Если вы не можете исправить ошибку, подумайте о том, чтобы обернуть ее оператором try…catch, чтобы явно указать в коде, что вы знаете о проблеме. Вы также можете использовать блок catch для более изящной обработки ошибки.

Читайте также: