Как найти логи браузера

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

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

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

Google Chrome

Для просмотра лога ошибок браузера в Google Chrome нужно выполнить следующие шаги:

1. Откройте браузер Google Chrome и нажмите на иконку «Меню» (три вертикальные точки), расположенную в правом верхнем углу экрана.

2. Наведите курсор мыши на пункт меню «Инструменты» и выберите «Разработчик».

3. В выпадающем меню выберите «Инструменты разработчика», или можно вызвать данное окно, нажав сочетание клавиш Ctrl+Shift+I (Windows) или Command+Option+I (Mac).

4. В открывшемся окне нажмите на вкладку «Console».

5. Лог ошибок браузера будет отображен в этой вкладке.

Mozilla Firefox

Чтобы посмотреть лог ошибок браузера в Mozilla Firefox, следуйте инструкциям:

1. Откройте браузер Mozilla Firefox и нажмите на иконку «Меню» (три горизонтальные линии), расположенную в правом верхнем углу экрана.

2. Наведите курсор мыши на пункт меню «Web-разработка» и выберите «Консоль разработчика».

3. Для вызова консоли разработчика можно также использовать сочетание клавиш Ctrl+Shift+K (Windows) или Command+Option+K (Mac).

4. В открывшемся окне нажмите на вкладку «Консоль».

5. Лог ошибок браузера будет отображен в этой вкладке.

Microsoft Edge

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

1. Откройте браузер Microsoft Edge и нажмите на иконку «Меню и настройки» (три горизонтальные точки), расположенную в верхнем правом углу экрана.

2. Наведите курсор мыши на пункт меню «Система» и выберите «Отладка Microsoft Edge».

3. В открывшемся окне нажмите на вкладку «Консоль».

4. Лог ошибок браузера будет отображен в этой вкладке.

Apple Safari

Для просмотра лога ошибок браузера в Apple Safari нужно выполнить следующие шаги:

1. Откройте браузер Apple Safari и выберите пункт меню «Разработка» в меню строчки заголовка.

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

3. В выпадающем меню выберите «Открыть консоль».

4. В открывшемся окне можно увидеть лог ошибок браузера.

Opera

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

1. Откройте браузер Opera и выберите пункт меню «Настройки» в правом верхнем углу экрана.

2. Наведите курсор мыши на пункт меню «Разработка» и выберите «Консоль».

3. Для вызова консоли разработчика можно также использовать сочетание клавиш Ctrl+Shift+I (Windows) или Command+Option+I (Mac).

4. Лог ошибок браузера будет отображен в этой вкладке.

Итак, мы рассмотрели способы просмотра логов ошибок в Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari и Opera. Эта информация может быть полезна для тех, кто занимается web-разработкой, но также полезна для пользователей, которые хотят понимать причины возникающих проблем при использовании веб-ресурсов в Интернете.

Журналы отладки браузера Chrome помогают при устранении неполадок, например при зависании вкладок. Журналы не создаются автоматически, поэтому сначала нужно включить ведение журналов.

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

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

Windows

1. Выйдите из браузера Chrome.
2. Нажмите правой кнопкой на ярлык Chrome.
3. Выберите Свойства.
4. В конце строки Target: добавьте следующие параметры командной строки: --enable-logging --v=1
   В результате строка должна выглядеть вот так: chrome.exe --enable-logging --v=1
5. Нажмите Применить OK.
6. Запустите Chrome, дважды нажав на ярлык.

macOS

1. Выйдите из браузера Chrome.
2. Откройте приложение «Терминал».
3. Выполните следующую команду:
   /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --enable-logging --v=1
4. Нажмите Ввод.

Linux

1. Выйдите из браузера Chrome.
2. Откройте эмулятор приложения «Терминал».
3. Запустите Chrome со следующим параметром:
   --enable-logging --v=1
4. Нажмите Ввод.

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

Расположение каталога зависит от операционной системы. Подробнее…

Как читать журналы

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

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

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

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

Строки файла журнала идут в хронологическом порядке и имеют следующий формат:

[PROCESS_ID:THREAD_ID:MMDD/TIME:LOGGING_LEVEL:SOURCE_CODE_FILE_NAME(LINE_NUMBER)]

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

• PROCESS_ID. Идентификатор текущего процесса.

• THREAD_ID. Идентификатор потока внутри идентификатора процесса.

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

• TIME. Текущее время в 24-часовом формате ЧЧ:ММ:СС. Это поможет сузить диапазон поиска до времени, когда проблема проявилась.

• LOGGING_LEVEL. Уровень важности текущего сообщения в журнале. Обычно это значение равно VERBOSE1. Также могут встречаться вхождения со значением ERROR.

• SOURCE_CODE_FILE_NAME(LINE_NUMBER). Имя и строка файла с исходным кодом, выполнение которого привело к появлению записи в журнале.

Эта информация оказалась полезной?

Как можно улучшить эту статью?

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

Как открыть консоль на разных браузерах

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента». 

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

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

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты. 

Какие вкладки есть в консоли и за что они отвечают

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

Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.

В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое. 

Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.

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

Sources

Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.

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

Network

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

Performance

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

Memory

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

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

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

• проверке сертификата – подтвердил ли сайт свою подлинность TLS;
• tls-соединении – использует ли сайт современные безопасные протоколы;
• безопасности второстепенных источников.

Lighthouse

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

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

1. Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
3. TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
4. (unknown): Script error. Обозначает ошибку скрипта.
5. TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
6. TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
7. Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
9. Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
10. ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!