Видео: Devtools

Подборка новых видео на тему Devtools на сегодня 22 April 2026 года

Devtools - смотрите онлайн

Chrome DevTools для тестировщиков (QA)

👉 Все мои курсы - 👉 Мой уютный телеграм канальчик - В этом уроке мы с вами подробно разберем такой популярный инструмент в арсенале тестировщика, как chrome devtools. Разберем все вкладки, научимся править css стили, писать css и xpath локаторы, разберем работу веб-сокетов, посмотрим какие ошибки могут быть и многое многое другое. Мои социальные сети: Поддержать канал на Boosty: Таймкоды: 00:00 - Вступление 00:15 - Способы открытия и расположения chrome devtools 01:35 - Про эмуляцию мобильных устройств 02:07 - Вкладка Elements 02:27 - Про HTML 03:30 - Про CSS 04:25 - Что может Inspect веб-элемента 06:45 - Сss и xpath локаторы 08:25 - Пишем css и xpath локаторы 11:37 - Вкладка Console 19:10 - Вкладка Sources 20:06 - Вкладка... Смотреть видео...

Chrome DevTools. Полный ГАЙД для Тестировщиков

❗️ Горящий Тестер в Телеграме - Chrome DevTools - один из важнейших, если не важнейший инструмент в работе Веб-тестировщиков. Но он может быть полезен не только при тестировании Веб, но и в других задачах. Меня зовут Антон Дуенин и в этом видео я дам вам полный гайд для QA по работе с Chrome DevTools. Разберем все вкладки, их назначение и как им пользоваться 🔥 Подписывайся на канал, ставь лайки, пиши комментарии и делись своим мнением по теме видео! Канал о тестировании и IT Горящий Тестер - Вопросы с собесов QA Горящий Собес - В сегодняшнем видосе: 00:00 Зачем нужны DevTools 00:45 Где найти DevTools 01:54 Как расположить DevTools? 02:57 Elements 07:51 БОНУС: Как протестировать адаптивную верстку? 11:55 Console 15:00... Смотреть видео...

Devtools для тестировщика | Devtools QA | применение на практике

В этом видео вы узнаете, как максимально эффективно использовать инструменты DevTools в роли тестировщика. Мы сосредоточимся только на ключевых вкладках, которые часто применяются при тестировании веб-приложений, без лишней информации, чтобы вы могли быстро освоиться и применять полученные знания на практике. Ссылка на второе видео с дополнением: Donate на поддержку канала: карта сбер - 2202 2068 4325 7309 Telegram: 0:00 Начало(вкладка Network) 0:50 Как составить запрос в Postman с помощью Devtools 3:18 Проверка запроса API graphql 4:48 Как определить на чьей стороне ошибка(фронт или бэк) 6:14 Вкладка Console 7:26 Инспектор элементов 8:49 Определение области нажатия 10:06 Фишка при работе с вкладкой Elements 10:42 Инструмент для... Смотреть видео...

Урок 5. Тестирование и его цели. Тренажер для тестировщика. Как работать с Devtools

Предыдущий урок: Следующий урок: 0:00 - план занятия 3:14 - цели тестирования по 7:50 - исчерпывающее тестирование 10:35 - скопление багов 12:23 - эффективность раннего тестирования 13:57 - парадокс пестицида 15:20 - тестирование зависит от продукта 21:37 - цикл тестирования по 24:36 - изучение предмета тестирования 29:44 - планирование тестирования 29:57 - исполнение тестирования 31:27 - стратегия тестирования 34:12 - тренажер для тестирования 1:14:32 - работа с devtools 1:39:24 - вопросы 1:52:07 - вопрос devtools 2:03:55 - автоматизированная и ручная проверка 2:18:33 - план занятий 2:21:25 - зачем нужны курсы Подпишись, и смотри полные it-курсы бесплатно!! 1. Тестировщик с нуля – 2. Python с нуля – 3. Java для начинающих – 4.... Смотреть видео...

Тестирование WEB приложений. Инструменты DevTools | РУНО

