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

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. Тут мы поговорим о неочевидных вкладках, которые помогут вам в тестировании приложения.

Программа:

Базовое видео

1. Введение
2. Elements
3. Console
4. Source и Debugger
5. Network
6. Mobile emulator
7. Application и Lighthouse
8. Memory
9. Performance
10. Rendering
11. Layers
12. Animations

Простые штуки

1. Введение
2. Design mode
3. Console
4. Element Properties
5. Node screenshot
6. TypeScript

Новые вкладки

1. CSS Overview
2. Accessibility
3. Coverage
4. Sensors

Углубляемся

1. Perfomance
2. Debugger

React

1. React dev tools

Заключение

1. DevTools Tips

Лайфхаки

1. Лайфхаки

В курс входят:

• 27 уроков
• 2 часа 40 минут видео
• 15 тестов

Автор - Роман Максимов.