Использование Chrome DevTools

Основная информация

Здесь мы расскажем о Chrome DevTools, почему он важен для QA и какие функции мы используем.

Что это вообще такое?

Chrome DevTools — это набор инструментов для веб-разработчиков, встроенный непосредственно в браузер Google Chrome и доступный в любой его версии.

В каждом браузере есть инструменты разработчика, и почти во всех браузерах они выглядят одинаково. Chrome является наиболее распространённым браузером, поэтому мы пишем о нём.

Почему мы его используем?

Мы используем его для облегчения тестирования, улучшения наших отчётов об ошибках и помощи разработчикам в исправлении ошибок.

Также Chrome DevTools используется в таких ситуациях:

когда есть ошибка в бэкенде, но вы не видите её в пользовательском интерфейсе;
когда вы хотите очистить кэш, куки или данные сервера;
когда вы хотите проверить, реализована ли страница согласно дизайну (макету);
когда вы хотите проверить, отправляет ли фронтенд-приложение запросы к бэкенду.

БЕСПЛАТНО СКАЧАТЬ КНИГИ в телеграм канале "Библиотека тестировщика"

Практический материал

Как использовать

Вы можете открыть инструменты разработчика с помощью кнопки F12 или правого клика мышью — Просмотреть код (Inspect).

Панель элементов

В панели элементов вы можете увидеть структуру страницы в HTML и CSS.

Что такое HTML и CSS?

Веб-страница состоит из кода HTML и CSS. HTML определяет структуру веб-страницы, а CSS — визуальное представление элементов HTML. Каждый браузер может отображать код HTML и CSS. Здесь вы найдете более подробную информацию о HTML и CSS:

Исследование элемента (Inspect)

Два наиболее распространенных способа проверки элементов:

через значок выбора элемента;
наведение курсора мыши на HTML-код.

Иконка выбора элемента расположена в левом верхнем углу инструментов разработки.

Chrome DevTools позволяет проверить как будет выглядеть веб-страница на экранах с разными разрешениями. Значок панели инструментов устройства расположен рядом с иконкой выбора элемента для проверки в левом верхнем углу инструментов разработчика. Нажав на него, вы можете использовать адаптивный дизайн страницы.

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

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

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

Вкладка стилей (Styles)

Она располагается в нижней части панели элементов. С её помощью мы проверяем CSS-свойство выбранного элемента.

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

Мы используем панель элементов, когда:

мы хотим проверить, что страница реализована согласно дизайну (проверка CSS-свойств страницы);
мы хотим внести улучшения, переместить элемент влево или вправо, увеличить отступы, изменить текст и т.д.;
в автоматизации, когда мы хотим определить местоположение элемента.

Консоль (Console)

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

Примечание: консольные ошибки будут на каждой странице, но вам нужно сообщать только о фатальной ошибке.

Используйте консоль в следующих случаях:

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

Сеть (Network)

Панель «Сеть» записывает информацию о каждой сетевой операции на вашем сайте, включая подробные временные данные, заголовки HTTP-запросов и ответов, файлы cookie, данные WebSocket и многое другое.

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

Когда использовать вкладку «Сеть»:

когда мы хотим увидеть полученные от сервера данные;
когда мы хотим увидеть статус некоторого запроса;
когда мы хотим узнать, сколько времени занимает запрос.

Проверка статуса запроса из панели сети:

В случае, если вам нужно проверить ответ, полученный от сервера, вы должны сделать следующее:

щёлкните по панели сети
перезагрузите страницу
вы увидите сетевые запросы
нажмите на один из сетевых запросов

Вы можете проверить статус запроса и всевозможную информацию о нём в заголовках. Вы также можете увидеть содержимое запроса и просмотреть его в одном из следующих вариантов.

Как очистить кэш, куки, сессию и локальное хранилище

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

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

Существует несколько способов очистки кэша:

самый простой способ — при открытых инструментах разработчика нажать правой кнопкой мыши на значок обновления в браузере и выбрать «Очистка кэша и жёсткая перезагрузка»;
второй простой способ — открыть вкладку в режиме инкогнито.

Очистка локального хранилища:

щёлкните правой кнопкой мыши и запустите просмотр кода (Inspect)
выберите панель приложений (Application)
разверните папку локального хранилища
щёлкните правой кнопкой мыши на содержимое этой папки
нажмите кнопку «Очистить» (Clear), и хранилище будет удалено

Очистка хранилища сессии:

щёлкните правой кнопкой мыши и запустите просмотр кода (Inspect)
выберите панель приложений (Application)
разверните папку хранения сессий
щёлкните правой кнопкой мыши на содержимое этой папки
нажмите кнопку «Очистить» (Clear), и хранилище будет удалено

Очистка файлов cookie:

щёлкните правой кнопкой мыши и запустите просмотр кода (Inspect)
выберите панель приложений (Application)
разверните папку с файлами cookie
щёлкните правой кнопкой мыши на содержимое этой папки
нажмите кнопку «Очистить» (Clear), и хранилище будет удалено

Перевод статьи «Using Chrome Dev Tools».