Зачем тестировщику DevTools и что с ним делать? Разбираем, как начать работу с инструментом, какие вкладки использовать, как назначить задачу для багфикса, чтобы разработчик был доволен. Тестировщик имитирует реальные действия пользователя, проверяет функциональность, надёжность и удобство ПО. Ищете себя в IT? Начните с тестирования! 🖥️ Курс «QA старт: ручное тестирование для начинающих»: — первый шаг к профессии. По окончании вы будете уметь: - применять разные уровни и типы тестирования - составлять тестовую документацию: тест-план, чек-листы, тест-кейсы - знать принципы тестирования и его основные задачи, различать ошибку, дефект и сбой - работать с API, понимать его основы, тестировать запросы с помощью Postman - использовать... Смотреть видео...

Chrome DevTools

👉 Все мои курсы - 👉 Мой уютный телеграм канальчик - На уроке мы разберем все вкладки chrome devtools, научимся править css стили, писать css и xpath локаторы, разберем работу веб-сокетов, посмотрим какие ошибки могут быть и многое многое другое. Мои социальные сети: Поддержать канал на Boosty: Таймкоды: 00:00 - Вступление 00:15 - Способы открытия и расположения chrome devtools 01:15 - Эмуляция мобильных устройств 01:33 - Изучаем вкладку Elements 01:53 - Про HTML 02:54 - Про CSS 03:44 - Изучаем возможности Inspect-а веб-элемента 05:40 - Про сss и xpath локаторы 07:20 - Учимся писать css локаторы 08:38 - Учимся писать xpath локаторы 09:13 - Изучаем вкладку Console 10:04 - Работаем с Filter в Console 10:41 - Исполняем js код в... Смотреть видео...

Devtools для тестировщика (дополнение) | Devtools QA | применение на практике

Данное видео дополнение первой части видео про devtools браузера. Ссылка на первое видео: Ссылка на сайт из видео для тренировки: есть еще один способ заморозить страницу: 1) Открыть devtools на вкладе elements 2) Нажать на поле ввода, чтобы появилось всплывающий элемент 3) Выбрать родительский элемент, в нашем случае div с id= 111main 4) Нажать на него правой кнопкой, выбрать Break On и в выпадающем списке выбрать вариант "attribute modifications" 5) Перейти на страницу и воспроизвести появление всплывающего элемента, в этот момент должно произойти "замораживание" страницы 6) Нажать опять на инспектор элементов и выбрать всплывающий элемент Donate на поддержку канала: карта сбер - 2202 2068 4325 7309 Telegram: 0:15 скопировать... Смотреть видео...

Тестирование и отладка React-компонентов: React DevTools на практике

⚡ Получить весь курс (22 урока) сразу: ✏️ Познакомимся с расширением React DevTools и разберёмся, зачем оно нужно. Покажу, как установить и где искать вкладки Components и Profiler. Проанализируем дерево компонентов To Do List: посмотрим props, хуки и контексты. Научимся вручную менять состояние прямо через DevTools и отслеживать результат. Разберём поиск и навигацию по компонентам в большом дереве. Перейдём во вкладку Profiler: научимся записывать рендеры, читать Flamegraph и Ranked, понимать, какие компоненты и почему перерисовываются. Включим подсветку обновлений, чтобы быстрее выявлять лишние ререндеры. На практике оптимизируем проект: вынесем локальное состояние из контекста, чтобы не будить всё приложение на каждом вводе. В... Смотреть видео...

DevTools — Design Mode, Media Queries, эмуляция геолокации Sensors, Vision Deficiencies Mode

✏️ Смотрим редкие фишки DevTools: режим редактирования (Design Mode), панель медиазапросов (Media Queries Panel), эмуляция геопозиции (Sensors), сохранение в глобальную переменную (Store as global variable). 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:09 | Режим редактирования (Design Mode) ▶ 01:38 | Панель медиазапросов (Media Queries Panel) ▶ 03:11 | Эмуляция геопозиции (Sensors) ▶ 04:53 | Сохранение в глобальную переменную (Store as global variable) ▶ 06:03 | Эмуляция проблемного зрения (Emulate Vision Deficiencies) ▶ 07:59 | Выводы 📚 Полезные ссылки: ➖ Design Mode: ➖ Media Queries Panel: ➖ Sensors: ➖ Emulate Vision Deficiencies: 💬 Чат в телеграмме (помощь новичкам): 🔸 Boosty (поддержать канал): 🗂️ Бесплатные курсы на канале: 🟠... Смотреть видео...

