День 3 | Работа с DevTools браузера

Что такое DevTools?

DevTools (Developer Tools) — это набор инструментов, встроенных в браузер, которые помогают разработчикам отлаживать, тестировать и оптимизировать веб-страницы. Это ваш главный инструмент как верстальщика!

Зачем нужны DevTools?

• Просматривать и изменять HTML/CSS в реальном времени
• Отлаживать JavaScript код
• Проверять производительность
• Тестировать адаптивность на разных устройствах
• Анализировать сетевые запросы
• Находить ошибки в коде

Как открыть DevTools?

Есть несколько способов открыть DevTools:

Способ 1: Горячие клавиши

• Windows/Linux:
  • F12 — самый простой способ
  • Ctrl + Shift + I
  • Ctrl + Shift + J (открывает сразу консоль)
• Mac:
  • Cmd + Option + I
  • Cmd + Option + J (открывает сразу консоль)

Способ 2: Через меню браузера

• Chrome/Edge: Меню (три точки) → Дополнительные инструменты → Инструменты разработчика
• Firefox: Меню → Веб-разработка → Инструменты разработчика
• Safari: Разработка → Показать веб-инспектор (нужно включить меню "Разработка" в настройках)

Способ 3: Правый клик

Правый клик на любом элементе страницы → "Просмотреть код" или "Inspect Element"

Основные вкладки DevTools

1. Elements (Элементы) / Inspector

Самая важная вкладка для верстальщика! Позволяет:

• Просматривать HTML структуру — видеть весь DOM (Document Object Model)
• Изменять HTML в реальном времени — двойной клик на элементе для редактирования
• Просматривать и изменять CSS — справа показываются все стили элемента
• Добавлять новые стили — можно писать CSS прямо в DevTools
• Видеть computed styles — итоговые стили после применения всех правил
• Проверять Box Model — визуально видеть margin, padding, border

Как использовать:

1. Откройте DevTools (F12)
2. Нажмите на иконку "Выбрать элемент" (стрелка в левом верхнем углу) или Ctrl+Shift+C
3. Наведите курсор на элемент на странице — он подсветится
4. Кликните — элемент откроется в панели Elements
5. Справа увидите все стили этого элемента

Изменение стилей в реальном времени:

1. Выберите элемент в панели Elements
2. Справа в панели Styles найдите нужное свойство
3. Кликните на значение — можно изменить
4. Или добавьте новое свойство — кликните на пустое место и введите свойство
5. Изменения видны сразу на странице!

Важно: Изменения в DevTools не сохраняются в файлах! Это только для тестирования. Чтобы сохранить, нужно скопировать изменения в ваш CSS файл.

2. Console (Консоль)

Консоль — это место, где JavaScript выводит сообщения и ошибки. Очень полезно для отладки!

Что можно делать:

• Видеть ошибки JavaScript (красным цветом)
• Видеть предупреждения (жёлтым цветом)
• Выполнять JavaScript команды прямо в консоли
• Тестировать функции
• Проверять значения переменных

Примеры использования:

// В консоли можно писать JavaScript:
console.log("Привет!");
let x = 10;
console.log(x);

// Можно получать элементы:
document.querySelector(".my-class");

// Можно изменять стили:
document.querySelector(".my-class").style.color = "red";

Типы сообщений в консоли:

• console.log() — обычное сообщение (синий)
• console.error() — ошибка (красный)
• console.warn() — предупреждение (жёлтый)
• console.info() — информация (синий)

3. Network (Сеть)

Показывает все запросы, которые делает страница (загрузка файлов, изображений, API запросы).

Что можно увидеть:

• Какие файлы загружаются
• Сколько времени занимает загрузка
• Размер файлов
• Статус загрузки (200 OK, 404 Not Found и т.д.)

Как использовать:

1. Откройте вкладку Network
2. Обновите страницу (F5)
3. Увидите список всех загруженных файлов
4. Кликните на файл — увидите детали (заголовки, ответ, время загрузки)

Полезно для:

• Проверки, загружаются ли все файлы
• Поиска медленных запросов
• Проверки API запросов

4. Sources (Источники)

Позволяет отлаживать JavaScript код: ставить точки останова (breakpoints), просматривать переменные, выполнять код пошагово.

Как использовать:

1. Откройте вкладку Sources
2. Найдите ваш JS файл в дереве файлов слева
3. Кликните на номер строки — поставится точка останова (breakpoint)
4. Обновите страницу — выполнение остановится на этой строке
5. Можно просматривать переменные, выполнять код пошагово

5. Application / Storage

Показывает данные, хранящиеся в браузере: cookies, localStorage, sessionStorage, IndexedDB.

Эмуляция мобильных устройств

Очень полезная функция! Позволяет тестировать сайт на разных размерах экрана без реального устройства.

Как использовать:

1. Откройте DevTools (F12)
2. Нажмите на иконку "Toggle device toolbar" (Ctrl+Shift+M или иконка телефона/планшета)
3. Выберите устройство из списка (iPhone, iPad, и т.д.)
4. Или введите свой размер вручную
5. Страница изменит размер и будет выглядеть как на выбранном устройстве

Что можно настроить:

• Размер экрана (ширина и высота)
• Тип устройства (мобильное, планшет, десктоп)
• Поворот экрана (портретная/альбомная ориентация)
• Тип сети (3G, 4G, медленное соединение)

Поиск элементов на странице

В панели Elements можно искать элементы:

• Ctrl+F (Cmd+F на Mac) — поиск по тексту в HTML
• Можно искать по классу, ID, тегу

Проверка Box Model

В панели Elements, когда выбран элемент, справа внизу есть визуальное представление Box Model:

• Показывает margin, border, padding, content
• Можно видеть точные размеры каждого
• Очень помогает понять, почему элемент имеет такой размер

Computed Styles (Вычисленные стили)

В панели Elements справа есть вкладка "Computed" — она показывает итоговые стили элемента после применения всех CSS правил.

Полезно для:

• Понимания, какие стили реально применяются
• Нахождения, откуда берётся стиль (показывает файл и строку)
• Проверки, какие стили переопределены

Практическое задание

1. Откройте DevTools на любой странице (F12)
2. Используйте инструмент выбора элемента (Ctrl+Shift+C)
3. Выберите несколько элементов на странице
4. Попробуйте изменить их стили в панели Styles
5. Добавьте новое CSS свойство
6. Откройте консоль и выполните несколько команд JavaScript
7. Откройте вкладку Network и посмотрите, какие файлы загружаются
8. Включите эмуляцию мобильного устройства (Ctrl+Shift+M)
9. Протестируйте свой сайт на разных размерах экрана
10. Проверьте Box Model нескольких элементов

Советы по работе с DevTools

• Используйте горячие клавиши — это намного быстрее
• Изменения в DevTools не сохраняются — не забывайте копировать в файлы
• Консоль — ваш друг — используйте console.log() для отладки
• Проверяйте на мобильных — эмуляция хороша, но реальное устройство лучше
• Изучайте ошибки — красные сообщения в консоли подскажут, что не так

Что дальше?

Отлично! Теперь вы знаете, как работать с DevTools. Это ваш главный инструмент для отладки и тестирования. В следующем уроке мы изучим систему контроля версий Git.