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

В предыдущих статьях мы разобрали структуру DevTools и основные элементы. В этой статье разберём каждую вкладку в консоли.

Elements

Используется для выбора и редактирования любых HTML элементов на странице, что позволяет свободно манипулировать DOM и CSS.

Вкладка содержит две кнопки: Выбор элемента с помощью курсора и Переключение в режим выбора устройств. Это полезно при разработке адаптивных интерфейсов, мобильных версий сайтов или для тестирования страниц с разным разрешением монитора. При выборе любого DOM элемента на вкладке Styles отображаются все CSS правила, применяемые к нему, включая неактивные.

Все правила разбиты на блоки и упорядочены по убыванию специфичности селектора. Можно на лету изменять значения, деактивировать и добавлять новые правила, наблюдая за их влиянием на отображение. Для выбранного элемента DOM доступны дополнительные вкладки: Event Listeners (содержит все события, относящиеся к данному элементу), DOM Breakpoints (точки останова для элемента) и Properties (список всех свойств для элемента). Также могут быть дополнительные вкладки, добавляемые расширениями для Chrome.

Ключевые возможности:

• Просмотр и редактирование в реальном времени любого элемента DOM.
• Просмотр и изменение CSS правил, применяемых к любому выбранному элементу, в панели Styles.
• Просмотр всего списка событий и свойств для элемента на соответствующих вкладках.

Console

Вкладка Console позволяет просматривать, отлаживать и выполнять JS-код для загруженной страницы.

Ключевые возможности:

1. Использование консоли как отдельной панели или как окна рядом с любой другой панелью.
2. Возможность группировать большое количество сообщений или выводить их на отдельных строках.
3. Очистка всех логов или сохранение их между перезагрузкой страниц, сохранение логов в отдельный файл.
4. Фильтрация по типу сообщения или по регулярному выражению.
5. Логирование XHR запросов.
6. Поиск локаторов ($x("") для xpath и $$("") для CSS)

Sources

Основное назначение данной вкладки — работать с исходным кодом файлов веб-приложения.

Эта вкладка имеет несколько вложенных вкладок:

1. Page — показывает все файлы, которые используются на данной странице: сам исходный код, файлы стилей, код на JavaScript, изображения, шрифты и так далее.
2. Filesystem — можно добавить папки с диска и посмотреть содержимое текстовых файлов (HTML, CSS, JavaScript), отредактировать код, скопировать его или сохранить изменённый файл как новый файл. Данную вкладку можно использовать и как полноценный редактор кода, подключаясь к локальным файлам.
3. Overrides — позволяет переопределять стили и скрипты, применяемые к странице.
4. Content Scripts — позволяет добавлять скрипты, которые будут выполняться на всех страницах.
5. Snippets — позволяет запускать сниппеты с любой страницы.

Ключевые возможности:

1. Отладка Вашего кода с помощью брейкпоинтов.
2. Использование браузера в качестве IDE с помощью Workspaces.
3. Запуск сниппетов с любой страницы.

Network

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

На панели отображается таблица всех запросов к данным и файлам. Над ней располагаются кнопки для фильтрации нужных запросов, очистки таблицы или включения/отключения записи запросов, кнопки управления отображением таблицы. Также есть дополнительные переключатели:

• Preserve log — не очищать таблицу при перезагрузке страницы.
• Disable cache — отключить кеш браузера (будет работать только при открытом DevTools).
• Offline — эмулирует отсутствие интернета, также позволяет эмулировать скорость скачивания/загрузки данных и пинг для различных типов сетей.

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

Ключевые возможности:

• Возможность отключить кеширование или установление ограничения пропускной способности.
• Получение подробной таблицы с информацией о каждом запросе.
• Фильтрация и поиск по всему списку запросов.

Время загрузки страницы

Режим диафильма

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

Чтобы воспользоваться этой функцией, щёлкните на панель Network, откройте настройки, включите Capture screenshots и нажмите Ctrl + R для обновления страницы. После этого панель покажет вам, как страница отображается в процессе загрузки.

Фильтры

Раздел фильтров позволяет показывать только элементы, удовлетворяющие определённым условиям.

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

1. All — все элементы, без фильтрации.
2. XHR (XMLHttpRequest) — запросы к серверу из JavaScript-кода.
3. JS — только файлы JavaScript (*.js).
4. CSS — только файлы стилей (*.css).
5. Img — только изображения (JPEG, GIF, PNG, SVG и другие).
6. Media — аудио- и видеоматериалы.
7. Font — шрифты.
8. Doc — документы, под которыми обычно подразумеваются сами HTML-страницы (text/html).
9. WS (WebSocket) — запросы по технологии веб-сокетов. Могут быть, например, в чатах.
10. Manifest — файлы манифеста. Специальные файлы для настройки отображения сайта на мобильных устройствах.
11. Other — все остальные.

В поле Filter можно вводить специальные строки для фильтрации результатов по нужным запросам. Например:

• Is:running — для просмотра всех запросов, которые всё ещё выполняются на странице.
• larger-than:1024 — для просмотра ресурсов размером более 1024 байт.
• status-code:200 — для просмотра всех успешно загруженных ресурсов.

Вы можете использовать несколько свойств одновременно, разделяя их пробелами. Например:

• mime-type:image/gif larger-than:1K — отображает все GIF-файлы, размер которых превышает один килобайт.

Эти фильтры с несколькими свойствами эквивалентны операциям «и». Операции «или» в настоящее время не поддерживаются.

Все поддерживаемые свойства:

1. domain: — отображать только ресурсы из указанного домена. Можно использовать маску (*) для отображения нескольких доменов. Например, * .com отображает ресурсы со всех доменов, заканчивающихся на .com. DevTools автоматически подтягивает все домены, запрошенные сайтом, и добавляет их в подсказки.
2. has-response-header: — показать ресурсы, которые содержат указанный HTTP-заголовок в ответе.
3. is:running — позволяет найти ресурсы типа WebSocket.
4. larger-than: — показать ресурсы, размер которых превышает указанный размер в байтах. Установка значения 1000 эквивалентна установке значения 1k.
5. method: — показать ресурсы, которые были получены с использованием указанного HTTP-метода (GET, POST и так далее).
6. mime-type: — показать ресурсы с выбранным MIME-типом.
7. mixed-content: — показать все ресурсы со смешанным контентом (mixed-content: all) или только те, которые отображаются в данный момент (mixed-content: display).
8. scheme: — показать ресурсы, которые были получены по HTTP (scheme:http) или HTTPS (scheme:https).
9. set-cookie-domain: — показать ресурсы, которые имеют заголовок Set-Cookie с указанным доменом.
10. set-cookie-name: — показать ресурсы с заголовком Set-Cookie с именем, соответствующим указанному значению.
11. set-cookie-value: — показать ресурсы, которые имеют заголовок Set-Cookie со значением, которое соответствует указанному в фильтре значению.
12. status-code: — отображать только те ресурсы, HTTP-код состояния которых соответствует указанному коду (200, 301, 404 и так далее).

Профили сети

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

Вы можете добавить свой профиль с уникальным значением скорости

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