Har файл что это такое

Обновлено: 30.06.2024

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

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

Чтобы создать файл HAR для Chrome

Откройте Google Chrome и перейдите на страницу, на которой возникает проблема.
Найдите кнопку с вертикальным многоточием () и выберите Дополнительные инструменты > Инструменты разработчика.
В открывшейся панели выберите вкладку "Сеть".
Найдите круглую кнопку записи ( ) в левом верхнем углу вкладки и убедитесь, что она красного цвета. Если он серый, нажмите один раз, чтобы начать запись.
Установите флажок "Сохранить журнал".
Нажмите кнопку "Очистить" ( ), чтобы удалить все существующие журналы на вкладке "Сеть".
Воспроизведите проблему, с которой вы сталкивались раньше, пока записываются сетевые запросы.
После того как вы воспроизвели проблему, в Chrome нажмите Загрузить. Затем сохраните файл на свой компьютер: Сохранить как HAR с содержимым
Загрузите файл HAR в свою заявку или прикрепите его к электронному письму, чтобы наша служба поддержки могла его проанализировать.

Инструкции одинаковы для компьютеров MAC и Windows. Вот краткая анимация, показывающая этот процесс:

Чтобы создать файл HAR для Firefox

Откройте Firefox и перейдите на страницу, на которой возникли проблемы.
Выберите меню Firefox (три горизонтальные параллельные линии) в правом верхнем углу окна браузера, затем выберите Веб-разработчик > Сеть.
Сетевые инструменты разработчика открываются в виде закрепленной панели сбоку или снизу Firefox. Перейдите на вкладку "Сеть".
Запись начинается автоматически, когда вы начинаете выполнять действия в браузере.
После того, как вы воспроизвели проблему и увидите, что все действия были сгенерированы на панели разработчика (это должно занять всего несколько секунд), щелкните правой кнопкой мыши в любом месте под столбцом «Файл» и выберите «Сохранить все как Har». .
Сохраните файл HAR в удобном месте.
Загрузите файл HAR в свою заявку или прикрепите его к электронному письму, чтобы мы могли его проанализировать.

Инструкции одинаковы для компьютеров MAC и Windows.

Чтобы создать файл HAR для Internet Explorer

Откройте Internet Explorer и перейдите на страницу, на которой возникла проблема.
Нажмите клавишу F12 на клавиатуре (или щелкните значок шестеренки > Инструменты разработчика F12).
Перейдите на вкладку "Сеть".
Воспроизведите проблему, с которой вы сталкивались раньше, пока записываются сетевые запросы.
После этого нажмите кнопку Сохранить.
Укажите имя файла трассировки и нажмите кнопку "Сохранить", чтобы сохранить его в виде файла .har или .xml.
Загрузите файл HAR в свою заявку или прикрепите его к электронному письму, чтобы мы могли его проанализировать.

Инструкции одинаковы для компьютеров MAC и Windows.

Чтобы создать файл HAR для Safari

Перед созданием файла HAR убедитесь, что в Safari отображается меню «Разработка». Если его там нет, следуйте инструкциям в разделе «Использование инструментов разработчика» в меню «Разработка» в Safari на Mac.

Откройте меню "Разработка" и выберите "Показать веб-инспектор".
Перейдите на вкладку "Сеть" и выполните действие, вызывающее проблемы.
Нажмите значок «Экспорт» в правой части вкладки сети и сохраните файл HAR.
Отправьте нам файл через заявку в службу поддержки.

Чтобы создать файл HAR для Edge

Edge изначально создает файлы HAR. Дополнительные инструкции см. в инструкциях на веб-сайте Microsoft.

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

Сколько времени требуется для получения информации DNS
Сколько времени требуется для запроса каждого объекта
Сколько времени требуется для подключения к серверу
Сколько времени требуется для передачи активов с сервера в браузер каждого объекта

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

Как получить файл HAR

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

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

Визуализация HAR-файла

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

Ваша служба мониторинга. Это должно обеспечить визуализацию загрузки вашей страницы для каждого образца, который они берут. Сравните время загрузки в разных географических точках, чтобы получить более полное представление об опыте ваших клиентов.
Инструменты разработчика для браузеров. Я разработал свой первый проход веб-страниц в Chrome. На вкладке «Сеть» инструментов разработчика отображается водопад веб-страниц. Его доступность делает его отличным инструментом для работы.

Что искать в файле HAR

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

Первое и самое очевидное, что вы заметите, это количество загружаемых элементов. На этой странице, показанной выше, веб-страница загружает большое количество файлов javascript, файлов css, шаблонов усов и изображений. Руководящие принципы передовой практики рекомендуют объединять каждую из этих групп объектов в один файл, чтобы уменьшить количество обращений к серверу. В данном случае это значительно сократит время загрузки страницы, которое составляет 9,3 секунды.

