Как просмотреть журналы браузера

Обновлено: 21.11.2024

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

Журнал сети Chrome

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

Нажмите на три точки в правом верхнем углу, чтобы открыть дополнительное меню.
Выберите «Дополнительные инструменты» > «Инструменты разработчика», чтобы открыть консоль.
Выберите вкладку "Сеть" и убедитесь, что установлен флажок "Сохранить журнал".
Вы увидите маленький красный кружок в левом верхнем углу консоли, указывающий на то, что идет запись. Если круг черный, нажмите на него, чтобы начать запись.
Воспроизведите проблему. Вы увидите, как данные собираются в окне консоли.
Нажмите на красный кружок, чтобы остановить запись после появления сообщения об ошибке.
Нажмите правой кнопкой мыши в списке загруженных записей и выберите «Сохранить как HAR с содержимым», чтобы загрузить выходной файл «.har».

Журнал консоли Chrome

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

Нажмите на три точки в правом верхнем углу, чтобы открыть дополнительное меню.
Выберите «Дополнительные инструменты» > «Инструменты разработчика», чтобы открыть консоль.
Выберите вкладку "Консоль" и убедитесь, что установлен флажок "Сохранить журнал".
Воспроизведите проблему. Вы увидите, как данные собираются в окне консоли.
Щелкните правой кнопкой мыши любой оператор журнала в окне консоли и выберите Сохранить как…, чтобы сохранить файл журнала на свой компьютер.

Журнал Chrome OS (локальный)

Этот журнал может фиксировать низкоуровневые проблемы с оборудованием и сетью, критические проблемы операционной системы и сбои ядра вне режима киоска в Chrome OS.

Когда вы сообщаете о проблеме в службу поддержки HappyFox, мы можем запросить снимок экрана консоли вашего веб-браузера и/или сетевых журналов для тщательного устранения проблемы 🛠.

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

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

Журналы консоли в Chrome:

В Google Chrome журналы консоли доступны как часть Chrome Dev Tools.

Чтобы открыть специальную панель консоли, выполните одно из следующих действий:

Нажмите Ctrl + Shift + J (Windows/Linux) или Cmd + Opt + J (Mac).

Вы также можете получить доступ к этой панели консоли из меню Chrome:

Найдите и нажмите на строку меню с тремя точками в правом верхнем углу браузера Chrome.
Перейдите в Дополнительные инструменты >> Инструменты разработчика.
Переключиться на вкладку "Консоль".

На вкладке "Консоль" вы можете найти текущие сообщения об ошибках (отображены красным) вместе с другой информацией уровня консоли, такой как предупреждения и информация.

Совет 💡. Если ваша ошибка/проблема связана с перемещением по нескольким страницам приложения, рекомендуется «Сохранить журнал». Это помогает сохранять сообщения об ошибках.

Сетевые журналы в Chrome:

Как правило, панель «Сеть» используется, когда вам нужно убедиться, что ресурсы загружаются или выгружаются должным образом. Откройте DevTools, нажав Control + Shift + I или Command + Option + I (Mac). Обновите содержимое веб-страницы.

Предупреждение❗️: важно открыть вкладку «Сеть», прежде чем выполнять какие-либо действия, приводящие к возникновению проблемы. Это делается для надлежащего сохранения данных сетевого трафика, одним из которых может быть ошибка. Либо перезагрузите страницу, чтобы начать получать журналы.

Поиск ошибки. Прокрутите сетевые журналы, чтобы найти записи, выделенные красным шрифтом, такие как приведенная ниже:

Нажмите на ошибку, чтобы просмотреть сведения об ошибке. Перемещайтесь по вкладкам «Заголовок», «Предварительный просмотр» и «Ответ», чтобы узнать больше об ошибке и ее происхождении. Вкладка заголовка может содержать важную информацию, связанную с ошибкой. Свяжитесь с назначенным представителем службы поддержки, чтобы узнать, какой информацией делиться.

Журналы консоли в FireFox

В Mozilla FireFox журналы консоли доступны как часть инструментов разработчика FireFox.

