Чему вы научитесь
- Elements
- Console
- Mobile toggler
- Source
- Rendering
- Network
- Application
- Lighthouse
- Memory
- Performance
- Performance Monitor
- Performance Insights
- Layers
- Animation
- СSS overview
- Coverage
- Sensors
- React 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. Тут мы поговорим о неочевидных вкладках, которые помогут вам в тестировании приложения.
Начальные требования
Желательно знать html/css, чтобы было понимание, о чем рассказывается в курсе.
Если вы знаете JS, то будет еще лучше, так как вы узнаете больше полезных фишек.
Наши преподаватели
Как проходит обучение
Курс представлен в виде видео, которое разбито на разные блоки.
В конце каждого блока есть тест с вопросами.
В конце обучения получаете сертификат.
Программа курса
загружаем...
Сертификат
Stepik
Что вы получаете
- Сертификат об окончании данного курса
Сколько стоит обучение
Price:
480 ₽
Вы попробовали и поняли, что вам сейчас не подходит этот курс? Ничего страшного, мы вернём вам деньги в течение 30-ти дней после покупки.