egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Продолжительность
0 ч 33 мин
Категория
Chrome DevToolsКоличество уроков
7 Видео
Дата добавления
22 апр. 2017 г., 00:00
Язык
Английский
Дата выхода
1 янв. 2017 г., 01:00
Дата обновления
8 янв. 2018 г., 13:28
Этот курс является идеальным руководством для тех, кто хочет углубиться в мир отладки DOM с помощью Chrome DevTools. Мы внимательно изучим элементы панели Elements, чтобы помочь вам эффективно взаимодействовать с вашим веб-приложением в процессе его работы.
Обзор панели Elements
Панель Elements является ключевым инструментом для анализа и редактирования HTML и CSS на веб-странице. В этом разделе мы рассмотрим ее основные функции и возможности.
Кнопки и вкладки
- Инспектор: Позволяет выделить и изучить HTML-элементы на странице.
- Редактор стилей: Используйте вкладку Styles для изменения CSS в реальном времени.
- Слой дерева: Исследуйте структуру DOM и её связь с CSS.
Практическое использование
После изучения кнопок и вкладок, мы перейдем к практическому применению знаний, чтобы научиться эффективно отлаживать и изменять веб-приложение.
Обработка ошибок
Научитесь выявлять и исправлять ошибки в DOM, чтобы улучшить производительность и пользовательский опыт.
Оптимизация кода
Исследуйте способы оптимизации HTML и CSS для повышения скорости загрузки и рендеринга страницы.
Заключение
Курс предлагает детальное понимание отладки DOM в Chrome DevTools, вооружая вас знаниями для более глубокого взаимодействия с веб-приложениями.
- Урок 1.00:02:55Inspect Elements vs View Source
- Урок 2.00:02:25Make Changes in Your Browser
- Урок 3.00:06:25Debug with Style!
- Урок 4.00:05:28Console Integration
- Урок 5.00:05:46Understand the Event Listeners Panel
- Урок 6.00:03:53Use the Device Toolbar to Emulate Different Screens
- Урок 7.00:07:00Use DOM Break Points
Автор - egghead
Комментарии