Помимо измерения расстояний, в Chrome DevTools доступны следующие инструменты:
- Elements. 2 Позволяет просматривать и редактировать элементы DOM-дерева страницы. 2
- Sources. 2 Встроенная среда разработки, которая даёт возможность смотреть и редактировать файлы, из которых состоит веб-страница. 2
- Console. 2 Консоль превращает браузер в интерпретатор JS-кода, что позволяет запускать на любой странице любой скрипт. 2
- Network. 2 Выводит в виде таблицы все запросы, которыми обмениваются браузер и сервер. 2 Запросы можно фильтровать по типу, статусу и другим параметрам. 2
- Security. 2 На этой вкладке можно выяснить, насколько безопасна страница и какие протоколы шифрования она использует. 2
- Performance. 2 Позволяет анализировать производительность страницы во время её работы. 2
- Memory. 2 Инструмент для контроля нагрузки кода на систему. 2 По умолчанию показывает, сколько памяти потребляет страница, но можно запросить детальный отчёт по каждому элементу. 2
- Lighthouse. 2 Браузер анализирует сайт по четырём основным параметрам: производительность, доступность, SEO и лучшие практики, а потом даёт советы, как улучшить показатели. 2
- Progressive Web App. 1 Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ли он ошибку 200. 1
- Coverage. 1 Инструмент для поиска и исправления «мёртвого» кода, который присутствует в файлах CSS и JavaScript, но нигде не используется. 1
Набор доступных вкладок может варьироваться в зависимости от версии Chrome и установленных расширений. 3