Для чего нужен DevTools Тестировщику? Часть 1.

Тестировщику без DevTools никуда. Это основа основ без которой вы мало что можете сделать на веб странице.

Что такое DevTools?

DevTools — это набор инструментов, встроенных в браузеры, таких как Chrome, Firefox, Safari и Edge. Они предоставляют доступ к различным функциям для анализа, отладки и оптимизации веб-страниц. DevTools позволяют тестировщикам проверять код, выявлять ошибки и улучшать производительность приложений.

Существует несколько способов открыть Chrome DevTools в зависимости от того, к какому инструменту вы хотите получить доступ.

• Если вы хотите проверить стили или атрибуты узла DOM, щёлкните элемент правой кнопкой мыши и выберите «Просмотреть код» или "Исследовать элемент".

• Комбинация клавиш Ctrl+Shift+I или F12:
• Через настройки браузера

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

1. Открепить DevTools и открыть их в другом окне.
2. Прикрепить к левому краю.
3. Прикрепить к нижнему краю.
4. Прикрепить к правому краю.

Панель открывается только для текущей вкладки.

Основные функции DevTools

1. Панель Elements (Элементы)
   Используется для выбора и редактирования любых HTML-элементов на странице.
   Позволяет свободно манипулировать DOM и CSS.
2. Панель Console (Консоль)
   Необходима для логирования диагностической информации в процессе разработки или взаимодействия с JavaScript на странице.
   Здесь также можно осуществлять поиск элементов.
3. Панель Sources (Источники)
   Показывает все файлы, подключённые к текущей странице.
4. Панель Network (Сеть)
   Позволяет мониторить процесс загрузки страницы и всех файлов, которые подгружаются при её загрузке.
5. Панель Performance (Производительность)
   Отображает таймлайн использования сети, выполнения JavaScript кода и загрузки памяти.
   Применяется для оценки производительности работы страницы в целом.
6. Панель Memory (Память)
   Используется для отслеживания нагрузки, которую оказывает выполнение JS-кода на систему.
7. Панель Application (Приложение)
   Содержит инструменты для просмотра всех загруженных ресурсов и работы с ними: cookie, кеш приложения, изображения, шрифты, таблицы стилей, локальное хранилище.
8. Панель Security (Безопасность)
   Отображает информацию о протоколе безопасности, данные о сертификате, если он есть, безопасной загрузке ресурсов.
   Используется для обнаружения проблем безопасного/небезопасного содержимого, проблем сертификатов и так далее.
9. Панель Lighthouse
   После выбора нужных параметров и запуска системы аудита происходит анализ загружаемой страницы и предоставляются предложения по оптимизации страницы для уменьшения времени её загрузки и увеличения отзывчивости.

Device Toolbar

Функция Device Toolbar позволяет эмулировать различные разрешения экрана и устройства (например, телефоны или планшеты) непосредственно в браузере. Это используется для базового тестирования совместимости сайта с различными устройствами.

Активация Device Toolbar происходит при клике на кнопку Device Toolbar или комбинацией клавиш Ctrl+Shift+M:

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

Также вы можете добавлять различные настройки

Применение DevTools в тестировании

DevTools играют ключевую роль в процессе тестирования веб-приложений. Вот несколько примеров их использования:

1. Анализ HTML и CSS
   С помощью панели элементов можно просматривать и редактировать HTML-код, что помогает выявлять ошибки верстки и улучшать структуру страницы.
2. Отладка JavaScript
   Консоль позволяет выполнять JavaScript-код и отлаживать его, что особенно полезно при выявлении и исправлении ошибок в коде.
3. Анализ производительности
   Инструменты производительности помогают тестировщикам выявлять медленные запросы и оптимизировать код для повышения скорости работы приложения.
4. Тестирование адаптивности
   Функция эмуляции устройств позволяет тестировать сайт на разных разрешениях экрана и устройствах, что важно для обеспечения адаптивности и кросс-браузерной совместимости.

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

Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний! Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!