Chrome DevTools или базовая база

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

Выше я приложил скриншот панели, которую, наверное, видел каждый, кто хоть как-то связан с вебом. Но что же делать, если дальше вкладок Elements, Console и Network ты не заходил? Давай начнем по порядку)

Elements (HTML+CSS)

Данная вкладка может дать очень много информации об элементах в DOM дереве помимо их расположения и стилей, но давай по порядку.

1. Структура DOM
   
   Здесь ты можешь увидеть расположение всех элементов, которые есть у тебя на странице, посмотреть их атрибуты и даже изменять их. Для изменения html кода достаточно сделать двойной клик по нужному элементу будь то атрибут или текст и тогда DevTools даст возможность редактировать содержимое. Полезно, когда нужно например, проверить "А что будет если с сервера придет слишком длинная строка?"
   
   Так же, мало кто из новичков знает, но с помощью данной вкладки можно делать скриншоты элементов. Достаточно нажать правой кнопкой мыши по нужному элементу и выбрать пункт Capture node screenshot

   

2. Styles
   
   Вкладка Styles отвечает, как бы это странно не было за стили элементов. Находится она справа от DOM дерева, которое мы разобрали выше и выглядит примерно вот так
   

   

   Давай разберем, что же именно позволяет нам делать данный инструмент DevTolls'ов.
   В первую очередь в глаза бросаются зачеркнутые и серые стили. Таким способом браузер показывает нам какие стили у нас перекрыты и не применяются к элементу.
   Серые стили - перекрыты другими.
   Зачеркнутые стили - переопределены.
   
   Не менее важная функция - возможность смотреть стили псевдоэлементов (:hover, :focus и пр). Для этого нужно нажать на кнопку :hov рядом с фильтром
   
   Так же в данной вкладке как и в предыдущей мы можем изменять элементы, присваивая и изменяю у них стили. Для этого достаточно нажать левой кнопкой мыши по интересующему нас стилю и отредактировать его. Для добавления нового нужно два раза кликнуть в пустом месте окна стилей нужного элемента.

3. Event Listners
   
   Не менее интересная вкладка, которой мало кто из начинающих пользуется. Открывается она в том же окне где и стили, в верхнем баре нужно выбрать Event Listners.
   

   

   Данная вкладка помогает нам отследить какие слушатели событий есть на элементе и как они работают.
   

Network

Вкладка Network отвечает за то какие запросы мы отправляем и что получаем. Незаменимый инструмент для фронтендера, предлагаю разобраться чуть глубже

На скрине выше ты можешь рассмотреть интерфейс данной вкладки. Сверху у нас находятся настройки, часть из которых мы разберем в пределах этой статьи, чуть ниже идет таймлайн, который показывает количество данных мы получили за промежуток времени, так же позволяет фильтровать полученные данные по времени (достаточно выделить промежуток мышкой)

Разберем основной функционал данного инструмента.

1. Как повторить запрос?
   Чтоб повторить запрос нужно нажать на нужный запрос правой кнопкой мыши и выбрать Replay XHR (для XHR запросов) или Copy → Copy as cURL → вставить в терминал (см. ниже)

2. Как определить какой ресурс самый объемный?
   Для определения самого тяжелого ресурса нужно отфильтровать запросы по параметру Size или Transferred (может различаться в зависимости от браузера). Самый верхний и будет являться самым тяжелым.

3. Как посмотреть общий объем страницы?
   Внизу вкладки Network есть строки Transferred и Resources.
   Transferred - объем с кэшем
   Resources - объем страницы без кэша

4. Для чего нужен trotling, disable cache, preserve log?

   Опция	Назначение
   Throttling	Ограничение скорости сети (3G, 4G, offline) — полезно для тестов.
   Disable cache	Отключает кеш — чтобы проверить «чистую» загрузку.
   Preserve log	Сохраняет лог запросов при перезагрузке страницы или переходах по ссылкам.

5. Как скопировать curl запрос?
   Чтоб скопировать cUrl запрос нужно найти нужный запрос, нажать на него правой кнопкой мыши и выбрать Copy → Copy as cURL. Далее можно данный запрос вставить в терминал для проверки

   curl 'https://api.example.com/user' -H 'Authorization: Bearer token'

Application

Вкладка Application чаще всего нужна фронтенд разработчику для проверки хранилищ таких как: LocalStorage, Cookie, Session Storage. Давай разберем чуть подробнее

Чтоб посмотреть наполнение нужного нам хранилища достаточно выбрать его в левом меню и тогда справа появится информация о том, что оно хранит. Так же справа можно создавать и изменять данные в хранилище.

В рамках этой статьи не буду затрагивать темы о различии хранилищ и способах их применения.

Sources

Для чего можно использовать вкладку Sources:

• Просмотр и отладка JS, TS, CSS файлов.

• Добавление breakpoints.

• Live-редактирование кода и сохранение на лету.

• Работа с local overrides.

Остановимся чуть подробнее на брейкпоинтах.

Что такое брекпоинты и как их ставить?

Breakpoints — точки останова: выполнение JS кода приостанавливается.
Ставятся: клик слева от строки кода или Event Listners Breacpoints (для событий).

Дополнительно

• Как дебажить анимации?
  
  Включи вкладку Animations через Command Menu и в появившейся вкладке можно замедлить, приостановить и проанализировать анимацию

• Как посмотреть FPS, Web Vitals?
  
  Включи Performance Monitor (через Command Menu). Отображает FPS, CPU Usage, JS heap, DOM Nodes.