выберите «Веб-консоль» в подменю «Веб-разработчик» в меню Firefox (или в меню «Инструменты», если у вас отображается строка меню или вы работаете в Mac OS X)
или нажмите сочетание клавиш Ctrl+Shift+K (Command+Option+K в OS X).

Сетевые журналы в FireFox:

Нажмите Ctrl + Shift + E (Command + Option + E на Mac).
Выберите «Сеть» в меню «Веб-разработчик» (это подменю меню «Инструменты» в OS X и Linux).
Нажмите значок гаечного ключа на главной панели инструментов или в меню "Гамбургер", затем выберите "Сеть".

Предупреждение❗️: важно открыть вкладку «Сеть», прежде чем выполнять какие-либо действия, приводящие к возникновению проблемы. Это сделано для надлежащего сохранения данных о сетевом трафике, одним из которых может быть ошибка.

Поиск ошибки. Прокрутите сетевые журналы, чтобы найти записи с шрифтом "Розовый", например, приведенную ниже:

Нажмите на ошибку, чтобы просмотреть сведения об ошибке. Перемещайтесь по вкладкам «Заголовок», «Параметры» и «Ответ», чтобы узнать больше об ошибке и ее происхождении. Вкладка заголовка может содержать важную информацию, связанную с ошибкой. Свяжитесь с назначенным представителем службы поддержки, чтобы узнать, какой информацией делиться.

В браузере Safari консольные и сетевые журналы доступны как часть «Меню разработки». По умолчанию эти параметры отключены. Чтобы включить «Меню разработки»,

Запустите «Сафари».
Перейдите в Safari >> «Настройки» >> «Дополнительно» (из заголовка).
Включите параметр «Показывать меню «Разработка» в строке меню».

Журналы консоли в Safari:

После включения «Меню разработки» перейдите на нужную веб-страницу и нажмите «Разработка» >> «Показать консоль Javascript».

Сетевые журналы в Safari:

Открытие сетевого журнала:

Откройте консоль Safari JavaScript.
Перейдите на вкладку "Сеть".
Обновите веб-страницу.
Ошибки отображаются красным шрифтом. При нажатии на ошибку откроется область сведений. Информацию о критических ошибках можно найти в заголовке и на вкладках Предварительный просмотр.

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

Включить ведение журнала

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

Закройте все запущенные экземпляры Chrome.
Нажмите правой кнопкой мыши на ярлык Chrome.
Выберите свойства.
В конце строки Target: добавьте флаги командной строки: --enable-logging --v=1
С этим флагом примера это должно выглядеть так: chrome.exe --enable-logging --v=1
Нажмите "ПрименитьОК".
Запустите Chrome с помощью ярлыка.

Закройте все запущенные экземпляры Chrome.
Запустите терминальное приложение.
В терминале выполните команду:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1
Нажмите Enter.

Закройте все запущенные экземпляры Chrome.
Запустите эмулятор терминала.
В терминале запустите Chrome с флагом:
--enable-logging --v=1
Нажмите Enter.

Журналы отладки хранятся в каталоге данных пользователя как chrome_debug.log. Файл перезаписывается каждый раз при перезапуске Chrome. Итак, если у вас есть проблема с браузером, проверьте журнал перед перезапуском Chrome. Вы можете предотвратить перезапись файла, переместив его на рабочий стол.

Расположение каталога зависит от операционной системы. Дополнительные сведения см. в разделе Каталог данных пользователя.

Читать журналы

Инструменты, такие как Sawbuck для Microsoft® Windows® или Console для Apple® Mac® (расположенные в разделе Приложения > Утилиты > Консоль), могут помочь вам прочитать журналы и найти источник проблемы. Эти инструменты представляют журналы в графическом пользовательском интерфейсе, который можно легко просматривать, фильтровать и искать.

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

На что обращать внимание

Первое, что нужно найти в файле chrome_debug.log, — это ключевое слово ERROR. Однако, в зависимости от проблемы, это может быть не основной причиной.Например, если пользователь сообщает о чрезмерно длительном времени запуска, вы можете увидеть повторяющиеся строки в начале журнала отладки или большое количество идентификаторов процессов (PID) или идентификаторов потоков (TID).

