В предыдущих статьях мы разобрали структуру DevTools и основные элементы, также начали подробно разбирать каждую вкладку, в этой статье мы продолжаем детально разбирать вкладки DevTools.
Performance
Панель отображает временную шкалу использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков таймлайна становятся доступны подробные данные о выполнении кода и всём жизненном цикле страницы. Можно изучить время выполнения отдельных частей кода, выбрать конкретный промежуток на временной шкале и узнать, какие процессы происходили в этот момент.
Инструмент используется для улучшения общей производительности страницы.
Ключевые возможности:
- Возможность записи для анализа каждого события, произошедшего после загрузки страницы или взаимодействия с пользователем.
- Возможность просмотра FPS, загрузки CPU и сетевых запросов в области Overview.
- Возможность просмотра деталей по каждому событию.
- Возможность изменения масштаба таймлайна для упрощения анализа.
Memory
Панель «Память» в Chrome Developer Tools предоставляет информацию о том, как страница использует память. Утечки памяти возникают, когда веб-сайт потребляет больше ресурсов, чем требуется. Серьёзные утечки могут сделать сайты непригодными для использования.
Чтобы узнать, сколько памяти потребляют разные страницы, необходимо открыть встроенный диспетчер задач.
Открыв вкладку Chrome Memory, вы получите доступ к трём основным методам анализа использования памяти веб-сайта:
- Heap snapshot — распределение памяти по DOM.
- Allocation instrumentation on timeline — отслеживание выделения памяти в процессе загрузки страницы.
- Allocation sampling — измерение выделенной памяти для длительных запросов.
Ключевые возможности:
- Исправление проблем с памятью.
- Профилирование CPU при работе с JavaScript.
Application
Вкладка для инспектирования и очистки всех загруженных ресурсов, в том числе IndexedDB или Web SQL баз данных, local и session storage, cookie, кеша приложения, изображений, шрифтов и таблиц стилей.
Ключевые возможности
- Быстрая очистка хранилищ и кеша.
- Инспектирование хранилищ, баз данных и кеша, управление ими.
- Инспектирование и удаление файлов cookie.
Security
На вкладке можно ознакомиться с протоколом безопасности при его наличии и просмотреть данные о сертификате безопасности, если он есть.
Инструмент используется для отладки проблем смешанного контента, проблем сертификатов и так далее.
Ключевые возможности
- Окно Security Overview быстро подскажет, безопасна текущая страница или нет.
- Есть возможность ознакомиться с отдельными источниками, чтобы просмотреть соединение и детали сертификата (для безопасных источников) или узнать, какие запросы не защищены (для небезопасных источников).
Lighthouse
После выбора необходимых настроек и нажатия кнопки «Run», панель аудита анализирует процесс загрузки страницы и предоставляет предложения по оптимизации для уменьшения времени загрузки и повышения её отзывчивости.
Анализируются такие параметры, как кеширование ресурсов, gzip-сжатие, наличие неиспользуемых частей JS-кода и CSS-правил, а также многое другое. Затем пользователю выводится сгруппированный список рекомендаций, выполнение которых позволяет существенно оптимизировать скорость загрузки и отзывчивость страницы.
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний!Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!