Курс «Введение в DevTools» поможет вам уверенно освоить инструменты разработки в браузере и понять, как они упрощают анализ, оптимизацию и отладку веб‑приложений. Материал подходит как новичкам, так и разработчикам, которые хотят углубить свои навыки работы с Chrome DevTools.
Что вы узнаете на этом курсе
Курс охватывает ключевые инструменты Chrome DevTools и показывает, как применять их для решения реальных задач фронтенд‑разработки.
Основы работы с DevTools
История развития JavaScript‑отладчиков и роль DevTools в современном вебе
Структура интерфейса DevTools и назначение основных панелей
Создание, редактирование и сохранение изменений в проектах прямо в браузере
Отладка веб‑приложений
Пошаговая отладка JavaScript с использованием breakpoints и watch‑переменных
Диагностика сложных ошибок в интерфейсе и логике приложения
Работа с сетевыми запросами и анализ API‑взаимодействия
Анализ производительности
Измерение производительности сети: загрузка, задержки, проблемы с ресурсами
Профилирование работы процессора и оптимизация рендеринга
Использование вкладки Performance для выявления «узких мест»
Аудит и улучшение качества сайта
Использование Lighthouse для оценки качества веб‑страницы
Советы по улучшению SEO, доступности и производительности
Анализ типичных ошибок и рекомендации по устранению
Почему этот курс полезен
Программа сочетает теорию и практику, позволяя сразу применять полученные знания. После прохождения курса вы будете уверенно использовать DevTools для разработки, оптимизации и аудита веб‑проектов любой сложности.
Удален по просьбе правообладателя
Урок 1.00:06:02
Introduction
Урок 2.00:06:29
DevTools History
Урок 3.00:11:48
Elements & Network Panels
Урок 4.00:04:23
Performance, Console, & Security Panels
Урок 5.00:03:05
Sources, Application, & Memory Panels
Урок 6.00:03:40
Lighthouse, Device Emulation, & Element Finder
Урок 7.00:05:21
Quick Edits: CSS, HTML, & Scroll Into View
Урок 8.00:06:18
Quick Edits: Computed Styles & Specificity
Урок 9.00:08:01
Quick Edits: HTML Breakpoints, Themes, & Accessibility
Урок 10.00:01:14
Quick Edits Exercise
Урок 11.00:04:48
Quick Edits Solution
Урок 12.00:05:36
Workspaces
Урок 13.00:04:12
Workspaces Exercise
Урок 14.00:03:17
Workspaces Solution
Урок 15.00:16:12
Step Through Debugging
Урок 16.00:01:46
Step Through Debugging Exercise
Урок 17.00:06:59
Step Through Debugging Solution and Q&A
Урок 18.00:13:53
Network Performance & Network Waterfall
Урок 19.00:08:27
Network Performance Q&A
Урок 20.00:05:41
Measuring Real User Performance
Урок 21.00:10:47
On-Page Performance
Урок 22.00:08:41
Performance Panel & Page Jank Tips
Урок 23.00:03:33
Layout Thrashing Exercise
Урок 24.00:08:01
Layout Thrashing Solution
Урок 25.00:02:52
Running Node.js
Урок 26.00:14:29
Memory Leaks & Memory Heap Snapshots
Урок 27.00:08:57
What Can Slow Down a Website
Урок 28.00:02:21
Simulating Network Conditions
Урок 29.00:07:51
Lighthouse Audits
Урок 30.00:08:31
Wrapping Up
Авторы - Jon Kuperman, master.dev (ex FrontendMasters)
Джон - Developer Advocate в Cloudflare, где он работает над проектами Workers и Pages. Он страстно увлечён открытым программным обеспечением и идеями свободного интернета. В свободное время Джон активно занимается самообразованием, чтением, ведением блога и обучением.
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.