Что можно делать с сайтом с помощью DevTools

DevTools позволяют анализировать, отлаживать и изменять сайт в реальном времени. Основные возможности:

1. Инспектирование DOM – просмотр и редактирование HTML/CSS прямо в браузере. Можно временно изменять стили или структуру страницы.

2. Отладка JavaScript – пошаговое выполнение кода, установка точек останова, просмотр стека вызовов.

3. Анализ сети – просмотр всех запросов, их времени выполнения, заголовков и ответов.

4. Производительность – замер скорости загрузки, анализ узких мест.

5. Эмуляция устройств – тестирование адаптивности под разные экраны.

Пример изменения стилей:

/* В DevTools можно временно изменить стиль элемента */
body {
  background-color: #f0f;
}

6. Работа с хранилищем – просмотр и редактирование Cookies, LocalStorage, SessionStorage.

7. Консоль – выполнение JavaScript команд, тестирование функций.