Вы хотите узнать, как эффективно использовать Chrome Dev Tools для разработки и отладки веб-приложений? Тогда этот курс для вас! Вы познакомитесь с разными панелями, которые помогут вам анализировать и изменять элементы, консоль, сеть, производительность, память, анимацию и многое другое. Вы также узнаете множество лайфхаков, которые сэкономят вам время и силы. После этого курса вы станете настоящим мастером chrome dev tools!
Курс подойдет всем frontend/web разработчикам, как начинающим, так и junior/middle уровня. Не важно, знаете ли вы react/vue/angular. Достаточно даже того, если вы просто умеете верстать. Для верстальщиков тут будет тоже много полезных знаний.
Он будет также полезен для тех, кто изучает QA. Тут мы поговорим о неочевидных вкладках, которые помогут вам в тестировании приложения.
Содержание курса
Панель 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
Автор – Роман Максимов:
- Уже больше 8 лет пишу код.
- Работал как в маленьких, так и крупных компаниях.
- С радостью готов делиться с вами полезной информацией.