Алексей Козятинский — Протокол Chrome DevTools

Ближайшая конференция: HolyJS 2023 Autumn, 2–3 ноября (online), 11–12 ноября (offline, Санкт-Петербург) Подробности и билеты: — — . . В наше время Chrome DevTools является обязательным инструментом в руках веб-разработчика. Тем не менее не все понимают его гибкость и не все пользуются возможностью его дорабатывать и самостоятельно делать инструменты, которые помогут лучше работать с нашим кодом. Давайте это исправим ;) Доклад посвящен настоящему и будущему инструментов для Node.js. Алексей расскажет о DevTools Protocol и о том, как и какие его части можно использовать для того, чтобы делать свои инструменты для Node.js. В качестве примера он покажет, как можно измерить покрытие кода, используя только протокол. Дополнительно Алексей... Смотреть видео...

Фишки Chrome DevTools, о которых ты не знал — CSS Overview, Accessibility Tree, DOM Breakpoints

✏️ Разбираем необычные малоизвестные фишки DevTools: CSS Overview, Accessibility tree, DOM Breakpoints, Live Expressions и Frame rendering stats. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:11 | CSS Overview ▶ 03:08 | Accessibility tree ▶ 05:10 | DOM Breakpoints ▶ 06:58 | Live Expressions ▶ 07:46 | FPS (frame rendering stats) ▶ 08:42 | Выводы 📚 Полезные ссылки: ➖ CSS Overview: ➖ Accessibility tree: ➖ DOM Breakpoints: ➖ Live Expressions: ➖ Frame rendering stats: 💬 Чат в телеграмме (помощь новичкам): 🔸 Boosty (поддержать канал): 🗂️ Бесплатные курсы на канале: 🟠 HTML: 🔵 CSS: 🟡 JS: 🟢 A11y: ⚪️ Мастер-класс по верстке для новичков: 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): 🗺 Frontend Roadmap 2024 📌 Автор: ➖ Личный... Смотреть видео...

Chrome DevTools — Coverage, Paint Flashing, Console Levels

✏️ Продолжаем разбирать малоизвестные фишки DevTools: обнаружение неиспользуемого кода (coverage), скриншот элемента (capture node screenshot), уровни консоли (console levels), имитация замедления скорости сети (network throttling), индикация перерисовок (paint flashing). 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:10 | Обнаружение неиспользуемого кода (coverage) ▶ 02:53 | Скриншот элемента (capture node screenshot) ▶ 03:22 | Уровни консоли (console levels) ▶ 04:59 | Имитация замедления скорости сети (network throttling) ▶ 05:45 | Индикация перерисовок (paint flashing) ▶ 06:20 | Выводы 📚 Полезные ссылки: ➖ Coverage: ➖ Capture node screenshot: ➖ Console levels: ➖ Network throttling: ➖ Paint flashing: 💬 Чат в телеграмме (помощь новичкам):... Смотреть видео...

Фишки DevTools — Dual Screen Mode, Element Properties, Font Editor, Conditional Breakpoints

✏️ Разбираем малоизвестные фишки DevTools: условные точки останова, эмуляция устройства с двойным экраном, свойства элемента, поиск по коду подключенных файлов, редактор шрифтов. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:09 | Условные точки останова (Conditional Breakpoints) ▶ 02:04 | Эмуляция устройства с двойным экраном (Dual Screen Mode) ▶ 02:57 | Свойства элемента (Element properties) ▶ 04:09 | Поиск по коду подключенных файлов ▶ 04:46 | Редактор шрифтов (Font Editor) ▶ 05:35 | Выводы 📚 Полезные ссылки: ➖ Conditional Breakpoints: ➖ Element Properties: ➖ Search by code: ➖ Font Editor: 💬 Чат в телеграмме (помощь новичкам): 🔸 Boosty (поддержать канал): 🗂️ Бесплатные курсы на канале: 🟠 HTML: 🔵 CSS: 🟡 JS: 🟢 A11y: ⚪️ Мастер-класс... Смотреть видео...

Chrome DevTools: полный разбор для ускорения сайтов