Существует большое количество инструментов, которые могут объединять ваши файлы javascript и css, и относительно небольшое изменение в сценариях развертывания может иметь значительный эффект. Файлы изображений можно комбинировать с помощью метода, известного как спрайтинг. Это более сложный процесс, и его нелегко автоматизировать в общем случае. Анализ вашего HAR-файла поможет вам решить, стоят ли усилия окупаемости вашего сайта.

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

На конференции Velocity компания Google продемонстрировала готовящуюся к выпуску версию PageSpeed Insight, которая покажет критический путь веб-сайта, и похоже, что это будет отличный инструмент, способный значительно сэкономить время. Для каждого элемента на критическом пути посмотрите, как вы можете сократить время его загрузки, так как это уменьшит время загрузки страницы. Сокращение времени загрузки элементов, не входящих в критический путь, не уменьшит время загрузки страницы.

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

В приведенном ниже представлении HAR показана страница, которая находится на пути к оптимизации: сначала она загружается со свежим кэшем, а затем второй раз с заполненным кэшем. При начальной загрузке страница имеет два файла CSS, два файла JS, несколько изображений и средства отслеживания аналитики. Обратите внимание, что для загрузки второй страницы требуется только HTML-документ, документ JSON с пользовательскими данными и некоторые средства отслеживания аналитики, которые загружаются асинхронно.

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

Заключение

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

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

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

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

Прежде чем начать

Обратите внимание на поддерживаемые платформы для поддерживаемых типов браузеров.

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

Создайте файл HAR для незатронутой страницы (без проблем с производительностью или отрисовкой страницы). Пример. Панель инструментов, представление задач, поиск задач и страница проекта.
Создайте файл HAR для затронутой страницы. Сгенерируйте несколько раз, чтобы получить лучшее среднее значение и зафиксировать согласованное время.

Решение

Ниже приведены файлы HAR, созданные в зависимости от используемого вами варианта браузера.

Хром

Для создания файлов HAR рекомендуется использовать Chrome, так как он изначально предоставляет инструменты разработчика для облегчения этого. Чтобы узнать больше об инструментах разработчика Chrome, перейдите по этой ссылке.

Набор инструментов

Chrome поставляется с набором инструментов разработчика, как указано в этой ссылке.

Ошибки JavaScript

Посмотрите в консоли Chrome на наличие ошибок JavaScript.

Проблемы с сетью

Для диагностики проблем со службой поддержки можно использовать вкладку сети:

Поддержка Atlassian также может запросить журнал отладки браузера. Если эта информация не была запрошена, вы можете перейти к разделу "Предоставление информации для поддержки"

Чтобы включить дополнительный журнал браузера:

Запустите браузер с параметрами " --enable-logging --v=1" (в этой статье приведены инструкции для основных платформ)
В расположении пользователя Chrome по умолчанию будет создан файл с именем "chrome_debug.log".

Предоставление информации в службу поддержки

Вызовите инструменты разработчика одним из следующих способов:
- Использование сочетания клавиш (⌘⌥I в OS X, Ctrl + Shift + i в Linux, F12 в Windows)
- В меню Chrome в правом верхнем углу окна браузера выберите "Инструменты" > "Инструменты разработчика".
Перейдите на вкладку "Сеть" в инструменте разработки.
Отметьте параметр «Отключить кеширование», чтобы предотвратить кеширование ресурсов для этой конкретной страницы.
Обновите страницу, чтобы начать захват трафика между браузером и сервером.

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

Файрфокс

Набор инструментов

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

Ошибки JavaScript

Посмотрите в консоли на наличие ошибок JavaScript.

Проблемы с сетью

Предоставление информации в службу поддержки
1. Выберите Инструменты > Веб-разработчик > Сеть.
2. Нажмите на значок шестеренки, затем выберите "Сохранить журналы".
3. Обновите страницу, чтобы начать захват трафика между браузером и сервером.
  - Примечание. Зафиксируйте полную загрузку страницы, чтобы мы могли увидеть запросы, сделанные до возникновения проблемы, которую мы анализируем.
4. Выполните шаги, которые вызывают или демонстрируют вашу проблему.
5. Нажмите «Экспорт», а затем «Сохранить как». чтобы сохранить файл HAR
6. Перед отправкой файла HAR в Atlassian обязательно удалите/подвергните цензуре всю конфиденциальную информацию с помощью текстового редактора (например, удалите пароли, секреты и т. д.).