Каждая строка файла журнала начинается в формате метки времени со следующими элементами:

Например: [7352:11760:0809/012714:VERBOSE1:resource_loader.cc(630)]

PROCESS_ID: идентификатор процесса, который выполняется в данный момент.

THREAD_ID: процесс внутри PID.

ММДД: текущий месяц и день. В приведенном выше примере это 9 августа.

ВРЕМЯ: Текущее время в 24-часовом формате ЧЧ:ММ:СС, что поможет вам сузить поиск до времени возникновения проблемы.

LOGGING_LEVEL: текущий уровень ведения журнала. Обычно это VERBOSE1, установленный в командной строке. Вы также можете увидеть вхождения ERROR.

SOURCE_CODE_FILE_NAME(LINE_NUMBER): имя файла исходного кода, вызвавшего регистрируемое событие.

В этом интерактивном руководстве показано, как регистрировать и фильтровать сообщения в консоли Chrome DevTools.

Рисунок 1. Сообщения в консоли.

Это руководство следует выполнять по порядку. Предполагается, что вы понимаете основы веб-разработки, например, как использовать JavaScript для добавления интерактивности на страницу.

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

Необязательно: переместите демонстрацию в отдельное окно.

Рис. 2. Это руководство слева и демонстрация справа.

Выделите демонстрацию, а затем нажмите клавиши Control + Shift + J или Command + Option + J (Mac), чтобы открыть DevTools. По умолчанию DevTools открывается справа от демонстрации.

Рис. 3. DevTools открывается справа от демонстрации.

Рис. 4. DevTools прикреплен к нижней части демонстрации.

Рис. 5. DevTools отстыкован в отдельном окне.

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

Нажмите кнопку "Информация о журнале" в демоверсии. Здравствуй, Консоль! регистрируется в консоли.

Рис. 6. Консоль после нажатия Log Info.

Рядом с надписью Hello, Console! сообщение в консоли нажмите log.js:2. Откроется панель «Источники», в которой будет выделена строка кода, из-за которой сообщение было записано в консоль. Сообщение было зарегистрировано, когда JavaScript страницы вызвал console.log('Hello, Console!') .

Рис. 7. DevTools открывает панель "Источники" после нажатия log.js:2.

Вернитесь в консоль, используя любой из следующих рабочих процессов:

