Главная страницаКатегория chrome devtoolsChrome Developer Tools

Chrome Developer Tools

Name: Chrome Developer Tools
Rating: 4.9 (53 reviews)

Mastering Chrome Developer Tools

frontendmasters

★4.9 (всего оценок - 53)

Продолжительность

4 ч 16 мин

Категория

Chrome DevTools

Количество уроков

35 Видео

Дата добавления

24 янв. 2017 г., 00:00

Язык

Английский

Дата обновления

28 апр. 2026 г., 20:38

Chrome Developer Tools — это мощный встроенный набор инструментов, который помогает разработчикам анализировать, оптимизировать и отлаживать веб‑приложения. Многие знают о базовых возможностях DevTools, но лишь немногие используют весь потенциал этого инструмента. В этой статье мы разберём ключевые функции, которые сделают вашу работу быстрее, проще и эффективнее.

Что такое Chrome Developer Tools

Chrome DevTools — это набор встроенных инструментов браузера Google Chrome, позволяющий разработчикам работать с HTML, CSS, JavaScript, сетевыми запросами, производительностью сайта и многим другим. Инструменты открываются сочетанием клавиш F12 или Ctrl + Shift + I.

Основные панели и их возможности

Elements

Панель Elements позволяет в реальном времени просматривать и изменять структуру HTML и стили CSS.

Просмотр DOM‑структуры
Редактирование CSS прямо в браузере
Анализ иерархии элементов
Проверка адаптивности и состояния элементов

Console

Панель Console — основной инструмент для отладки JavaScript.

Вывод логов и ошибок
Выполнение JS‑кода напрямую
Работа с API браузера
Отладка событий и предупреждений

Network

Панель Network помогает понять, как загружается ваш сайт.

Анализ сетевых запросов
Поиск «тяжёлых» ресурсов
Измерение времени загрузки страницы
Кэширование и проверка HTTP‑заголовков

Performance

Панель Performance используется для анализа производительности сайта и поиска узких мест.

Профилирование работы скриптов
Анализ рендеринга страницы
Поиск блокирующих ресурсов

Application

Через панель Application вы можете работать с данными, которые хранятся в браузере.

LocalStorage и SessionStorage
IndexedDB
Cookies
Сервис‑воркеры

Дополнительные инструменты, которые часто недооценивают

Device Mode

Позволяет тестировать адаптивность сайта под разные устройства и разрешения.

Coverage

Показывает, какие части CSS и JS действительно используются на странице, а какие можно оптимизировать.

Lighthouse

Автоматический инструмент для анализа производительности, SEO, доступности и качества вашего сайта.

Заключение

Chrome Developer Tools — это намного больше, чем просто средство проверки HTML и CSS. Освоив эти инструменты, вы сможете ускорить разработку, улучшить качество кода и оптимизировать производительность сайта. Используйте DevTools на полную мощность — и ваши проекты станут на порядок эффективнее.

Удален по просьбе правообладателя

Урок 1.00:07:52
History of Developer Tools
Урок 2.00:02:58
Things Dev Tools Can Do
Урок 3.00:12:58
Developer Tools Panels
Урок 4.00:06:06
Elements Panel & Style Editor
Урок 5.00:08:37
DOM Break Points, Color Formats, & Code Specificity
Урок 6.00:10:52
Sources Panel & Workspaces
Урок 7.00:05:11
Challenge 1: Editing a Page
Урок 8.00:07:39
Challenge 1 Solution
Урок 9.00:12:26
Step-Through Debugging
Урок 10.00:03:48
Black-Boxing and the Debugger API
Урок 11.00:01:39
Challenge 2: Debugging a Page
Урок 12.00:02:47
Variable Scope
Урок 13.00:09:27
Challenge 2 Solution
Урок 14.00:03:54
Conditional & XHR Breakpoints
Урок 15.00:07:05
Audits Panel
Урок 16.00:10:49
Common Audit Problems
Урок 17.00:06:35
Network Panel
Урок 18.00:09:10
Terminology
Урок 19.00:05:32
Common Problems
Урок 20.00:11:53
Timeline Panel
Урок 21.00:06:19
Profiling the Main Thread
Урок 22.00:01:52
Challenge 3: The Timeline
Урок 23.00:10:09
Challenge 3 Solution, Part 1
Урок 24.00:07:39
Challenge 3 Solution, Part 2
Урок 25.00:04:36
CPU Profiling
Урок 26.00:10:45
Page Jank
Урок 27.00:05:46
Will-Change
Урок 28.00:04:29
Common Memory Leaks
Урок 29.00:05:22
Challenge 4: Finding Memory Leaks
Урок 30.00:07:52
Challenge 4 Solution
Урок 31.00:04:30
Experiments & Resources
Урок 32.00:15:00
Performance Audit: frontendmasters.com
Урок 33.00:08:31
Performance Audit: skillsilo.com
Урок 34.00:07:49
Performance Audit: tauck.com
Урок 35.00:08:08
Performance Audit: buchbinderei.it

Автор - frontendmasters

frontendmasters

FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.

+792

Комментарии