Программирование [Stepik, Роман Максимов] Chrome Dev Tools полный курс (2025)

[Брат Тук]

Автор: Stepik, Роман Максимов
Название: Chrome Dev Tools полный курс (2025)

Описание:

Вы хотите узнать, как эффективно использовать Chrome Dev Tools для разработки и отладки веб-приложений? Тогда этот курс для вас! Вы познакомитесь с разными панелями, которые помогут вам анализировать и изменять элементы, консоль, сеть, производительность, память, анимацию и многое другое. Вы также узнаете множество лайфхаков, которые сэкономят вам время и силы. После этого курса вы станете настоящим мастером chrome dev tools!

О курсе

• Панель Elements:
  Как исследовать html, css код;
  Как узнать финальные стили, которые висят на элементе;
  Как узнать какое событие висит на кнопках;
  Как имитировать псевдоклассы.
• Панель Console:
  Что такое стек трейс и как с ним работать;
  Какие console бывают в js, как они выводятся в консоль и как их фильтровать;
  Как сохранить данные в консоли, при перезагрузке страницы;
  Как создавать временные переменные в консоли.
• Панель Mobile toggler:
  Как имитировать мобильное устройство;
  Как имитировать поворот экрана;
  Как имитировать плотность пикселей, что это такое и на что влияет.
• Панель Source:
  Что такое дебаггер, как им управлять;
  Починим приложение, используя дебаггер;
  Что такое source map файлы и на что влияют;
  Что это вообще за вкладка и как она помогает в работе.
• Панель Rendering:
  Как сайт будет выглядеть для пользователя, у которого проблемы со зрением;
  Имитация темной темы;
  Как отследить, не задевает ли ваша анимация другие блоки.
• Панель Network:
  Как сохранить данные, при перезагрузки страницы;
  Как добавить больше информации в эту панель;
  Как искать данные в определенном запросе;
  Как имитировать медленный интернет;
  Как долго отрабатывают запросы и кто этот запрос вызвал.
• Панель Application:
  Вкратце посмотрим, что это за панель и зачем нужна.
• Панель Lighthouse:
  Вкратце посмотрим, что это за панель и зачем нужна.
• Панель Memory:
  Как отследить утечку памяти;
  Как найти то место, где была утечка памяти совершена.
• Панель Performance, Performance Monitor, Performance Insights:
  Как имитировать слабый компьютер;
  Как отследить утечку памяти и найти то место, где она была совершена;
  Как узнать о проблемах производительности анимации и кто эти проблемы создает.
• Панель Layers:
  Что такое слои, как они влияют на анимацию и на соседние элементы;
  Как узнать, выносится ли анимация на отдельный слой;
  Какие css свойства помогают сделать производительную анимацию.
• Панель Animation:
  Как записать анимацию и что эта запись из себя представляет;
  Как изменить анимацию и "поиграться" с значениями этой анимации;
  Как применить стили к измененной анимации.
• Панель СSS overview:
  Узнать цвета и где они используются;
  Узнать контрастность цвета;
  Узнать шрифты и где они используются;
  Узнать про бессмысленные css свойства и где они используются.
• Панель Coverage:
  Найти не используемый css / js.
• Панель Sensors:
  Имитация геолокации;
  Имитация простоя.
• А также, разные лайфхаки, которые я узнал за годы работы с chrome dev tools

Для кого этот курс
Курс подойдет всем frontend/web разработчикам, как начинающим, так и junior/middle уровня. Не важно, знаете ли вы react/vue/angular. Достаточно даже того, если вы просто умеете верстать. Для верстальщиков тут будет тоже много полезных знаний.
Он будет также полезен для тех, кто изучает QA. Тут мы поговорим о неочевидных вкладках, которые помогут вам в тестировании приложения.

Программа курса

• Базовое видео
• Простые штуки
• Новые вкладки
• Углубляемся
• React
• Заключение
• Лайфхаки

Подробнее:

Скачать: