Як створити HAR-файл із Google Chrome, Firefox і проаналізувати його?

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

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

Що являє собою файл HAR?

Файл HAR (HTTP Archive) – це архівний файл у форматі JSON, який містить інформацію про вашу веб-активність, зафіксовану веб-браузером. Він записує усі взаємодії, такі як запити та відповіді між вашим браузером та веб-сайтом.

Файл HAR фіксує кожен ресурс, який браузер завантажує, а також час, необхідний для завантаження кожного з цих ресурсів. Ці файли являють собою текстові журнали обміну даними між HTTP-клієнтом і сервером.

Розширення “.har” ідентифікує ці архівні файли.

Навіщо створювати файл HAR?

Команда підтримки компанії або бізнесу може попросити надати файл HAR для аналізу, коли користувач повідомляє про проблему.

Файли HAR надають детальну інформацію про HTTP-запити та відповіді, що допомагає в процесі налагодження. Сюди входить конфігурація браузера, файли cookie, час, витрачений на отримання даних відповіді, час завантаження певних зображень, час встановлення з’єднання з сервером, а також час, необхідний для відправлення запиту та отримання відповіді.

Загальний огляд процесу

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

Як створити файл HAR в різних браузерах?

Процес створення файлів HAR для запису HTTP-сесії відрізняється в залежності від використовуваного браузера.

Chrome

Вкладка “Мережа” в інструментах розробника браузерів використовується для запису HTTP-сесії.

  • У Chrome перейдіть на сторінку, де виникла проблема.
  • Відкрийте інструменти розробника через меню (Меню > Інші інструменти > Інструменти розробника). У вікні, що відкриється, перейдіть на вкладку “Мережа”.
  • На вкладці “Мережа” переконайтеся, що кругла кнопка у верхньому лівому куті є червоною. Якщо вона сіра, клацніть її, щоб почати запис взаємодії.
  • Увімкніть збереження журналу для фіксації всіх веб-запитів та відповідей.
  • Для експорту файлу HAR натисніть кнопку зі стрілкою вниз на вкладці “Мережа”.
  • Збережіть файл HAR на комп’ютер.

Firefox

  • У верхньому правому куті вікна браузера натисніть меню Firefox (три горизонтальні паралельні лінії).
  • У спадному меню виберіть “Інші інструменти” > “Веб-розробка” > “Мережа”.
  • Натисніть кнопку налаштувань і увімкніть опцію збереження журналів.
  • Оновіть сторінку та повторіть дії, які спричиняють проблему, щоб зафіксувати її.
  • Після відтворення проблеми, клацніть правою кнопкою миші будь-який рядок в панелі активності та виберіть “Зберегти все як HAR”.
  • Якщо для аналізу також потрібен файл журналу консолі, перейдіть на вкладку “Консоль”, виберіть весь вміст (клацнувши правою кнопкою миші на будь-якому рядку) та скопіюйте його до текстового файлу, щоб поділитися з командою підтримки.

Microsoft Edge

  • Натисніть на значок з трьома крапками (…) у верхньому правому куті, щоб вибрати “Інші інструменти” > “Інструменти розробника”.
  • Перейдіть на вкладку “Мережа” та почніть запис сесії.
  • Відвідайте веб-сторінку та відтворіть проблему, дотримуючись потрібних кроків.
  • Для збереження файлу HAR виберіть опцію “Експортувати як HAR”.

Internet Explorer

  • Відкрийте Internet Explorer та перейдіть на сторінку, де виникла проблема.
  • Клацніть на значок шестірні у верхньому правому куті.
  • Перейдіть до (Інструменти розробника > вкладка Мережа).
  • Оновіть сторінку та відтворіть проблему, щоб її зафіксувати.
  • Після відтворення проблеми, натисніть на іконку “Експортувати як HAR” (у вигляді дискети).

Інструмент HTTP Watch

Для браузерів Google Chrome, Internet Explorer та Microsoft Edge можна використовувати HTTPWatch (інструмент для аналізу HTTP), щоб записувати веб-запити та відповіді.

  • Спочатку завантажте та встановіть інструмент HTTPwatch.
  • Почніть запис HTTPwatch, завантажте сторінку з проблемою та зупиніть запис після відтворення проблеми.
  • Збережіть запис у форматі HAR.

Веб-сайти для аналізу файлів HAR

Ці інструменти допоможуть вам візуалізувати та проаналізувати файли HAR (журнали обміну даними між клієнтом і сервером HTTP).

  • Аналізатор Google HAR – Завантажте файл, натиснувши кнопку “Вибрати файл”, та виберіть HAR файл для перевірки. Після вибору файлу автоматично з’явиться екран аналізу. Також доступна фільтрація за кодом статусу HTTP.
  • Softwareishard.com – Безкоштовний веб-інструмент, що відображає каскадний графік всіх запитів та дозволяє перейти до конкретного запиту. Натисніть кнопку “Попередній перегляд” та вставте журнал HAR у текстове поле. Також можна перетягнути файли HAR на сторінку для аналізу.
  • Сайт 24×7 – Ще один безкоштовний веб-інструмент для візуалізації архівних файлів HTTP. Завантажте файл, або скопіюйте його вміст у поле введення.

Висновок

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

  • Заголовки запиту та відповіді
  • Вміст запиту та відповіді
  • Токени аутентифікації, файли cookie, токени сесії, паролі та дані для API

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

Сподіваюся, що ця стаття допомогла вам розібратися в інструментах для аналізу HAR, а також в тому, як створювати файли HAR у різних браузерах.

Можливо, вас також зацікавить стаття про усунення затримок в мережі за допомогою Wireshark.

Чи була ця стаття для вас корисною? Поділіться нею з іншими!