В этом видео мы познакомимся со всеми инструментами разработчика в Chrome, которые полезны для тестирования скорости и ускорения сайтов. Современные браузеры предоставляют очень широкие возможности по диагностике скорости и оптимизации веб-приложений. Рассмотрим закладки Network, Performance, Lighthouse, Security и другие. Содержание ролика: 0:00 - Введение 0:30 - Запускаем DevTools 3:30 - Настройки throttling'а и торможения сети 5:10 - Изменение положения DevTools 5:30 - Закладка Elements 6:50 - Закладка Console 7:40 - Закладка Sources 7:50 - Закладка Network 16:15 - Панель overview в Network 20:06 - Закладка Performance 30:20 - Закладка Memory 30:50 - Закладка Application 31:25 - Закладка Security 32:35 - Закладка Lighthouse 38:55 -... Смотреть видео...

Закладка Performance DevTools в Chrome

Самый сложный и мощный инструмент исследования скорости сайтов - закладка Performance из инструментов разработчика Chrome. Разнообразие данных и подробность информации могут сбивать с толку при решении реальных задач оптимизации производительности. В этом видео мы пройдём все разделы закладки Performance из DevTools и разберём её функциональность. На этом канале мы создаём максимально полезные видео по вопросам ускорения сайтов, веб-производительности и клиентской, а также серверной оптимизации. Профессионально занимаясь ускорением сайтов, мы накопили значительный опыт, которым готовы поделиться с нашими зрителями и подписчиками. Так что присоединяйтесь, будет интересно! Профессиональное ускорение сайтов: Тестирование скорости сайтов:... Смотреть видео...

Урок 24. Работа с DevTools на сайте AliExpress. Postman практика

Предыдущий урок: Следующий урок: 0:00 - план занятия 5:14 - тестовые задания в вакансиях 8:10 - работа с DevTools (aliexpress) 30:36 - панель Console в DevTools 40:56 - панель Sources в DevTools 46:44 - смотрим страницу без стилей 1:02:03 - панель Sources в DevTools 1:02:26 - панель Network в DevTools 1:12:56 - панель Perfomance в DevTools 1:18:29 - панель Memory в DevTools 1:24:39 - панель Application в DevTools 1:29:22 - вопросы 1:31:08 - панель Security в DevTools 1:35:00 - панель Recorder в DevTools 1:41:24 - план будущих занятий 1:50:05 - экзаменационные билеты 1:59:47 - Postman теория 2:08:56 - Postman практика Подпишись, и смотри полные it-курсы бесплатно!! 1. Тестировщик с нуля – 2. Python с нуля – 3. Java для начинающих –... Смотреть видео...

Chrome DevTools для тестировщиков (QA)

В этом уроке мы с вами подробно разберем такой популярный инструмент в арсенале тестировщика, как chrome devtools. Разберем все вкладки, научимся править css стили, писать css и xpath локаторы, разберем работу веб-сокетов, посмотрим какие ошибки могут быть и многое многое другое. - бесплатный курс по postman "Postman-ниндзя: с нуля до автотестов" Мои социальные сети: Поддержать канал на Boosty: TELEGRAM: INSTAGRAM: Таймкоды: 00:00 - Вступление 00:15 - Способы открытия и расположения chrome devtools 01:35 - Про эмуляцию мобильных устройств 02:07 - Вкладка Elements 02:27 - Про HTML 03:30 - Про CSS 04:25 - Что может Inspect веб-элемента 06:45 - Сss и xpath локаторы 08:25 - Пишем css и xpath локаторы 11:37 - Вкладка Console 19:10 -... Смотреть видео...

CSS Overview | Обзор CSS | Работа в Chrome DevTools

Всем привет! Я сняла небольшой обзор на понравившуюся вкладку в Chrome DevTools - «Обзор CSS» (доступна с 96 версии Chrome, пока что это экспериментальная возможность, поэтому на каких-то страницах может работать некорректно). С помощью неё можно легко построить краткую и понятную аналитику по стилям на текущей странице Приятного просмотра! Не забудь поставить лайк и подписаться, чтобы не пропустить новые видео! Мой телеграм-канал: 00:00:00 - Вступление 00:00:21 - Подключение 00:01:10 - Сводные данные обзора 00:01:33 - Цвета 00:02:13 - Информация о шрифте 00:03:06 - Неиспользуемые объявления 00:03:29 - Запросы медиа 00:03:46 - Завершение Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего... Смотреть видео...

How To Use React DevTools In Safari

Learn how to use React DevTools in Safari! In this tutorial, we'll show how to set up the standalone version of React DevTools to debug your React app in non-supported browsers like Safari. Prerequisites: - A Mac running Safari - A code editor, such as Visual Studio Code - Git installed on your machine - Node.js and npm (the Node package manager) installed on your system Resources: - Text version of this tutorial: - Sample application on GitHub: - Check out the React DevTools npm package: ----- If you're looking for content targeted at software developers, DevOps practitioners, data engineers, and more, look no further. Draft.dev can help you create and scale your marketing content so you can stop begging your software engineers to... Смотреть видео...

Как стать тестировщиком. Урок 19. Сhrome DevTools

Если Вы хотите стать тестировщиком и начать работать в IT, сменить свою сферу деятельности, подтянуть свои знания по тестированию или просто интересуетесь сферой IT, то этот курс для Вас! В курсе будет рассмотрена теория тестирования, техники тест - дизайна, основные инструменты, с которыми работает тестировщик, а именно: SQL запросы, баг - трекинговая система Jira, тестирование API c помощью Postman, система контроля версий Git, тестовые артефакты: чек - листы, тест - кейсы, баг - репорты, но безо всякой лишней воды, только то, что действительно пригодится при собеседовании и в работе. В этом видео мы рассмотрим наш 19-й урок - про Chrome DevTools Мои курсы: 1) Тестирование ПО для начинающих на Stepik: 2) Git для начинающих: Поддержать... Смотреть видео...

