Как посмотреть логи браузера
По своей технической структуре, логи очень сильно помогают программистам и порой тестировщикам понять, что конкретно означает та или иная ошибка, а также какова ее природа. Первоначальное предназначение логов – процесс протоколирования операций для последующего анализа системным администратором, текущее диагностирование системной активности, а также процедура сбора статистики.
Понятие HAR-файлов
HAR-файлы – это определенный архив или лог многочисленных сетевых запросов, своеобразный журнал событий, на основе которого специалисты технической поддержки или программисты могут проверить сетевые запросы веб-браузера в момент технической проблемы.
Также подобный файл может использоваться для сбора информации, чтобы максимально улучшить производительность и сохранность данных в нем.
Из-за того, что всегда присутствует очень большой массив данных (а именно не менее 5000 строк в конкретном формате json), на основе HAR-файла разработчики могут запросто реконструировать определенные действия на веб-странице и понять причину неисправности ПО.
Можно задаться вопросом, почему именно json? На самом деле, все очень просто – больше половины современных языков программирования имеют отличную библиотеку обмена тестовыми информационными блоками json.
Процесс снятия логов: наглядный пример
Переходим на страницу с проблемой. В меню находим вкладку Дополнительные инструменты > Инструменты разработчика > Сеть (network).
Вкладка Network в браузере
Как видно, запись запроса по умолчанию отключена (это можно определить по серому цвету иконки). Ставим галочку на поле Preserve log.
Ставим галочку на поле Preserve log
Нажимаем на кнопку F5 или Ctrl+R для выполнения перезагрузки страницы.
Теперь мы легко можем реконструировать процесс получения ошибки для последующего ее исправления.
Дальше необходимо нажать правой кнопкой мыши на окно запросов и выбрать соответствующий параметр Save as HAR with Content.
Выбираем параметр Save as HAR with Content
Подобный файл теперь можно просто добавить к найденному багу на просторах проверяемого ресурса.
Кроме того, может возникнуть вопрос, а как же просмотреть подобный файл? В сети есть масса инструментов для подобных целей, но также можно банально перетащить такой файл с места его хранения на «площадь» веб-браузера.
Перетаскиваем файл в браузер
Первые 2 шага аналогичны тем, что пользователи выполняют в браузере Google Chrome: открываем меню Веб-разработка > Инструменты разработчика > Сеть. Или одновременное нажатие на клавиши Ctrl+Shift+I.
Открываем вкладку Сеть в инструментах разработчика
Выполняем перезагрузку страницы.
Воспроизводим текущую проблему.
Выбираем опцию «Сохранить все как HAR».
Выбираем опцию «Сохранить все как HAR»
Все. Теперь пользователь может спокойно знакомиться с содержанием нужного HAR-файла, в котором потенциально могут храниться баги и дефекты.
По факту, для браузеров Microsoft Edge, Safari и Яндекс Браузер подобные операции выполняются по схожему сценарию и с той же последовательностью.
Краткие итоги
Владение определенными навыками снимать логи в различных веб-браузерах позволяет программисту и иногда QA-инженеру не только собирать много информации о найденных багах, но и разобрать их техническую природу, что естественным образом ускорит процесс исправления. Подобные вещи, в свою очередь, моментально улучшают общий процесс создания и построения программного обеспечения. От этого в большей степени и зависит качество веб-продуктов.
Иногда для устранения неполадок инженерам техподдержки требуются логи браузера, где произошла ошибка. Чтобы увидеть логи браузера, откройте инструменты разработчика (DevTools) клавишей F12, перейдите на вкладку Network, перезагрузите страницу. Дождитесь повторения ситуации, в которой возникла ошибка.
Как выгрузить логи из браузера?
Перейдите на вкладку «Сеть». Обновите страницу, нажав на клавиатуре F5, и повторите ошибку. По любой записи в логе нажмите правой кнопкой мыши и выберите «Сохранить все как HAR». Кликните по полю «Сохранить файл», нажмите «ОК».
Как снять Har логи?
- Начать запись в левом верхнем углу ().
- Во время записи сетевых запросов воспроизвести проблему.
- После завершения записи нажать кнопку «Экспортировать как HAR-файл» () или нажать Ctrl+S на клавиатуре.
Как сохранить логи в Chrome?
- В верхней части страницы выберите вкладку Сетевые журналы.
- В разделе "Параметры" установите флажки для следующих настроек: Включить файл policies. json в правила. Включать все файлы журналов, собранные сервисом debugd, в виде отдельного архива. .
- Нажмите Сохранить системные журналы.
Как посмотреть логи в хроме?
- Выйдите из браузера Chrome.
- Откройте приложение "Терминал".
- Выполните следующую команду: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1.
- Нажмите Ввод.
Что такое Har лог?
Как выгрузить Har файл?
в панели разработчика щёлкните правой кнопкой мыши и выберите пункт "Сохранить как HAR", укажите имя файла и сохраните его на диск отправьте полученный файл в техническую поддержку
Как собрать Har?
- Открыть окно отладки (клавиша F12)
- В окне отладки перейти на закладку Network.
- Выполнить действия, приводящие к ошибке
- Нажимаем в любом месте вкладки Network правой кнопкой мыши - выбираем Save as HAR with content.
Как посмотреть логи Internet Explorer?
Вы можете посмотреть журналы, открыв апплет "Администрирование" панели управления и перейдя к оснастке "Просмотр событий".
Что такое хар файлы?
ХАР (произносится «зaп») — формат файла, используемый в Windows Phone для установки программ. Представляет собой формат файлов для архивов со сжатием.
Как открыть файл HAR?
Как открыть консоль разработчика в Google Chrome?
- Откройте нужную страницу в браузере Google Chrome.
- Нажмите → «Дополнительные инструменты» → «Инструменты разработчика».
- Перейдите во вкладку «Console».
Как посмотреть логи Firefox?
Firefox по умолчанию не создает лог-файлы. Я предполагаю, что под «журналом firefox» вы подразумеваете все временные файлы, созданные firefox, так что взгляните на каталог ~/. mozilla/firefox . Там вы можете найти подкаталоги с кешем «Отчеты о сбоях», но также и множество файлов конфигурации (например profiles.
Журналы отладки браузера Chrome помогают при устранении неполадок, например при зависании вкладок. Журналы не создаются автоматически, поэтому сначала нужно включить ведение журналов.
Как включить ведение журналов
Примечание. В инструкциях подразумевается, что при браузер Chrome установлен в папку по умолчанию.
- Выйдите из браузера Chrome.
- Нажмите правой кнопкой на ярлык Chrome.
- Выберите Свойства.
- В конце строки Target: добавьте следующие параметры командной строки: --enable-logging --v=1
В результате строка должна выглядеть вот так: chrome.exe --enable-logging --v=1 - Нажмите ПрименитьOK.
- Запустите Chrome, дважды нажав на ярлык.
- Выйдите из браузера Chrome.
- Откройте приложение "Терминал".
- Выполните следующую команду:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1 - Нажмите Ввод.
- Выйдите из браузера Chrome.
- Откройте эмулятор приложения "Терминал".
- Запустите Chrome со следующим параметром:
--enable-logging --v=1 - Нажмите Ввод.
Журналы отладки хранятся в каталоге пользовательских данных под именем chrome_debug.log. Файл перезаписывается при каждом запуске Chrome, поэтому при возникновении ошибки проверяйте его до перезапуска браузера. Вы можете сохранить его копию, например на рабочем столе, чтобы данные не потерялись при перезаписи.
Расположение каталога зависит от операционной системы. Подробнее…
Как читать журналы
Существуют инструменты, которые помогают при чтении журналов и поиске источника проблемы, например Sawbuck для Microsoft ® Windows ® или "Консоль" для Apple ® Mac ® (Программы > Утилиты > Консоль). Они представляют журналы в графическом интерфейсе и позволяют использовать фильтры и поиск.
Также файлы журналов можно открыть в текстовом редакторе и использовать информацию ниже для поиска проблем.
На что обратить внимание
Начните с поиска ключевого слова ERROR в файле chrome_debug.log. Однако это не всегда является основной причиной неполадок. Например, если пользователь жалуется на то, что приложение слишком медленно запускается, вы можете увидеть повторяющиеся строчки в начале файла журнала или большие значения идентификаторов процессов (PID) и потоков (TID).
Строки файла журнала идут в хронологическом порядке и имеют следующий формат:
PROCESS_ID. Идентификатор текущего процесса.
THREAD_ID. Идентификатор потока внутри идентификатора процесса.
MMDD. Текущий месяц и день. В примере выше это 9 августа.
TIME. Текущее время в 24-часовом формате ЧЧ:ММ:СС. Это поможет сузить диапазон поиска до времени, когда проблема проявилась.
SOURCE_CODE_FILE_NAME(LINE_NUMBER). Имя и строка файла с исходным кодом, выполнение которого привело к появлению записи в журнале.
Вы не любите смотреть логи в консоли или вам не позволяют их любить, а следить за ходом дел как-то нужно?
PuperGrep — просмотрщик логов в браузере, который работает как tail -F, grep и подсвечивает самое интересное в вашем браузере. Или даже на вашем android, iPhone или iPad.
Возможности
- Реалтайм-просмотр логов.
- Возможность смотреть только интересные строки по списку регекспов.
- Возможность подсвечивать особенно интересные строки по списку регекспов.
- Способы группировки списков регекспов для фильтрации или подсветки через or (хотя бы одно) или and (все).
- Регулировка количества строк, отображаемых на экране.
- Возможность поставить лог на паузу, чтобы рассмотреть самое интересное.
- Быстрое переключение между логами с поиском по названию лога.
- Размер шрифта для куриц и орлов.
- Ссылки на конкретные логи со всеми настройками фильрации, подсветки и отображения (для букмарков и отправки друзьям
вконтакте). - Автоподсветка ссылок в логах
- Режим html лога (можно выводить последние загруженные в ваш сервис картинки).
- Подсветка активности в логе, даже если вы отфильтровали всё, что можно.
Невозможности
- Листать туда-сюда по логу на бесконечность. Только реалтайм.
- Скачивать логи целиком (у нас для этого nginx + autoindex).
Использование
Всё добро написано на node.js + socket.io + twitter bootstrap.
Чтобы завести у себя, выполняем следующие команды:
Т.к. pupergrep — всего лишь модуль npm, нам нужно будет написать нехитрый сервер и сохранить его в ~/mypupergrep/server.js:
Если использовать в production, то разумно перед вашим сервером поставить nginx, который будет заниматься авторизацией пользователей или даже раздачей статики. Об этом есть на страничке проекта. Стоит учесть, что nginx не поддерживает websockets (пока что) и придётся при каждом открытии страницы ждать пару секунд для переключения на xhr-polling.
Конец концов
На страничке проекта на Github можно почитать подробнее. Там же можно оставить свой pull request, я буду только рад.
Иногда для устранения неполадок инженерам техподдержки требуются логи браузера, где произошла ошибка. Чтобы увидеть логи браузера, откройте инструменты разработчика (DevTools) клавишей F12, перейдите на вкладку Network, перезагрузите страницу. Дождитесь повторения ситуации, в которой возникла ошибка.
Запрос, закончившийся ошибкой, будет помечен красным:
Полный текст ответа сервера можно посмотреть на вкладке Response:
Дополнительную информацию можно получить на вкладке Console:
Сделайте скриншоты логов и прикрепите их к тикету.
В особых случаях требуется анализ всех запросов. Для этого нажмите правой кнопкой мыши по любому запросу и выберите Save as HAR with Content. Прикрепите полученный файл к тикету.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
Читайте также: