Инструменты тестировщика: Chrome DevTools
Разбираем Chrome DevTools — встроенный инструмент разработчика в браузере Google Chrome. Научимся открывать панель DevTools, инспектировать элементы страницы, тестировать адаптивную верстку на разных устройствах, изменять содержимое и стили элементов, а также анализировать сетевые запросы. 📋 Что будет в видео: • Открытие DevTools через контекстное меню и горячие клавиши • Инспекция HTML-элементов страницы • Включение адаптивного режима (Toggle device toolbar) • Тестирование сайта на разных устройствах: iPhone SE, Samsung Galaxy, iPad Pro • Удаление элементов со страницы (Delete element) • Изменение текста и контента в реальном времени • Редактирование цветов (color и background-color) • Вкладка Network: анализ сетевых запросов • Просмотр Headers (статус, URL) и Response (данные от сервера) 🔗 Полезные ссылки: • Теория к уроку на Stepik: https://stepik.org/a/254843 • Все мои курсы и материалы: https://denis-timoshin.tilda.ws/ • Тестовый сайт: https://d-timoshin.github.io/QualityFirst/ • Официальная документация Chrome DevTools: https://developer.chrome.com/docs/devtools/ 🚀 Курс «Тестирование веб-приложений: от основ QA до внедрения AI» уже доступен на Stepik — подписывайся, чтобы не пропустить новые уроки! #ChromeDevTools #тестирование #QA #вебприложения #инструменты #практикум #обучение #тестировщик #адаптивность #Network #AI
Разбираем Chrome DevTools — встроенный инструмент разработчика в браузере Google Chrome. Научимся открывать панель DevTools, инспектировать элементы страницы, тестировать адаптивную верстку на разных устройствах, изменять содержимое и стили элементов, а также анализировать сетевые запросы. 📋 Что будет в видео: • Открытие DevTools через контекстное меню и горячие клавиши • Инспекция HTML-элементов страницы • Включение адаптивного режима (Toggle device toolbar) • Тестирование сайта на разных устройствах: iPhone SE, Samsung Galaxy, iPad Pro • Удаление элементов со страницы (Delete element) • Изменение текста и контента в реальном времени • Редактирование цветов (color и background-color) • Вкладка Network: анализ сетевых запросов • Просмотр Headers (статус, URL) и Response (данные от сервера) 🔗 Полезные ссылки: • Теория к уроку на Stepik: https://stepik.org/a/254843 • Все мои курсы и материалы: https://denis-timoshin.tilda.ws/ • Тестовый сайт: https://d-timoshin.github.io/QualityFirst/ • Официальная документация Chrome DevTools: https://developer.chrome.com/docs/devtools/ 🚀 Курс «Тестирование веб-приложений: от основ QA до внедрения AI» уже доступен на Stepik — подписывайся, чтобы не пропустить новые уроки! #ChromeDevTools #тестирование #QA #вебприложения #инструменты #практикум #обучение #тестировщик #адаптивность #Network #AI




