FAQ: Создание файлов HAR

Что такое файл HAR?

HAR сокращение от HTTP ARchive, которое показывает запись всех запросов, которые браузер делает с веб-сайтом.

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

  • Медленное время загрузки
  • Неверные форматы файлов
  • Недостающие активы
  • Тайм-ауты с запущенными заданиями

Как вы генерируете фйл HAR?

Существуют разные способы создания файла HAR в зависимости от того, какой браузер вы используете. Ниже вы найдете методы для следующих браузеров: Гугл Хром , Fire Fox , Сафари , Microsoft Edge , и Internet Explorer 11

Создание файла HAR в Google Chrome

  1. Перейдите на страницу с проблемой
  2. Когда вы находитесь на странице, используйте сочетание клавиш Command + Option + J, для Mac, чтобы войти в Chrome Dev Tools или нажмите F12 или Control + Shift + I в Linux или Windows.

    В случае успеха в окне вашего браузера должен появиться следующий экран (DevTools):

    Chrome (v77. 0.3865.120 Build 64 -bit) Вкладка консоли DevTools
    Chrome (v77. 0.3865.120 Build 64 -bit) Вкладка консоли DevTools
  3. Тебе следует увидеть Приставка выбран в левом верхнем углу нового экрана.
  4. Нажмите на вкладку сети, и ваш экран должен измениться примерно так:
    Вкладка DevTools Network
    Вкладка DevTools Network
  5. На экране сети обязательно установите флажки Сохранить журнал и Отключить кэш в левом верхнем углу. В приведенном выше примере уже есть Сохранить журнал и Отключить кэш выбран.
  6. Обновите страницу, чтобы записать сетевой трафик между вашим браузером и веб-сайтом.
  7. Когда веб-сайт завершит загрузку, щелкните правой кнопкой мыши любой из элементов, перечисленных в таблице. Должен появиться список опций, как показано ниже:
    Параметры правой кнопки мыши (вкладка «Сеть»)
    Параметры правой кнопки мыши (вкладка «Сеть»)
  8. Выберите опцию Сохранить все как HAR с контентом, Должно появиться диалоговое окно, чтобы дать вам возможность сохранить файл на вашем компьютере.
    Выберите: «Сохранить все как HAR с контентом»
    Выберите: «Сохранить все как HAR с контентом»
  9. Вы сделали! Теперь вы можете просмотреть файл, прежде чем отправить его нам для устранения неполадок.

Генерация файла HAR в Firefox

  1. Перейдите на страницу с проблемой
  2. Когда вы находитесь на странице, используйте сочетание клавиш Command + Option + I открыть консоль веб-разработчика.

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

    Экран веб-разработчика Firefox (v69. 0 64 -bit)
    Экран веб-разработчика Firefox (v69. 0 64 -bit)
  3. Тебе следует увидеть Приставка выбран в левом верхнем углу нового экрана.

  4. Нажмите на вкладку сети, и ваш экран должен измениться примерно так:

    Вкладка сети Firefox для веб-разработчиков
    Вкладка сети Firefox для веб-разработчиков
  5. На экране сети обязательно установите флажки Постоянный журнал и Отключить кэш в левом верхнем углу.

    В приведенном выше примере уже есть Постоянный журнал и Отключить кэш выбран.

  6. Обновите страницу, чтобы записать сетевой трафик между вашим браузером и веб-сайтом.

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

    Вкладка сети Firefox для веб-разработчиков
    Вкладка сети Firefox для веб-разработчиков
  7. Когда веб-сайт завершит загрузку, щелкните правой кнопкой мыши любой из элементов, перечисленных в таблице. Должен появиться список опций, как показано ниже:

    Экран настроек
    Экран настроек
  8. Выберите опцию Сохранить все как HAR , Должно появиться диалоговое окно, чтобы дать вам возможность сохранить файл на вашем компьютере.

    Выберите: «Сохранить все как HAR»
    Выберите: «Сохранить все как HAR»
  9. Вы сделали! Теперь вы можете просмотреть файл перед отправкой нам на проверку.

