Курс Модуль 1: Web Core - Лекция: Dev Tools

13.1 Знакомство в Chrome Dev Tools

Chrome DevTools — это мощный набор инструментов для веб-разработчиков, встроенный в браузер Google Chrome. Эти инструменты позволяют разработчикам отлаживать код, анализировать производительность и изменять страницы на лету.

Откройте инструменты разработчика в вашем браузере (обычно через F12 или Ctrl+Shift+I) и перейдите на вкладку "Консоль", чтобы увидеть выведенные сообщения.

Обычно она выглядит как-то так:

Давайте рассмотрим подробнее три ключевые вкладки: Elements, Console и Network.

13.2 Вкладка Elements

Вкладка Elements используется для изучения и редактирования HTML и CSS на веб-странице в реальном времени.

Основные возможности:

Изучение DOM: отображает структуру HTML-документа как дерево DOM. Вы можете разворачивать и сворачивать узлы (node), чтобы изучить структуру страницы.
Редактирование HTML: вы можете редактировать HTML-элементы, добавлять или удалять теги, атрибуты и текстовые узлы прямо в интерфейсе DevTools.
Редактирование CSS: в правой части панели отображаются стили, применяемые к выбранному элементу. Вы можете редактировать существующие стили или добавлять новые правила CSS.
Инспекция элементов: вы можете выбрать элемент на странице, нажав на значок "Select an element" (или используя горячую клавишу Ctrl + Shift + C) и кликнув на нужный элемент на веб-странице.
Стили и вычисленные стили: панель показывает примененные к элементу стили и вычисленные стили, что позволяет увидеть, какие стили в конечном итоге применяются к элементу.

13.3 Вкладка Network

Вкладка Network используется для мониторинга сетевых запросов, выполняемых страницей. Это полезно для анализа производительности и отладки проблем с загрузкой ресурсов.

Основные возможности:

Мониторинг сетевых запросов: отображает все HTTP-запросы, выполненные страницей, включая запросы на загрузку HTML, CSS, JavaScript, изображений и других ресурсов.
Детализация запросов: при выборе конкретного запроса вы можете увидеть детальную информацию, такую как заголовки запроса и ответа, данные запроса, время загрузки и т. д.
Анализ производительности: позволяет отслеживать время загрузки ресурсов и выявлять узкие места, которые замедляют загрузку страницы.
Фильтрация и сортировка: вы можете фильтровать запросы по типу (XHR, JS, CSS и т. д.), а также сортировать их по различным критериям (время, размер, статус и т. д.).
Throttle (Ограничение): возможность симуляции медленного соединения для тестирования производительности страницы при различных скоростях интернета.

Сегодня мы с вами познакомились с большим количеством очень важных вещей, так что детально погружаться в эти инструменты не будем — оставим на следующий раз.