Зняття логів у браузерах

Для чого потрібні логи? Данні в HAR 

Логи, по своїй суті, допомагають розробникам та тестувальникам зрозуміти, що означає помилка, а також звідки вона взялася. Призначення логів – протоколування операцій для подальшого аналізу адміністратором, діагностування активності, збір статистики.

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

Для глибшого розуміння давайте поглянемо на структуру файлу в HTTP архіві: 

• log – об'єкт,який представляє структуру експортованих даних; 
• creator – інформація про структуру створюваних об’єктів браузера;
• browser – назва і версія браузера;
• pages – список сторінок;
• pageTimings – опис часу подій; 
• entries – об'єкт являє собою массив з усіма HTTP-запитами;
• request – інформація про виконані запити; 
• response – містить детальну інформацію про відповіді;
• cookies – список усіх файлів cookie;
• headers – список усіх заголовків;
• queryString – список усіх параметрів та значень;
• postData – об’єкт описує опубліковані дані;
• params – список переданих параметрів у «postData»;
• content – опис деталей вміщеної відповіді в «response»;
• cache – інформація про використаний кеш; 
• timings – опис етапів запиту і відповіді.

Розглянемо детальніше entries – це індивідуальні запити на сторінці, об'ємний файл із запитами get типу. Якщо переглянути цей файл, то можна побачити статус кодів HTTP, які проінформують про результати запитів.

Так як присутній дуже великий масив даних, а точніше 5000 рядків у форматі json, за допомогою HAR файлу можна повністю реконструювати дії на сторінці і зрозуміти причину помилки.

Чому json? Все просто – більшість мов програмування мають гарну бібліотеку обміну текстовими даними json.

На практиці може бути ситуація, що на відео видно довге завантаження сторінки, але на стороні розробника все добре, відповідно, він не може зрозуміти в чому проблема. У таких випадках і потрібен експортований HTTP архів. І для цього існує корисний ресурс, де можна подивитися все необхідне та реконструювати запити веб-браузера до сайту.

Перелік популярних браузерів:

• Google Chrome;
• Mozilla Firefox;
• Microsoft Edge;
• Safari.

Процес зняття логів на Windows у різних браузерах

 Створення HTTP архіву в Google Chrome

1. Зайти на сторінку з проблемою.
2. В меню в правому верхньому куті вибрати пункти «Додаткові інструменти» → «Інструменти розробника» або натиснути клавішу F12.
3. У вікні розробника перейти на вкладку Мережа (Network).

4. Запис запитів за замовчуванням увімкнена (). Сірий колір означає, що запис не увімкнений.
5. Поставити галочку на Preserve log.

6. Натиснути F5 або Ctrl+R для перезавантаження сторінки.

7. Під час запису реконструювати проблему.
8. Натиснути правою кнопкою миші у вікні запитів та вибрати пункт «Save as HAR with Content».

9. Цей файл можна додати до знайденого дефекту на тестувальному ресурсі.

Як подивитись файл? Для цього є спеціальні ресурси або ж можна просто перетягнути файл із місця збереження у браузер.

Створення HTTP архиву в Mozilla Firefox

1. Повторити перші кроки як для браузера Google Chrome  → «Веб розробка» → «Інструменти розробника» або натиснути клавіші F12, Ctrl + Shift + I.

2. Перезавантажити ресурс.
3. Відтворити проблему.
4. Вибрати «Зберегти усе як HAR».

5. Отримати HAR-файл у браузері Mozilla Firefox.

По суті, кроки є аналогічними для усіх браузерів. Розглянемо ще декілька прикладів.

Створення HTTP архиву у Microsoft Edge

1. Перейти до «More tools» → «Developer Tools» → «Network» або використати клавішу F12.

2. Почати запис у лівому верхньому куті ().
3. Під час запису мережевих запитів відтворити проблему.
4. Після завершення запису натиснути кнопку «Експортувати як HAR-файл» () або натиснути Ctrl+S на клавіатурі.

5. Отримати необхідний HAR-файл та прикріпити до знайденого дефекту.

Процес зняття логів на macOS у браузері Safari. Створення HAR-файлу в Safari

1. У верхній частині екрану виберіть пункти «Розробка» → «Показати веб-інспектор» або натисніть Option + command + i.
2. Натисніть на «+» і створіть нову вкладку, якщо вкладка відсутня.

3. Натиснути Command+R для перезавантаження.
4. Повторити проблему на ресурсі.
5. Вибрати «Експортувати HAR».

6. Отримати HAR-файл у браузері Safari.

Вміння знімати логи в різних браузерах допоможе зібрати більше інформації про помилку, допомогти розібратися в її суті, що прискорить процес виправлення бага. А це, в свою чергу, поліпшить весь процес розробки ПЗ та його якість.