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

[SHAREWOOD]

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

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

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 тестов

Автор: Роман Максимов
Цена: 570 руб.

Скрытая ссылка

Материал «Chrome Dev Tools полный курс [2025] [Stepik] [Роман Максимов]», возможно, скоро появится на SHAREWOOD.

Воспользуйтесь поиском, может быть, он уже опубликован.