Создание файла HAR в Safari

  1. Перейдите на страницу с проблемой
  2. Когда вы находитесь на странице, используйте сочетание клавиш Command + Option + I открыть Safari Web Inspector ,

    В случае успеха в окне вашего браузера должен появиться следующий экран (Web Inspector):

    Safari Web Inspector (версия  12.0. 3), вкладка консоли
    Safari Web Inspector (версия 12.0. 3), вкладка консоли
  3. По умолчанию Приставка это первый экран, который отображается, но он также откроет последнее окно, которое вы использовали последним.
  4. Если еще не в Вкладка сеть, Нажми на Сеть вкладка в левом верхнем углу Окно веб-инспектора и ваш экран должен измениться, как показано ниже:
    Вкладка сети веб-инспектора Safari
    Вкладка сети веб-инспектора Safari
  5. На экране сети обязательно установите флажки Сохранить журнал и Отключить кэш в левом верхнем углу. В приведенном выше примере уже есть Сохранить журнал и Отключить кэш выбран.
  6. Обновите страницу, чтобы записать сетевой трафик между вашим браузером и веб-сайтом.
  7. Когда веб-сайт завершит загрузку, щелкните правой кнопкой мыши любой из элементов, перечисленных в таблице. Должен появиться список опций, как показано ниже:
    Параметры правой кнопки мыши (вкладка «Сеть»)
    Параметры правой кнопки мыши (вкладка «Сеть»)
  8. Выберите опцию Экспорт HAR, Должно появиться диалоговое окно, чтобы дать вам возможность сохранить файл на вашем компьютере.
    Выберите: «Сохранить все как HAR с контентом»
    Выберите: «Сохранить все как HAR с контентом»
  9. Вы сделали! Теперь вы можете просмотреть файл, прежде чем отправить его нам для устранения неполадок.

Создание файла HAR в Microsoft Edge

  1. Перейдите на страницу с проблемой
  2. Когда вы окажетесь на странице, нажмите Клавиша F12 открыть Инструменты разработчика Экран.

    В случае успеха в окне вашего браузера должен появиться следующий экран (Web Inspector):

    Microsoft Edge Developer Tools (v44. 17) Вкладка Элементы
    Microsoft Edge Developer Tools (v44. 17) Вкладка Элементы

    По умолчанию элементы экран отображается первым.

  3. Если еще не в Вкладка сеть, Нажми на Сеть вкладка в левом верхнем углу Окно веб-инспектора и ваш экран должен измениться, как показано ниже:
    Вкладка «Инструменты разработчика Microsoft Edge»
    Вкладка «Инструменты разработчика Microsoft Edge»
  4. На экране сети обновите страницу, чтобы браузер записывал сетевую активность при начальной загрузке.
  5. Как только веб-сайт завершит загрузку, нажмите на Значок дискеты (Показано ниже), чтобы сохранить файл HAR.
    Нажмите на значок дискеты, чтобы сохранить сетевую активность (HAR)
    Нажмите на значок дискеты, чтобы сохранить сетевую активность (HAR)
  6. Вы сделали! Теперь вы можете просмотреть файл, прежде чем отправить его нам для устранения неполадок.

Создание файла HAR в Internet Explorer 11

  1. Перейдите на страницу с проблемой
  2. Когда вы окажетесь на странице, нажмите Клавиша F12 открыть Инструменты разработчика Экран.

    В случае успеха в окне вашего браузера должен появиться следующий экран (Web Inspector):

    Инструменты разработчика Internet Explorer (v11. 8), вкладка "Элементы"
    Инструменты разработчика Internet Explorer (v11. 8), вкладка "Элементы"

    По умолчанию Приставка экран отображается первым.

  3. Если еще не в Вкладка сеть, Нажми на Сеть вкладка в левом верхнем углу Окно веб-инспектора и ваш экран должен измениться, как показано ниже:
    Вкладка «Инструменты разработчика Microsoft Edge»
    Вкладка «Инструменты разработчика Microsoft Edge»
  4. На экране сети обновите страницу, чтобы браузер записывал сетевую активность при начальной загрузке.
  5. Как только веб-сайт завершит загрузку, нажмите на Значок дискеты (Показано ниже), чтобы сохранить файл HAR.
    Нажмите на значок дискеты, чтобы сохранить сетевую активность (HAR)
    Нажмите на значок дискеты, чтобы сохранить сетевую активность (HAR)
  6. Вы сделали! Теперь вы можете просмотреть файл, прежде чем отправить его нам для устранения неполадок.