Всё, Что Нужно Знать О Chrome DevTools. Продвинутый Курс Тестирование ПО. Занятие 5.

• Приветствие и объявление о пятом юбилейном семинаре.  

• Обзор тем: Chrome DevTools, инструменты разработчика.  

• Важность понимания Chrome DevTools для тестировщиков и разработчиков.  

• Работа с консолью Chrome DevTools.  

• Подключение внешних устройств и тестирование разрешений экрана.  

• Использование инструментов для работы с cookies, local storage, HTML, network и Lighthouse.  

• Вопросы о защите cookies от чтения JavaScript-кодом.  

• Как сделать так, чтобы cookies передавались только по HTTPS.  

• Обзор курса: Basic, без free, с возможностью конвертации в реальные деньги.  

• Обзор тем: DNS, URL, IP, типы запросов, клиент-серверная архитектура, кэш, cookies, DNS.  

• Как открыть Chrome DevTools: сочетания клавиш и контекстное меню.  

• Обзор консоли Chrome DevTools: выполнение JavaScript-кода, ошибки и логи.  

• Пример выполнения JavaScript-кода в консоли.  

• Типы логов: info, warning, error.  

• Фильтрация логов и настройка консоли.  

• Пример изменения фона сайта с помощью JavaScript.  

• Тестирование скорости воспроизведения видео на YouTube.  

• Ограничения на изменение параметров страницы через JavaScript.  

• Создание простых Chrome расширений с минимальным количеством кода.  

• Возможность изменения элементов на HTML-странице локально.  

• Пример использования для тестирования и отладки.  

• Использование Chrome DevTools для тестирования сайтов на мобильных устройствах.  

• Возможность выбора различных устройств для тестирования.  

• Удобство для разработчиков и тестировщиков.  

• Новая функция в Chrome для автоматизации тестирования.  

• Запись действий пользователя и воспроизведение их с помощью макросов.  

• Пример использования для создания автоматизированных скриптов.  

• Local Storage как локальная база данных в браузере.  

• Cookies как способ хранения данных между сессиями.  

• Возможность очистки данных через консоль.  

• Serviceworkers как отдельные процессы для обработки уведомлений.  

• Пример использования для отправки push-уведомлений.  

• Возможность очистки данных через консоль.  

• Работа с HTML и CSS в консоли Chrome.  

• Возможность изменения HTML-разметки и стилей.  

• Пример удаления и добавления элементов на страницу.  

• Верстка сайта и элементы HTML.  

• Возможность просмотра ссылок и стилей.  

• Отключение стилей на странице.  

• Обсуждение работы с HTML-файлами и стилями.  

• Демонстрация чистого HTML-кода без стилей.  

• Показ, как выглядит HTML-страница без стилей.  

• Обзор элементов на странице и их стилей.  

• Демонстрация изменения стилей элементов.  

• Показ, как можно изменить цвет и размер элементов.  

• Обзор инструментов для работы со стилями.  

• Демонстрация выбора и изменения стилей элементов.  

• Показ, как можно изменить текст и фон элементов.  

• Обсуждение работы с кодом и стилями.  

• Показ, как можно изменять элементы через код.  

• Демонстрация переноса изменений из одного проекта в другой.  

• Объяснение процесса загрузки HTML и стилей.  

• Показ, как браузер обрабатывает запросы на загрузку стилей.  

• Обсуждение важности правильного порядка загрузки файлов.  

• Обсуждение ошибок и их обработки.  

• Показ, как тестировщики могут использовать инструменты разработчика.  

• Обсуждение важности тестирования на черный ящик и белого ящика.  

• Тестировщики помогают находить и исправлять баги.  

• Они могут оптимизировать запросы, чтобы уменьшить вес и улучшить производительность.  

• Пример: на проекте были проблемы с производительностью из-за лишних запросов, которые отправлялись на сервер.  

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

• Пример: уменьшение размера изображений с 2 МБ до 500 КБ без потери качества.  

• Важно, чтобы запросы не отправлялись повторно, чтобы избежать перегрузки сервера.  

• На проекте были проблемы с производительностью из-за повторных запросов.  

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

• Оптимизация запросов помогла избежать перегрузки сервера и улучшить работу сайта.  

• Тестировщики могут оптимизировать данные, чтобы уменьшить объем передаваемых данных.  

• Пример: отправка только необходимых данных вместо всех полей товара.  

• Важно использовать максимально оптимальные запросы для уменьшения нагрузки на сервер.  

• Тестировщики должны знать Chrome DevTools для анализа запросов и ответов.  

• Пример: использование Chrome DevTools для анализа запросов на Instagram.  

• Возможность просмотра заголовков, параметров и данных запросов и ответов.  

• Тестировщики могут анализировать данные запросов и ответов для выявления проблем.  

• Пример: анализ данных JSON для выявления ошибок и оптимизации.  

• Возможность сохранения и анализа данных для дальнейшего использования.  

• Preserve Log позволяет сохранять и анализировать запросы до перезагрузки страницы.  

• Это помогает выявить проблемы с производительностью и оптимизировать запросы.  

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

• Перезагрузка страницы несколько раз для очистки кэша.  

• Включение фильтрации для отображения только нужных запросов.  

• Использование троттлинга для замедления сети.  

• Тестирование сайта на медленном 3G интернете.  

• Отключение интернета для проверки работы сайта.  

• Настройка кастомных задержек для запросов.  

• Настройка user-agent для имитации запросов с разных устройств.  

• Использование фильтров для отображения только нужных типов файлов.  

• Фильтрация запросов по времени и размеру.  

• Запросы на получение данных JSON и XML.  

• Разделение запросов на получение данных и других типов данных.  

• Подстановка данных JSON в HTML-страницу.  

• Фильтрация запросов по методу GET, POST и другим.  

• Фильтрация запросов по домену, включая субдомены.  

• Возможность фильтрации по заголовкам и cookies.  

• Копирование запросов для отправки в терминал.  

• Вставка запросов в консоль для проверки статуса.  

• Возможность копирования и отправки запросов с cookies и заголовками.  

• Возможность копирования всех запросов из архива и отправки их в консоль или терминал.  

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

• Разработчики могут использовать импорт-экспорт для анализа и исправления запросов.  

• Тестировщики могут экспортировать все запросы для отправки разработчикам.  

• Разработчики могут импортировать экспортированные запросы для анализа и исправления багов.  

• Это упрощает процесс воспроизведения и исправления багов.  

• Возможность создания скриншотов всей страницы с помощью команды control shift p в Chrome DevTools.  

• Это полезно для тестирования и анализа страниц.  

• Скриншоты можно конвертировать в PDF и экспортировать для дальнейшего использования.  

• Lighthouse помогает тестировать доступность и производительность сайтов.  

• Можно тестировать сайты на соответствие стандартам доступности и SEO.  

• Lighthouse предоставляет метрики для оценки производительности и доступности сайтов.  

• Возможность подключения Android-девайсов через USB для использования Chrome DevTools.  

• Это позволяет тестировать сайты на мобильных устройствах и анализировать запросы.  

• Подключение Android-девайсов удобно для разработки и тестирования.  

• Вопросы на собеседованиях могут касаться различных аспектов работы с браузерами и серверами.  

• Важно уметь анализировать и объяснять, что происходит при открытии страницы в браузере.  

• Это помогает лучше понимать работу веб-сайтов и их производительность.