Инструменты разработки позволяют:
- Просматривать элементы соответствующие определённому HTML коду (например, какой-нибудь заголовок).
- Получить общий CSS используемый на странице и какой CSS применяется для конкретного элемента.
- Модифицировать CSS в реальном времени и визуально увидеть ваши изменения в браузере.
- Увидеть HTTP запросы, производимые браузером.
- Запускать JavaScript код в середине содержимого страницы.
- Определять узкие места в производительности и производить её измерение.
- Изменять ресурсы оффлайн, чтобы понять какие данные, что запрашивает страница, хранятся локально.
Инструменты разработчика можно открыть с помощью кнопки F12 или «Дополнительные инструменты ➤ Инструменты разработчика». Также можно правой кнопкой мыши выбрать «Исследовать элемент в контекстном меню».
Инспектор — позволяет видеть HTML-код и CSS, который применён к каждому элементу на странице. Также позволяет в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.
Консоль — инструмент, где выводятся сообщения и ошибки JavaScript, CSS и другие. Она позволяет загружать JavaScript вопреки порядку загрузки скрипта в браузере и докладывает об ошибках, как только браузер пытается выполнить Ваш код.
Отладчик JavaScript — инструмент для отладки JavaScript, если он не работает, как ожидалось. Он позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере и докладывает об ошибках, как только браузер пытается выполнить код.
Сеть — записывает и отображает сетевые запросы в любое время, когда панель инструментов открыта, даже если сам монитор сети не выбран. Отображает запросы, методы, статус коды, объем данных.
Заголовки — перечислены основные сведения о запросе, в том числе:
- URL-адрес запроса.
- Метод запроса.
- Удаленный IP-адрес и порт.
- Код состояния.
- HTTP-запросы и заголовки ответов, которые были отправлены.
Куки — перечислены все сведения о любых файлах cookie, отправленных с запросом или ответом.
Параметры — перечислены все параметры отправленные с запросом.
Тайминги — представлен более подробный аннотированный вид временной шкалы для каждого запроса, показывающий время выполнения.
Режим адаптивного дизайна — позволяет проверить сайт при разных разрешениях и сделать скриншот.
