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

[RoBot]

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

Хотите узнать, как эффективно использовать Chrome Dev Tools для создания и отладки веб-приложений? Тогда этот курс для вас!

Вы познакомитесь с различными инструментами, которые помогут вам анализировать и изменять элементы веб-страницы. Вы научитесь работать с консолью, сетью, производительностью, памятью, анимацией и многим другим.

После прохождения курса вы станете настоящим профессионалом в использовании Chrome Dev Tools!

Что вы узнаете на курсе:

1. Панель Elements:

— Как исследовать HTML и CSS код;
— Как узнать финальные стили, применяемые к элементам;
— Как определить, какие события связаны с кнопками;
— Как использовать псевдоклассы.

2. Панель Console:

— Что такое стек трейс и как с ним работать;
— Какие типы console бывают в JavaScript, как они отображаются в консоли и как их фильтровать;
— Как сохранить данные в консоли при перезагрузке страницы;
— Как создавать временные переменные в консоли.

3. Панель Mobile toggler:

— Как имитировать мобильное устройство;
— Как имитировать поворот экрана;
— Как имитировать плотность пикселей и как это влияет на работу приложения.

4. Панель Source:

— Что такое дебаггер и как им пользоваться;
— Как использовать дебаггер для исправления ошибок в приложении;
— Что такое source map файлы и как они работают;
— Что это за вкладка и как она помогает в работе.

5. Панель Rendering:

— Как будет выглядеть сайт для пользователей с проблемами зрения;
— Как имитировать тёмную тему;
— Как отследить, не влияет ли анимация на другие элементы.

6. Панель Network:

— Как сохранить данные при перезагрузке страницы;
— Как добавить больше информации в эту панель;
— Как искать данные в определённом запросе;
— Как имитировать медленный интернет;
— Как долго обрабатываются запросы и кто их вызывает.

7. Панель Application:

— Вкратце рассмотрим, что это за панель и зачем она нужна.

8. Панель Lighthouse:

— Вкратце рассмотрим, что это за панель и зачем она нужна.

9. Панель Memory:

— Как отследить утечку памяти;
— Как найти место, где произошла утечка памяти.

10. Панель Performance, Performance Monitor, Performance Insights:

— Как имитировать слабый компьютер;
— Как отследить утечку памяти и найти место, где она произошла;
— Как узнать о проблемах производительности анимации и кто их вызывает.

11. Панель Layers:

— Что такое слои, как они влияют на анимацию и соседние элементы;
— Как узнать, выносится ли анимация на отдельный слой;
— Какие CSS свойства помогают сделать анимацию более производительной.

12. Панель Animation:

— Как записать анимацию и что она из себя представляет;
— Как изменить анимацию и «поиграть» со значениями;
— Как применить стили к изменённой анимации.

13. Панель CSS overview:

— Узнать цвета и где они используются;
— Узнать контрастность цвета;
— Узнать шрифты и где они используются;
— Узнать о бессмысленных CSS свойствах и где они используются.

14. Панель Coverage:

— Найти неиспользуемый CSS/JS.

15. Панель Sensors:

— Имитировать геолокацию;
— Имитировать простой.

А также различные лайфхаки, которые я узнал за годы работы с Chrome Dev Tools.

Для кого этот курс:

Курс подойдёт всем специалистам, занимающимся frontend/web разработкой, как начинающим, так и опытным. Неважно, знакомы ли вы с React/Vue/Angular или нет. Даже если вы умеете только вёрстку, здесь вы найдёте много полезной информации.

Также курс будет полезен тем, кто изучает QA. Мы поговорим о неочевидных вкладках, которые помогут вам в тестировании приложений.

Подробнее:

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