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

[Sky90]

Складчина: Chrome Dev Tools полный курс [2025] [Stepik] [Роман Максимов]


О курсе

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


Спойлер: Программа курса
Базовое видео

Введение
Elements
Console
Source и Debugger
Network
Mobile emulator
Application и Lighthouse
Memory
Performance
Rendering
Layers
Animations
Простые штуки

Введение
Design mode
Console
Element Properties
Node screenshot
TypeScript
Новые вкладки

CSS Overview
Accessibility
Coverage
Sensors
Углубляемся

Perfomance
Debugger
React

React dev tools
Заключение

DevTools Tips
Лайфхаки

Лайфхаки


В курс входят

27 уроков
2 часа 40 минут видео
15 тестов
Автор: Роман Максимов






СКАЧАТЬ

Для просмотра скрытого содержимого вы должны зарегистрироваться