Лабораторные работы Цифровая кафедра ФЭА 4 семестр / Введение в тестирование веб-приложений / cktestwebsecond

МИНОБРНАУКИ РОССИИ

Санкт-Петербургский государственный

электротехнический университет

«ЛЭТИ» им. В.И. Ульянова (Ленина)

Цифровая Кафедра

ПРАКТИЧЕСКАЯ РАБОТА №2

Тестирование на уровне протокола HTTP средствами DevTools

Студенты гр. 4404		Комарницкий М. С. Коншин М. В. Кудрявцев С. А.
Преподаватель		Турнецкая Е.Л.

Санкт-Петербург

2026

Цель.

Получение практических навыков по тестированию сетевых протоколов с помощью инструментов веб-разработчика браузера.

Задачи.

1. Познакомиться с рабочим пространством инструментов веб-разработчика в браузере.

2. Установить параметры фильтрации тестирования.

3. Провести тестирование выбранного элемента веб-страницы.

В практической работе проводится тестирование веб-приложения “ВКонтакте” - URL: https://vk.com . Использованный браузер - Safari.

Активация инструментов веб-разработчика.

Для начала тестирования был открыт сайт https://vk.com в браузере Safari. Далее открыты инструменты разработчика, в которых выбрана вкладка Сеть, выключен кэш и выполнена перезагрузка страницы.

На скриншоте зафиксирована панель разработчика (DevTools). Продемонстрирован каскад загрузки и все подгружаемые элементы веб-страницы ВКонтакте без ограничений фильтрации (вкладка "All").

Скриншот №1: Общий вид вкладки Network со всеми загруженными элементами

Установка параметров фильтрации.

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

Скриншот №2: Вкладка Network с отфильтрованными изображениями

Тестирование выбранного элемента.

На вкладке определен статус ответа сервера (200 OK), метод получения информации (GET), а также IP-адрес сервера. В заголовках представлены параметры передачи, тип контента и данные о кэшировании

Скриншот №3: Вкладка “Заголовки”

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

Скриншот №4: Вкладка “Предварительный просмотр” (Preview)

Вкладка “Ответ” демонстрирует неотформатированный исходник ответа сервера. Для изображений здесь может отображаться графическая заглушка или бинарный код, так как это не текстовый формат (в отличие от HTML или JS файлов).

Скриншот №5: Вкладка “Ответ”

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

Скриншот №6: Вкладка “Инициатор”

Изучение данных загрузки позволяет оценить степень оптимизированности контента сайта. Зафиксировано время ожидания ответа от сервера ВКонтакте, длительность скачивания графического контента и планирование ресурсов.

Скриншот №7: Вкладка “Синхронизация”

На скриншоте зафиксирована вкладка «Файлы cookie» (Cookies) для выбранного графического элемента. Как видно из панели разработчика, таблица пуста. Данное поведение не является ошибкой, а демонстрирует архитектурную оптимизацию высоконагруженных систем (таких как ВКонтакте). Статические медиафайлы (в данном случае .jpg изображение) раздаются с отдельных серверов доставки контента (CDN, например, userapi.com), которые специально настроены как cookieless domains (домены без файлов cookie). Поскольку серверу не требуется идентифицировать пользователя или проверять сессию для простой отдачи публичной картинки в ленту, куки не передаются. Это исключает передачу лишних заголовков, существенно экономя сетевой трафик и ускоряя загрузку страницы

Скриншот №8: Вкладка “Файлы cookie” с пустыми значениями

Вывод.

В ходе выполнения практической работы были успешно освоены навыки тестирования сетевых протоколов (HTTP/HTTPS) инструментами веб-разработчика (DevTools) на примере высоконагруженного сервиса ВКонтакте. Мы научились активировать инструменты мониторинга, использовать фильтрацию сетевых запросов для изоляции нужного трафика и проводить глубокий анализ выбранного элемента. Детальное изучение вкладок Headers, Preview, Response, Initiator, Синхронизации и Cookies позволило на практике понять структуру HTTP-сообщений (стартовая строка, заголовки, тело), оценить параметры кэширования, скорость загрузки контента и проверить флаги безопасности сессионных cookie. Проблем при тестировании не возникло, интерфейс DevTools позволил получить всю требуемую информацию о состоянии соединения. Особый интерес вызвал анализ файлов cookie для статических изображений: в ходе работы на практике была выявлена и обоснована работа паттерна "cookieless domain", применяемого ВКонтакте для оптимизации доставки контента через CDN-серверы.

Список использованных источников.

1. Аграновский, А. В. Тестирование веб-приложений: учебное пособие / А. В. Аграновский, В.С. Павлов, Е.Л. Турнецкая. Санкт-Петербург: ГУАП, 2020. 155 с. (дата обращения: 24.05.2026)

2. Официальное руководство Apple Support по использованию инструментов разработчика в меню «Разработка» в браузере Safari на Mac. URL: https://support.apple.com/ru-ru/guide/safari/sfri20948/mac. (дата обращения: 24.05.2026)

3. Техническая документация Apple Developer по инструментам разработчика Safari (Safari Developer Features). URL: https://developer.apple.com/documentation/safari-developer-tools. (дата обращения: 24.05.2026)

4. Обзор инструментов разработки в браузерах (включая Web Inspector для Safari) от MDN Web Docs. URL: https://developer.mozilla.org/ru/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools. (дата обращения: 24.05.2026)