Подмена контента ("Override Content" - Chrome Devtools, "Edit And Resend" - Firefox

Подписывайтесь на канал для того, чтобы узнать про новые вебинары: Данный вебинар также проводился в рамках курсов: Курс по подготовке на собеседования: Курс по тестированию бэкенда Описание: Откройте Chrome DevTools ▪️ПКМ → Inspect или F12 → вкладка Network. Найдите нужный запрос ▪️Обновите страницу → найдите запрос → ПКМ → Override content. Включите Local Overrides ▪️В DevTools появится баннер → нажмите Select folder. Выберите любую папку на диске → нажмите Allow. ▪️Редактируйте ответ Перейдите во вкладку Sources → Overrides. ▪️Откройте файл перехваченного запроса (JSON, HTML и т.д.). Измените данные под свои нужды → Ctrl+S / Cmd+S. ▪️Повторно отправьте запрос Перезагрузите страницу или инициируйте тот же запрос. ▪️В... Смотреть видео...

Вебинар. Часть 4 | DevTools: Content/Headers Overrides

Тестировщик часто сталкивается с Devtools, поэтому мы в этом вебинаре рассказали про дополнительный функционал, который может быть полезен в работе. В этой части рассмотрели возможности Content/Headers overrides. Прошлую часть вебинара вы можете посмотреть по ссылке: ________________________________________ Для того, чтобы начать учиться в нашей школе Quality Academy, свяжитесь с нами в удобном месте: 🌐 наш сайт: 🌐 группа ВК: 🌐 наш telegram-канал: 🌐 отзывы учеников: 🌐 по всем вопросам: #qaengineering #тестировщикснуля #тестировщик #курспотестированию #тестированиепо #ручноетестирование #обучениенатестировщика #тестирование #обучение #qa #Devtools #DevtoolsConsole #DevtoolsБраузера #ИнструментыDevtools... Смотреть видео...

Курс Тестирование ПО с нуля. 25 урок. Как тестировщику работать в DevTools

Добро пожаловать на Курс Тестирование ПО с нуля В 25 уроке Мы будем знакомиться с основным инструментом тестировщика и разработчика в браузере - DevTools. Это должен знать каждый уважающий себя тестировщик, для эффективной работы! - мой обучающий курс по Тестированию ПО с Нуля, с тестовыми и практическими заданиями, а так же видео, которые не войдут в курс на Rutube. - мой обучающий курс по Автоматизации тестирования и Программировании на Python с использованием Selenium, с практическими заданиями, а так же видео, которые не войдут в курс на Rutube. - мой обучающий курс по Автоматизации тестирования и Программировании на Python с использованием API, с практическими заданиями, а так же видео, которые не войдут в курс на Rutube. ... Смотреть видео...

HTML с нуля / Курс по вёрстке с HTML и CSS / ч.4 - Отступы, Devtools, блочные элементы

Это урезанная версия курса. Полная версия курса доступна на платформах Udemy и Stepik. На стэпике вы можете приобрести курс, используя карту РФ. На Udemy вы можете приобрести курс, используя карту выпущенную вне РФ. Stepik: - после перехода используйте промокод RUTUBE, чтобы получить скидку в 30% Udemy: *********************************************** Подписывайтесь на телеграм канал: Все курсы от EngineerSpock: Подписка на Boosty: Донаты на развитие: *********************************************** Начните свое путешествие в мир веб-разработки с нашим курсом по вёрстке с использованием HTML и CSS. Для начала, вы познакомитесь с инструментом Figma, который стал выбором номер один для многих разработчиков и дизайнеров по всему миру.... Смотреть видео...

URL, IP адрес и маска подсети | DNS сервер, Кэш, куки | Работа с Devtools

Что такое URL адрес. IP адрес и маска подсети. DNS сервер. Кэш, куки Работа с Devtools. Инструменты разработчика Chrome. Вступай в наше комьюнити!👇 🔝Все проекты IT House🔝 - 🤝Сотрудничество🤝 - 😇Помочь нашему развитию😇 - #IT #АйтиСоветы #Программисты #ЛайфхакиДляIT #ITКарьера #НЕБУДЬСТАДОМ #Кодинг #Программирование #РазработкаПО #АйтиСфера #ITСпециалисты #TechTips #АйтиЛайфхаки #АйтиИнсайты #КарьераВIT #АйтиПрофи #СоветыПрограммисту #АйтиХак #ITОбучение #JuniorDev #SeniorDev #SoftwareDevelopment #CodeLife #ITИндустрия #АйтиРынок #Frontend #Backend #DevOps #CloudComputing #DataScience #AI #MachineLearning #CyberSecurity #TechLife #АйтиПуть #Айтишник #WorkInIT #АйтиНавыки #АйтиПрофессия #ITТренды #АйтиБудущее #rusau #русов #апостолсергей... Смотреть видео...

Вебинар. Часть 3 | DevTools: Break On

Тестировщик часто сталкивается с Devtools, поэтому мы в этом вебинаре рассказали про дополнительный функционал, который может быть полезен в работе. В этой части рассмотрели возможности Break on. Прошлую часть вебинара вы можете посмотреть по ссылке: ________________________________________ Для того, чтобы начать учиться в нашей школе Quality Academy, свяжитесь с нами в удобном месте: 🌐 наш сайт: 🌐 группа ВК: 🌐 наш telegram-канал: 🌐 отзывы учеников: 🌐 по всем вопросам: #qaengineering #тестировщикснуля #тестировщик #курспотестированию #тестированиепо #ручноетестирование #обучениенатестировщика #тестирование #обучение #qa #Devtools #DevtoolsConsole #DevtoolsБраузера #ИнструментыDevtools #ИнструментыРазработчикаDevtools... Смотреть видео...

Ускорь разработку с помощью Chrome DevTools | Фишки Chrome DevTools о которых ТЫ НЕ ЗНАЛ | FRONTEND

Привет! 😊 В этом видео я расскажу про 5 крутых фишек в инструментах разработчика, которые упростят вашу работу. Вы узнаете, как быстро повторять запросы, копировать данные в JSON, и ещё несколько полезных трюков для эффективной отладки. Эти инструменты точно сэкономят вам время! Мой телеграм-канал: 00:00:00 - Вступление 00:00:13 - Работа с запросами (для тестирования бэкенда) 00:02:14 - Быстрый доступ к элементам из инспектора 00:03:41 - Копирование переменных 00:05:05 - Условные точки останова 00:05:42 - Альтернатива console.log 00:06:22 - Резюмируем Любая информация, представленная в этом видео, принадлежат мне и не отражают позицию моего работодателя или каких-либо организаций, с которыми я связана. Весь материал, показанный в... Смотреть видео...