Перейдите на вкладку "Консоль".
Нажимайте клавиши Control + [ или Command + [ (Mac), пока не будет выбрана панель консоли. , начните вводить Console , выберите команду Показать панель консоли и нажмите клавишу ВВОД .

Нажмите кнопку "Предупреждение журнала" в демонстрации. Откажитесь от надежды Все, кто входит, заходят в консоль. Сообщения в таком формате являются предупреждениями.

Рис. 8. Консоль после нажатия Log Warning.

Необязательно: нажмите log.js:12, чтобы просмотреть код, из-за которого сообщение было отформатировано таким образом, а затем вернитесь в консоль, когда закончите. Делайте это всякий раз, когда хотите увидеть код, из-за которого сообщение регистрируется определенным образом.

Нажмите значок «Развернуть» перед надписью «Оставить надежду всем входящим» . DevTools показывает трассировку стека до вызова.

Рисунок 9. Трассировка стека.

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

Нажмите Журнал ошибок. Регистрируется следующее сообщение об ошибке: Извините, Дэйв. Боюсь, я не могу этого сделать.

Рис. 10. Сообщение об ошибке.

Нажмите Таблица журнала. Таблица с известными художниками регистрируется в консоли. Обратите внимание, что столбец дня рождения заполняется только для одной строки. Проверьте код, чтобы понять, почему это так.

Рис. 11. Таблица в консоли.

Нажмите "Группа журналов". Имена 4 знаменитых черепах, борющихся с преступностью, сгруппированы под лейблом «Подростковые облученные черепахи-шпионы».

Рисунок 12. Группа сообщений в консоли.

Нажмите Пользовательский журнал. Сообщение с красной рамкой и синим фоном регистрируется в консоли.

Рис. 13. Сообщение с произвольным форматированием в консоли.

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

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

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

Нажмите "Причина 404". Браузер регистрирует сетевую ошибку 404, так как JavaScript страницы пытался получить несуществующий файл.

Рис. 14. Ошибка 404 в консоли.

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

Рис. 15. TypeError в консоли.

Щелкните раскрывающееся меню «Уровни журналов» и включите параметр «Подробный», если он отключен. Вы узнаете больше о фильтрации в следующем разделе. Вы должны сделать это, чтобы убедиться, что следующее сообщение, которое вы регистрируете, видно. Примечание. Если раскрывающийся список «Уровни по умолчанию» отключен, вам может потребоваться закрыть боковую панель консоли. Отфильтруйте по источнику сообщения ниже, чтобы получить дополнительную информацию о боковой панели консоли.

Рис. 16. Включение уровня подробного ведения журнала.

Нажмите «Причинить нарушение». Страница перестает отвечать на запросы на несколько секунд, а затем браузер записывает в консоль сообщение [Нарушение] 'click' обработчику потребовалось 3000 мс. Точная продолжительность может варьироваться.

Рис. 17. Нарушение в консоли.

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

Каждому методу консоли назначается уровень серьезности: Verbose , Info , Warning или Error . Например, консоль.log() — это сообщение уровня Info, тогда как console.error() — это сообщение уровня Error.

Нажмите раскрывающееся меню «Уровни журнала» и отключите «Ошибки». Уровень отключается, когда рядом с ним больше нет галочки. Сообщения об ошибке исчезнут.

Рис. 18. Отключение сообщений об ошибках в консоли.

Снова нажмите раскрывающееся меню «Уровни журнала» и снова включите «Ошибки». Снова появляются сообщения об ошибке.

Если вы хотите просматривать только сообщения, содержащие точную строку, введите эту строку в текстовое поле "Фильтр".

Введите Dave в текстовое поле Filter. Все сообщения, не содержащие строку Dave, скрыты. Вы также можете увидеть этикетку «Подростковые облученные черепахи-шпионы». Это ошибка.

Рис. 19. Фильтрация всех сообщений, не содержащих Дейва.

Удалить Дэйва из текстового поля "Фильтр". Все сообщения снова появляются.

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

Введите /^[AH]/ в текстовое поле «Фильтр». Введите этот шаблон в RegExr, чтобы понять, что он делает.

Рис. 20. Фильтрация всех сообщений, не соответствующих шаблону /^[AH]/ .

Удалите /^[AH]/ из текстового поля «Фильтр». Все сообщения снова видны.

Если вы хотите просмотреть только сообщения, пришедшие с определенного URL-адреса, используйте боковую панель.

Нажмите "Показать боковую панель консоли" .

Рис. 21. Боковая панель.

Нажмите значок "Развернуть" рядом с пунктом "12 сообщений". На боковой панели отображается список URL-адресов, по которым сообщения регистрируются. Например, log.js вызвал 11 сообщений.

Рис. 22. Просмотр источника сообщений на боковой панели.

Ранее, когда вы нажимали "Информация о журнале", запускался сценарий с именем console.log('Привет, консоль!') для записи сообщения в консоль. Подобные сообщения, зарегистрированные в JavaScript, называются сообщениями пользователя. Напротив, когда вы нажимали «Причина 404», браузер регистрировал сообщение уровня ошибки, в котором говорилось, что запрошенный ресурс не может быть найден. Подобные сообщения считаются сообщениями браузера. Вы можете использовать боковую панель, чтобы отфильтровать сообщения браузера и показывать только сообщения пользователей.

Нажмите 9 сообщений пользователя. Сообщения браузера скрыты.

Рис. 23. Фильтрация сообщений браузера.

Нажмите "12 сообщений", чтобы снова отобразить все сообщения.

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

Перейдите на вкладку "Элементы".

Нажмите Escape . Откроется вкладка Консоль ящика. Он имеет все функции панели консоли, которые вы использовали в этом руководстве.

Рис. 24. Вкладка "Консоль" в Drawer.

Поздравляем, вы завершили обучение. Нажмите «Выдать трофей», чтобы получить трофей.

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