Подробный обзор инструментов для разработчиков Firefox

В этой статье мы рассмотрим «Инструменты для разработчиков» от браузера Firefox («DevTools»).

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

• Нажмите на иконку меню справа от панели навигации, кликните по пункту «Веб-разработчика», «Инструменты разработчика».
• Используйте комбинации клавиш Shift + F5 (Windows и macOS) для запуска инструмента «Производительность» и Ctrl + Shift + E (Windows) или Cmd + Option + E (macOS) для запуска инструмента «Сеть».
• Кликните правой кнопкой мыши по любому месту страницы и выберите в контекстном меню пункт «Исследовать элемент».

Настройки инструментов для разработчиков

В инструментах для разработчиков есть много параметров, которые помогают настраивать работу с системой. Например, параметры «Включить отметки времени» в веб-консоли или «Отключить HTTP-кеш», который используется для имитации производительности первой загрузки на всех страницах.

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

Сначала откройте инструменты для разработчиков, а затем:

• нажмите кнопку «Настройки», представленную в панели инструментов;
• нажмите клавишу F1, чтобы отобразить панель настроек поверх текущего инструмента;

Здесь можно выбрать инструменты по умолчанию, кнопки, которые необходимо отображать на панели инструментов, темы (темная, светлая, Firebug), а также другие дополнительные настройки.

Инструменты, ориентированные на производительность

При анализе производительности веб-приложения необходимо разграничить понятия производительности загрузки и времени выполнения.

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

Сеть

Инструмент «Сеть» отображает все сетевые запросы, которые выполнил Firefox (например, при загрузке страницы или отправке запросов XMLHttpRequests, запросов API Fetch и т. д.) в виде таблицы.

Этот инструмент также выводит HTTP-заголовки, связанные с запросом, HTTP-ответы и файлы cookie. Его также можно использовать для выполнения, отображения и сохранения результатов анализа производительности текущей загрузки страницы.

Инструмент можно использовать для определения того, сколько времени требуется браузеру на загрузку различных ресурсов веб-страницы. А также для мониторинга и выделения запросов, которые замедляют или блокируют загрузку веб-страницы. В панели «Сеть» вы увидите, когда запускаются основные события (DOMContentLoaded и load).

Временная шкала запроса

По каждому запросу в таблице отображается информация о времени, затраченном на загрузку ресурса.
Инструменты разработчика отмечают в отчете основные события жизненного цикла, такие как DOMContentLoaded и load. Синим цветом обозначается время, когда запускается событие DOMContentLoaded. Фиолетовая линия - когда происходит событие load.

События DOMContentLoaded и load

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

Панель информации о запросе

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

Сетевые тайминги

В этой панели представлено большое количество временных метрик, связанных с каждым запросом:

Заблокировано - время, проведенное в очереди ожидания подключения к сети.

Отправка - время, затраченное на отправку запроса на сервер.

Получение - это время, затраченное на получение ответа от сервера или, на чтение его из кеша (если он кэширован).

Ожидание - общее время ожидания клиента до получения первого байта. В сторонних инструментах анализа производительности оно называется TTFB или Time to First Byte.

Также есть тайминг поиск DNS - время, необходимое для обработки имени хоста сервера; соединения - время, затраченное на открытие TCP-соединения.

Как анализировать производительность времени загрузки

Сетевой монитор включает в себя инструмент для анализа производительности загрузки веб-страницы. Чтобы использовать его нужно:

• кликнуть по иконке «Начать анализ быстродействия», которая расположена в нижней строке состояния;
• перезагрузить страницу или выполнить сетевой запрос, когда открыт «Сетевой монитор».

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

• количество кэшированных ответов;
• общее количество запросов;
• размер;
• размер передачи;
• время загрузки.

Веб-страница тестируется с пустым кэшем и с записанным кэшем.

Производительность первоначальной загрузки

Инструменты для разработчиков от Firefox позволяют анализировать производительность веб-приложения в двух разных режимах:

• Без кэширования - эмулирует первое посещение, когда ресурсы еще не кэшированы.
• С кэшированием - эмулирует повторные посещения. Браузер уже кэшировал ресурсы приложения, что позволяет отбросить множество обращений к серверу.

Также можно использовать параметр «Отключить кэш», чтобы эмулировать первоначальную загрузку веб-страницы, когда инструменты для разработчиков открыты на любой вкладке.

Производительность JavaScript

JavaScript является однопоточным. Это означает, что браузер запускает код синхронно, но благодаря HTML5 Web Workers (стандартный API для многопоточного JavaScript) можно запускать код в разных потоках.

Этот единственный поток отвечает за выполнение всей работы, которую выполняет браузер. Например, рендеринг макета, вычисление стилей. Методы setTimeout, события click и load, извлечение ресурсов выполняются одним потоком.

Оптимальная производительность и время отклика обусловлены асинхронной моделью JavaScript. Но долго выполняемые функции могут привести к ухудшению производительности и увеличению времени отклика интерфейса.

Инструмент «Профайлер»

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

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

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

Как использовать инструмент Профайлер

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

Обязательно анализируйте сценарии взаимодействия с пользователем во время процесса профилирования с различными частями интерфейса.

Выбор временного диапазона

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

График FPS

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

График FPS показывает максимальные и минимальные значения частоты кадров, а также среднее значение частоты во время профилирования. Если вы используете анимацию, FPS должен быть 60 кадров в секунду.

Можно применять эту диаграмму для быстрого обнаружения визуальных пробелов (коллапсов) и несоответствий, которые обозначают серьезные падения частоты кадров. Что является доказательством наличия у браузера проблем с производительностью.

На приведенном ниже скриншоте демонстрируется диаграмма FPS с обрушением:

График водопада

На диаграмме «Водопад» отображается разбивка действий и событий, связанных с браузером, например:

• рендеринг или компоновка элементов;
• применение стилей;
• запросы кадров анимации;
• отображение пикселей;

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

Представление «Дерево вызовов»

В представлении «Дерево вызовов» отображаются функции JavaScript, на которые браузер тратит большую часть времени. В нем отображаются: общее время активности, время автономной работы и их процентное отношение к общему времени профилирования.

Свое время - время, затрачиваемое только на операции, без учета функций, которые они вызывают.
Общее время - время, затраченное на операции и функции, которые они вызывают.

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

Диаграмма Flame Chart

Flame Chart отображает выполнение стеков вызовов JavaScript во время профилирования.

Накладывающиеся столбцы означают, что верхняя операция, которая существует непосредственно в CPU, вызывается нижней операцией.

Вы можете использовать частоту кадров, Flame Chart, представления «Водопад» и «Дерево вызовов», чтобы найти проблемы с производительностью выделить конкретные функции, требующие оптимизации.

Flame Chart показывает состояние стека вызовов определенных функций в определенное время записи.

Цветовые коды

В диаграммах и разделах применяются различные цвета для одних и тех же типов операций и ресурсов - JavaScript, CSS, рендеринг, отрисовка и т. д.

Вы можете использовать цвета для идентификации операций в разных представлениях.

Также можно фильтровать отдельные действия на диаграммах, и просматривать их через это меню.
Например, если вы работаете с CSS-анимацией, то нужно сосредоточиться на таких действиях, как «Пересчет стилей», «Применить изменений стилей», «Разбивка» и «Отрисовка». Вы можете выбрать только эти действия, чтобы уменьшить количество данных.

При анализе JavaScript необходимо сосредоточиться на вызовах функций, HTML и XML.

Заключение

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