ОБЗОР ИНСТРУМЕНТА РАЗРАБОТЧИКА СHROME DEVTOOLS

👉🏼 В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью» или «отладчиком». Сегодня поговорим о Chrome. Безусловно, вы найдете множество статей на тему работы с Chrome DevTools, но я поделюсь, как этот инструмент можно применять в тестировании 🙌🏻

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

1. Elements
В этом разделе содержится вся информация о разметке страницы - html/css, можно исследовать любые объекты, их размеры и прочие параметры, а также редактировать их. Таким образом, можно проверять верстку страницы. Еще можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана 😏

2. Console
Популярная панель у тестировщиков, которая отображает наличие/отсутствие ошибок/предупреждений в коде. Это один из способ понять, на какой стороне возникла проблема, если, например, в консоли вы увидели «404». Есть даже соответствующие сайты с информацией о кодах ответа (состояния) HTTP. Так что вы легко и самостоятельно сможете со всем ознакомиться, если станет интересно.
Все коды сгруппированы в 5 классов: информационные ошибки 100 - 199, успешные статусы 200 - 299, перенаправления 300 - 399, клиентские ошибки 400 - 499, серверные ошибки 500 - 599. Тестировщику очень важно правильно завести баг и, соответственно, правильно указать на какой стороне ошибка. О том, как еще можно определить, на какой стороне ошибка и как правильно заводить баги мы еще поговорим)

3. Sources панель позволяет выполнять операции с кодом страницы.
Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):

🔻Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
🔻Зона текста. В ней находится текст файлов.
🔻Зона информации и контроля.
В зоне исходных файлов выбирается необходимый элемент, в зоне текст выполняется непосредственно его отладка, а в зоне информации и контроля можно запускать/останавливать отлаженный код.

4. Network
Отслеживает время исполнения определенных запросов и сами запросы.
Это, пожалуй, самая важная вкладка для тестировщиков при описывании багов. Если кратко, именно здесь можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики. Некоторые из этих данных нужно описывать в багах, чтобы разработчикам было удобнее и быстрее их фиксить.

5. Performance
Используется при необходимости полного обзора затраченного времени. На что оно было потрачено, как много его потребовалось на тот или иной процесс.

6. Memory
Данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.

7. Application
Предназначена для исследования загруженных элементов. Позволяет взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и т.д.

8. Security
Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.

/Скоро выйдет крутой пост о тестировании игр, не забудь подписаться 😉
В его создании мне помогут опытные разработчики.

#QAглазамиДжуна_понятия
#QAглазамиДжуна_литература
#QAглазамиДжуна_полезное
#QAглазамиДжуна_ресурсы